AngularJS 模塊
模塊包含了主要的應(yīng)用代碼。
一個應(yīng)用可以包含多個模塊，每一個模塊都包含了定義具體功能的代碼。
可以將module理解成一個容器，可以往其中放入controllers、services、filters、directives等應(yīng)用的組成部分。

創(chuàng)建模塊

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []); 

</script>

AngularJS允許我們使用angular.module()方法來聲明模塊。
這個方法能夠接受兩個參數(shù)，第一個是模塊的名稱，第二個是依賴列表，也就是可以被注入到模塊中的對象列表。

angular.module('myApp', []);

這個方法相當(dāng)于AngularJS模塊的setter方法，是用來定義模塊的。

參數(shù)
"myApp" 參數(shù)對應(yīng)執(zhí)行應(yīng)用的 HTML 元素。

在模塊定義中 [] 參數(shù)用于定義模塊的依賴關(guān)系。
中括號[]表示該模塊沒有依賴，如果有依賴的話會在中括號寫上依賴的模塊名字。

調(diào)用這個方法時如果只傳遞一個參數(shù)，就可以用它來引用模塊。例如，可以通過以下代碼來引用myApp模塊：

angular.module('myApp')

這個方法相當(dāng)于AngularJS模塊的getter方法，用來獲取對模塊的引用。
接下來，就可以在angular.module('myApp')返回的對象上創(chuàng)建我們的應(yīng)用了。

module導(dǎo)入

上面的例子中，可以發(fā)現(xiàn).module方法第二個參數(shù)是一個空數(shù)組，這個空數(shù)組是為了指定在此module中需要用到哪些其他的modules。

現(xiàn)在，我們定義另一個module，然后將其導(dǎo)入到我們定義好的名為myApp的module中：

angular.module('myApp.services', [])

.factory('testFactory', function(){
    return {
        Hello: function(){
            return "Hello World!";
        }

    }
});

可以看到，我們將此module命名為myApp.services并且為其定義了一個factory。注意到首行最后沒有分號。

現(xiàn)在，將我們新定義的module導(dǎo)入到第一個module里：

angular.module('myApp', ['myApp.services']);

我們需要做的只是，將module使用引號包裹放入到.module方法第二個參數(shù)的空數(shù)組里面，多個modules使用逗號隔開。
現(xiàn)在我們就可以使用第二個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 : "我在指令構(gòu)造器中創(chuàng)建!"
    };
});

不同module間的依賴注入

第一個module里定義一個factory

angular.module('myApp1', [])
    .factory('Chats', function() {  
        return{
            all: function() {
                return '123';
            }   
        }
});

第二個module里定義一個controller，在這個controller里注入module1的factory
注：這時在頁面里調(diào)用是不行的，要么在[ ]里寫入對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']);

然后在頁面里調(diào)用module3的app和module2的controller，這樣就行了

<div ng-app="myApp3" ng-controller="c2">  
    <h1>Hello {{pp}}</h1>
</div>

輸出結(jié)果： Hello 123