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