Question

我是使用AngularJs的新手，尽管我已经完成了这些教程，但我仍然有很多未解决的问题。我现在主要关注的是如何将我的应用程序划分为模块？

基本上我需要构建一个应用程序，它将充当各种应用程序的门户，每个应用程序代表一个业务功能（有时彼此几乎没有任何关系）。

在本教程中，他们将展示如何使用多个视图创建一个应用。我需要的是一个具有多个模块的应用程序，每个模块都有自己的视图（我可能也有共享视图）。

有没有人在使用这种结构的应用程序上工作？你能分享一下你的经历以及你如何组织事情吗？

AngularJS Seed项目（https://github.com/angular/angular-seed）很好，但它并没有真正展示如何构建复杂的应用程序。

Answer 1

<强> [编辑] 我在我的博客上写了一篇文章，详细解释了一些内容：

read it on sam-dev.net您现在可以使用代码示例read part II。

我会回答我自己的问题。不是因为我认为它是最好的方法，而是因为它是我决定选择的那个。

这就是我将业务模块划分为文件夹的方式

应用
- businessModule
  - 控制器
    - index.js
    - firstCtrl.js
    - secondCtrl.js
  - 指令
  - 服务
  - 视图
  - 过滤器
- anotherBusinessModule
- 共享
- app.js
- 的index.html

每个模块都有自己的控制器，指令等文件夹结构......

每个文件夹都有一个index.js文件，然后是其他文件来分隔每个控制器，每个指令等......

index.js文件包含模块的定义。例如，对于上面的businessModule的控制器：

angular.module('myCompany.businessModule.controllers', []);

这里没有依赖关系，但可能有任何依赖关系。

然后在firstCtrl.js中，我可以重用该模块并将控制器添加到它：

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',     

        function(){
});

然后app.js将我想要的所有模块聚合到依赖项数组中。

 angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']);

共享文件夹包含指令和其他非特定于业务模块的东西，可以在任何地方重复使用。

同样，我不知道它是否是最好的方法，但它绝对适合我。也许它可以激励其他人。

修改

由于index.js文件包含模块声明，因此必须在任何其他应用程序脚本之前在html页面中引用它们。为此，我使用了ASP.NET MVC 4的IBundleOrderer：

var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() }; bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true)); public class AsIsBundleOrderer : IBundleOrderer { public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) { files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1); return files; } }

Answer 2

在大多数情况下，Sam的方法似乎是最好的方法。目前的Angular文档将它设置为每个控制器，服务等的模块，但这与谷歌的Miško本人相矛盾。

在Miško最近的 Angularjs Best Practices 视频中，他展示了如何布置模块的结构以便于测试和轻松扩展。请记住，如何构建模块不会影响角度应用程序中的性能。

从开发角度应用程序，我建议使用最佳实践方法出于上述原因。您可能希望制作自己的节点脚本以暂时生成控制器等，其中可能包括您希望创建控制器的模块和名称，然后自动生成控制器和正确的测试规范创建。

如果您希望仔细阅读有关设置的信息，可以 an excellent post here 根据您认为的方向设置项目。

Answer 3

你应该去yeoman https://github.com/yeoman/yeoman和yeoman发生器结构：https://github.com/yeoman/generator-angular，它成为一个比angular-seed更好的解决方案来设置应用程序。对于不同的业务模块，您应该创建不同的应用程序并共享服务和指令

Answer 4

对于那些感兴趣的人，我制作了Angular Seed的“模块化”版本，更符合Misko的最佳实践：https://github.com/sanfordredlich/angular-brunch-seed-modularized

它设置了Brunch，因此您可以非常快速地进行页面重新加载，测试运行等等。您可以快速开发，如果您遵循代码中的模式，您的应用程序应该可以很好地扩展。享受！

Answer 5

我发现Yeoman发生器采用的方法的缺点是它没有与角度模块真正对齐，所以它对我来说感觉不是很有凝聚力。因此，当项目变得越来越大并且您正在处理特定组件时，我发现自己在源代码树中翻了很多。

我最近遇到了一种不同的方法here。这种方法通过角度模块对文件进行分组，让我感觉更有凝聚力。一个可能的缺点是，您需要构建网站，而不是仅仅运行它。该项目中的grunt watch任务有助于此。

构建我的AngularJS应用程序

5 个答案: