angular.module 详解
AngularJS 模块
模块包含了主要的应用代码。
一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。
可以将module理解成一个容器，可以往其中放入controllers、services、filters、directives等应用的组成部分。
创建模块
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
AngularJS允许我们使用angular.module()方法来声明模块。
这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。
angular.module('myApp', []);
这个方法相当于AngularJS模块的setter方法，是用来定义模块的。
参数
"myApp" 参数对应执行应用的 HTML 元素。
在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
调用这个方法时如果只传递一个参数，就可以用它来引用模块。例如，可以通过以下代码来引用myApp模块：
angular.module('myApp')
这个方法相当于AngularJS模块的getter方法，用来获取对模块的引用。
接下来，就可以在angular.module('myApp')返回的对象上创建我们的应用了。
module导入
上面的例子中，可以发现.module方法第二个参数是一个空数组，这个空数组是为了指定在此module中需要用到哪些其他的modules。
现在，我们定义另一个module，然后将其导入到我们定义好的名为myApp的module中：
angular.module('myApp.services', [])
.factory('testFactory', function(){
return {
Hello: function(){
return "Hello World!";
}
}
});
可以看到，我们将此module命名为myApp.services并且为其定义了一个factory。注意到首行最后没有分号。
现在，将我们新定义的module导入到第一个module里：
angular.module('myApp', ['myApp.services']);
我们需要做的只是，将module使用引号包裹放入到.module方法第二个参数的空数组里面，多个modules使用逗号隔开。
现在我们就可以使用第二个module里的方法了：
angular.module('myApp', ['myApp.services'])
.run(function(testFactory){
var hello = testFactory.Hello();
console.log(hello);
});
控制台输出：Hello World!
添加控制器
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
添加指令
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
不同module间的依赖注入
第一个module里定义一个factory
angular.module('myApp1', [])
.factory('Chats', function() {
return{
all: function() {
return '123';
}
}
});
第二个module里定义一个controller，在这个controller里注入module1的factory
注：这时在页面里调用是不行的，要么在[ ]里写入对module1的依赖['myApp1']，要么再写一个module3同时依赖于module1和module2
angular.module('myApp2', [])
.controller('c2', function($scope, Chats) {
$scope.pp=Chats.all();
});
写第三个module，同时依赖于module1和module2
angular.module('myApp3', ['myApp1','myApp2']);
然后在页面里调用module3的app和module2的controller，这样就行了
<div ng-app="myApp3" ng-controller="c2">
<h1>Hello {{pp}}</h1>
</div>
输出结果： Hello 123
原文：https://www.jianshu.com/p/d06cf28677ca
