今天记录一下angularJS的核心入口ng-module。

1

var myApp=angular.module('app',[]); //创建ng-app的模型

　　这一句是我们写AngularJS代码的入口，也是基础知识。整个文件或者项目的运行就是基于这个方法得以继续的。在AngularJS的源代码中module方法是作为一个方法函数赋值给了angular这个全局对象的，所以有angular这个顶层对象直接调用。

作为整个AngularJS程序的入口，module只能有一个，准确的来说应该是在html代码中只能有一个ng-app指令(这并不是绝对的，在开发中我们也可以借用bootstrap这个工具方法去加载其他的ng-app指令，但是这样做可能会造成混乱，暂时不讨论这个问题，默认一个程序只有一个ng-app指令)。

　　module方法需要两个参数，一个是ng-app的参数名称，第二个参数是程序AngularJS程序需要的一些依赖项(如果没有依赖就写空数组)。

　　在大多数编码中，我们需要将程序的不同功能拆分开来，形成细分，让结构更明确，代码易于维护。这是我们会考虑如何去创建这些功能，假如我们需要使用controller和service的话，我们必须在angulr.module的基础上去调用他们的方法，我们如何在另一个拆分的功能中拿到这个唯一的angular.module呢？

如果代码像是这样：

1
2
3
4
5
6
7

var myApp1=angular.module('app',[]);
myApp1.controller(...);
myApp1.factory(...);

var myApp2=angular.module('app',[]);
myApp2.controller(...);
myApp2.factory(...);

　　这显然是错误的方法，排除掉使用bootstrap强制注册的方式，我们已经注册过一个app的模型，继续注册肯定是行不通的。

正确的代码是：

1
2
3
4
5
6
7

var myApp1=angular.module('app',[]);
myApp1.controller(...);
myApp1.factory(...);

var myApp2=angular.module('app');
myApp2.controller(...);
myApp2.factory(...);

　　这段代码跟之前的区别就是module方法没有了第二个参数，把传递依赖的数组去掉了。这样就代表了调用，我们调用了之前app的模型，而不是创建一个新的模型。

　　所以当需要拆分一个AngularJS代码时，给module方法传入ng-app的名称这一个参数，实现调用已经注册的模型。

　　在弱类型的javascript中，我们还可以使用另一种方式实现调用ng-app的模型，就是使用自运行函数去调用，但是其原理还是一致的，就是通过给module传递ng-app的名称这样一个参数去进行模型的调用。