Html 构建我的 AngularJS 应用程序

Structuring my AngularJS application

提问by Sam

I'm totally newbie at using AngularJs and although I've been through the tutorials, I still have loads of unanswered questions in my mind. My main concern right now is how should I divide my application into modules ?

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

Basically I need to build an app which will act as a portal to various apps, each representing a business functionality (sometimes with little to no relationship with each others).

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

In the tutorial, they show how to create one app with multiple views. What I need, is one app with multiple modules, each module having its own views (and I'll probably have shared views too).

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

Has anyone worked on an app with that kind of structure ? Could you share your experience and how you've organised things ?

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

The AngularJS Seed project (https://github.com/angular/angular-seed) is good but it does not really show how to build a complex application.

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

采纳答案by Sam

[EDIT]I wrote an article on my blog to explain things in more details:

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

read it on sam-dev.netand you can now read part II, with code sample.

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

I'll answer my own question. Not because I think it's the best approach, but just because it's the one I've decided to go with.

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

This is how I've divided my business modules into folders

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

• app
  • businessModule
    • controllers
      • index.js
      • firstCtrl.js
      • secondCtrl.js
    • directives
    • services
    • views
    • filters
  • anotherBusinessModule
  • shared
  • app.js
  • index.html

• 应用程序
  • 业务模块
    • 控制器
      • 索引.js
      • 首先Ctrl.js
      • 第二个Ctrl.js
    • 指令
    • 服务
    • 意见
    • 过滤器
  • 另一个业务模块
  • 共享
  • 应用程序.js
  • 索引.html

Each module has its own folder structure for controllers, directives, etc...

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

Each folder has an index.js file and then other files to separates each controller, each directive, etc...

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

The index.js file contains the definition of the module. For instance for the controllers of the businessModule above:

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

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

There's no dependencies here, but there could be any.

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

Then in firstCtrl.js, I can reuse that module and add the controller to it:

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

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

        function(){
});

Then the app.js aggregates all the module that I want for my application by adding them to the dependencies array.

然后 app.js 通过将它们添加到依赖项数组来聚合我的应用程序所需的所有模块。

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

The shared folder contains directives and other things that are not specific to a business module and that can be reused anywhere.

共享文件夹包含不特定于业务模块并且可以在任何地方重用的指令和其他内容。

Again, I don't know if it's the best approach, but it definitely works for me. Maybe it can inspire other people.

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

EDIT

编辑

As the index.js files contain modules declarations, they must be referenced in the html page before any other application scripts. To do so, I've used the IBundleOrderer of ASP.NET MVC 4:

由于 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;
    }
}

回答by Ryan Q

Sam's method seems to be the way to go in most cases. The current Angular documentation has it setup as a module for each controller, service, etc, but this has been contradicted by Mi?ko himself from google.

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

In a recent Angularjs Best Practicesvideo by Mi?ko, he shows how the structure of modules could be laid out for ease of testing as well as easy scaling. Keep in mind how you structure the modules is not supposed to affect performance within an angular app.

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

From developing angular apps, I would suggest using the best practices method for the aforementioned reasons. You may wish to make your own node script to generate your controllers, etc for the time being which could include say the module you wish to create the controller in and the name, which would then auto generate your controller and proper test spec creation.

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

If you want a great read on the setup there is an excellent post hereregarding setting up the project based on where you think it will be heading.

如果您想对设置有一个很好的阅读，这里有一篇关于根据您认为将要走向的项目设置项目的优秀文章。

回答by Stéphane Busso

you should go to the yeoman https://github.com/yeoman/yeomanand yeoman generator structure: https://github.com/yeoman/generator-angular, it becomes a better solution to setup application than angular-seed. For different business modules, you should create different app and share services and directives

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

回答by Sanford Redlich

For those who are interested, I made a "modularized" version of Angular Seed that fits better with Misko's best practices: https://github.com/sanfordredlich/angular-brunch-seed-modularized

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

It's set up with Brunch so you very quickly get page reloading, test running and much more. You can be developing quickly and if you follow the patterns in the code, your application should scale reasonably well. Enjoy!

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

回答by rgaskill

The draw back I have found to the approach the yeoman generator takes is that it doesn't really lineup with the angular modules so it doesn't feel very cohesive to me. So as the project gets larger and you are working on a particular component I found myself flipping around a lot in the source tree.

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

I have recently come across a different approach here. This approach groups the files by angular modules and feels more cohesive to me. One possible drawback to this is the fact you are required to build the site you can't just run it in place. The grunt watch task in that project helps with this though.

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