33

我在使用 AngularJs 方面完全是新手，虽然我已经完成了教程，但我仍然有很多未解决的问题。我现在主要关心的是我应该如何将我的应用程序分成模块？

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

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

有没有人开发过具有这种结构的应用程序？你能分享你的经验和你是如何组织事情的吗？

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

4

5 回答 5

31

[编辑] 我在我的博客上写了一篇文章来更详细地解释事情：

在 sam-dev.net 上阅读它 ，您现在可以阅读第二部分，以及代码示例。

我会回答我自己的问题。不是因为我认为这是最好的方法，而是因为这是我决定采用的方法。

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

  • 应用程序
    • 业务模块
      • 控制器
        • index.js
        • 第一个Ctrl.js
        • 第二个Ctrl.js
      • 指令
      • 服务
      • 意见
      • 过滤器
    • 另一个业务模块
    • 共享
    • 应用程序.js
    • 索引.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;
    }
}
于 2013-04-18T08:30:58.830 回答
11

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

在 Miško 最近的Angularjs 最佳实践视频中，他展示了如何布局模块的结构以便于测试和轻松扩展。请记住，您构建模块的方式不应影响 Angular 应用程序中的性能。

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

如果您想详细了解设置，这里有一篇关于根据您认为项目的发展方向设置项目的优秀文章。

于 2013-04-19T00:12:55.313 回答
3

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

于 2013-04-11T09:39:20.357 回答
2

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

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

于 2013-08-04T06:19:29.850 回答
1

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

我最近在这里遇到了一种不同的方法。这种方法按角度模块对文件进行分组，让我感觉更有凝聚力。这样做的一个可能的缺点是您需要构建站点，而不能只是在适当的位置运行它。不过，该项目中的 grunt watch 任务对此有所帮助。

于 2013-04-12T02:52:50.833 回答