AngularJS快速入門指南12：模塊 - jaxu－IT工程師數位筆記本

文章出處

　　AngularJS模塊定義了一個application。

　　模塊是一個application中不同部分的容器。

　　application中的所有控制器都應該屬于一個模塊。

帶有一個控制器的模塊

　　下面這個application（"myApp"）包含一個控制器（"myCtrl"）：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

運行

在JS文件中定義模塊和控制器

　　在AngularJS applications中，我們通常會將模塊和控制器定義到不同的JavaScript文件中。

　　在下面這個例子中，"myApp.js"包含了一個application的模塊定義，"myCtrl.js"包含了控制器的定義：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

myApp.js代碼：

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

	這里的參數[]可以被用來指定模塊的依賴項（即需要加載的其它模塊）

myCtrl.js代碼：

app.controller("myCtrl", function($scope) {
    $scope.firstName    = "John";
    $scope.lastName= "Doe";
});

Global Namespace中的函數污染

　　在JavaScript中要盡量避免使用全局函數。因為全局函數容易被其它的JavaScript代碼改寫或銷毀。

　　AngularJS模塊的定義減少了出現這種問題的風險，盡量將函數定義到AngularJS模塊中。

何時加載Library？

	在我們所有的示例代碼中，AngularJS library都是在HTML文檔的head部分被加載的。

　　建議將腳本的引用放到<body>元素的最后。但你還是會看到許多的AngularJS示例代碼將library的引用放在文檔的head部分，這僅僅只是為了在library被加載后對angular.module的訪問進行編譯。

　　另一個解決方法是將AngularJS library的引用放到<body>元素的最后，你自己的AngularJS腳本代碼之前：

<!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>