AngularJS模块化编程最佳实践（Modular Programming Best Practices）

这篇文章我是在《angularjs新手到忍者》（《AngularJS_ Novice to Ninja》）这本书看到的，是讲angularjs如何模块化的，讲的很不错，但是翻译水平有限，望大家批评指正。同时我也把这篇文章放进了github，下面是连接。

https://github.com/vista5004/angular-course/blob/master/%E6%A8%A1%E5%9D%97%E5%8C%96%E7%BC%96%E7%A8%8B%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5Modular%20Programming%20Best%20Practices.md

当你把你的项目源码分为不同的模块的时候，一般由两个选择：

（1）通过层来实现模块化（2）通过特征来实现模块化

首先我们进入angular seed项目，下面是这个项目在github上的地址，这是一个不错的angular项目，大家可以学习一下。

（https://github.com/angular/angularseed/tree/69c9416c8407fd5806aab3c63916dfcf0522ecbc）

文件的app/js文件中，看看采用的哪种模式，当你打开文件夹，你会看到如下几个文件：

1、app.js 
2、controller.js
3、directive.js
4、filter.js
5、server.js

这就是通过层的概念来实现的模块化，每一种组件的类型，被装进了一种特殊的模块。最终这个主要的依赖于其他四个模块的入口app模块在app.js模块中定义。这是通过angular.module()的第二个参数来指定的。你只需要参考在html中ng-app指令。这种类型模块化在很多场景都很有用。例如当你遇到一个特殊类型的bug，找到服务，你就指定在哪里发现。但是当你的app应用规模和复杂性增长到一定程度，或许就适用于通过层来划分模块的方式。可以通过特征的方式来实现。例如你的站点需要一个登陆模块。所有这些模块都独立存在，并且紧密的耦合在一起。通常你为每个模块创建一个独立的文件用来放置相关的JavaScript文件在每个相关的文件夹中。这些文件夹中的代码是可重用的，因为你能把某一个模块的一整个文件夹放入另外一个不同的项目中。并且不同的团队之间可以同时开发不同的模块，这些模块并没有紧密的耦合在一起。此外，单元测试也就变得小菜一碟了，只要你加载需要的模块，并且分开测试也变得容易。我们调整一下Angular Seed Project来使用这种方式，例如博客系统，可以使用这种模式：
结构如下：

/app
/img -- application level images
/css -- application level css
/js
    app.js -- the main app module
/modules
/login
/js
    controllers.js --controllers for login module
    directives.js --directives for login module
/views -- views for login module
/css
/img
    loginModule.js -- Main login module definition
/comment
/js
    controllers.js --controllers for login module
    directives.js --directives for login module
/views -- views for comment module
/css
/img
    commentModule.js -- Main comment module definition
    ...
    ...
index.html

在这些的文件中我们定义自己的模块。比如登陆模块，如下

app/modules/login/js/controller
angular.module('mainApp.login.controller',[]);

app/modules/login/js/directive.js
angular.module('mainApp.login.directives',[])

app/modules/login/loginModule.js
angular.module('loginModule',['mainApp.login.controller','mainApp.login.directives'])

对于评论模块，定义如下

/app/modules/comment/js/controllers.js
angular.module('mainApp.comment.controllers',[]);

/app/modules/comment/js/directives.js
angular.module('mainApp.comment.directives',[]);

/app/modules/comment/loginModule.js
angular.module('commentModule',['mainApp.comment.controllers',mainApp.comment.directives']);

在主要的模块中定义/app/app.js如下

angular.module('mainApp',['loginModule','commentModule'])

最终在index.html我们启动文件通过写入

ng-app='mainApp'

正如你看到的，这个登陆模块loginModule和评论模块commentModule互相是不通信的。但是通过mainApp模块组合在一起。在HTML文件中，当angular遇到ng-app，它就通过加载指定的模块启动。在这种情况下，angular启动app程序通过加载mainApp模块。但是angular发现这个mainApp模块依赖于另外两个模块loginModule和commentModule。但是这两个模块本身也依赖于其他两个模块（控制器模块和指令模块），也需要angular来加载。这样angular启动程序通过加载需要的模块。