将Angularjs和Rails应用程序分离为独立的组件

Question

我想试试Angularjs。然而，我一直难以决定我的angular应用程序的位置。

我在后端使用Rails框架。我见过一些教程，其中整个angular应用程序位于assets/javascript文件夹下。

我想知道我是否可以让它完全存在于我的轨道目录之外，而不是生活在资产/ javascript文件夹中。这样，我就可以完全分离后端和前端。（这是推荐的吗？

我相信资产管道也预编译了很多资产。如果我要分离出angularjs资产，我是否需要以某种方式预编译这些资产？

谢谢

Answer 1

我们一直在使用 AngularJS 与我们的 Rails 应用程序，以一种我们一直在使用 Rails ERB 模板的方式，但在需要时切换到使用 ng 指令。

对于上面的设置，我们使用了bower/bower-rails gem，它允许我们使用bower来管理angular包及其依赖项。我们将它提交到我们的repo中，在javascripts目录中，由Rails资产管道负责。

考虑到我们在ERB模板和Angularjs之间有超过50-50%的视图拆分，这种设置对我们来说效果很好。

有关此设置的更多信息，请访问以下链接：

< Li > http://angular-rails . com/bootstrap . html < Li > http://Pete-Hamilton . co . uk/2013/07/13/angular js-and-rails-with-bower/ < Li > http://start . jcolemorrison . com/setting-up-an-angular js-and-rails-4-1-project/

Answer 2

您可以使用基于咕噜声的工作流程：

< li >如何管理带有大量脚本文件的AngularJS工作流 < Li > http://new triks . com/2013/06/11/automating-angularjs-with-yeoman-grunt-and-bower/

如果您从一个解耦的前端开始，那么首先使用模拟，这样您可以保持在angular范围内，并且不会丢失后端和前端逻辑之间的切换焦点。构建单页面html" target="_blank">应用程序的一个优点是，您可以独立于后端api开发它。有关模仿http响应的信息，请参见(http://docs.angularjs.org/api/ngMockE2E.$httpBackend)。

Answer 3

我一直在研究类似的问题。有一些很好的工具可以让你将AngularJS直接集成到你的rails资产管道中，如果你只需要一点角度，我觉得它们很好。

但是，如果你想要一个完整的Angular前端，也就是单页Web应用程序，我认为你最终会受到兼容性和一些工具的限制。我觉得Rails宝石跟不上Angular，所以你会陷入版本冲突。我也看到越来越多的Angular独立工具，我非常喜欢ng-boilerboard项目模板。我也喜欢很多测试工具，比如karma，我还没有真正找到将karma与rails集成的方法。

出于这个原因，我最终决定将两者分开。最初，我通过创建一个rails应用程序和一个单独的角应用程序（单独的目录）来做到这一点。我使用ng-boilerboard作为角端的框架。我写了一个教程。这最终有点令人沮丧，我写了更多的想法，主要的烦恼是我有两个git存储库，并且保持它们同步很烦人。跨两个目录使用IDE也有点烦人。我最终转向rails和角在同一个文件夹中，它们似乎玩得很好，因为每个项目都使用不同的目录。

在这个当前的结构中，我使用ng-boilerplate附带的grunt设置来缩小所有代码，打包它并运行karma单元测试。我还没有确定端到端测试，但是它在我的列表中。我发现这是一个相对高效的工作环境。我为我的页面、控制器和karma测试用例选择的结构有一些重复的代码(为了保持可读性，我选择不把它去掉)。我计划扩展rails scaffold generator来为我创建javascript框架——所以当我创建persons rails scaffold时，它也会为我创建persons angularjs scaffold。如果我完成这项工作，我会在这里更新。

编辑：我也完成了搭建工作，这允许rails在生成rails模型/控制器等时自动生成angularJS元素。博客文章如下：http://technpol.wordpress.com/2013/09/24/rails-generator-to-generate-angular-views/