AngularJS 模塊
模塊定義了您的應(yīng)用程序。
所有的控制器都應(yīng)該屬于一個(gè)模塊。
模塊保持全局命名空間中的整潔。
AngularJS 模塊實(shí)例
在本實(shí)例中，"myApp.js" 包含了一個(gè)應(yīng)用程序模塊定義，"myCtrl.js" 包含了一個(gè)控制器：
AngularJS 實(shí)例
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="//www.w3cschool.cn/try/angularjs/1.2.5/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
控制器污染了全局命名空間
本教程中，截至目前為止的所有實(shí)例都使用了全局函數(shù)。
在所有的應(yīng)用程序中，都應(yīng)該盡量避免使用全局變量和全局函數(shù)。
全局值（變量或函數(shù)）可被其他腳本重寫或破壞。
為了解決這個(gè)問題，AngularJS 使用了模塊。
AngularJS 模塊
使用一個(gè)簡單的 控制器：
AngularJS 實(shí)例
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
function myCtrl($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}
</script>
<script src="//www.w3cschool.cn/try/angularjs/1.2.5/angular.min.js"></script>
</body>
</html>
使用一個(gè)由 模塊 替代的控制器：
AngularJS 實(shí)例
<!DOCTYPE html>
<html>
<head>
<script src="//www.w3cschool.cn/try/angularjs/1.2.5/angular.min.js"></script>
</head>
<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>
 | 請注意，本實(shí)例中，AngularJS 庫是在 <head> 區(qū)域被加載。 |
模塊定義應(yīng)放置在何處？
對于 HTML 應(yīng)用程序，通常建議把所有的腳本都放置在 <body> 元素的最底部。
這會提高網(wǎng)頁加載速度，因?yàn)?HTML 加載不受制于腳本加載。
在上面的多個(gè) AngularJS 實(shí)例中，您將看到 AngularJS 庫是在文檔的 <head> 區(qū)域被加載。
在上面的實(shí)例中，AngularJS 在 <head> 元素中被加載，因?yàn)閷?angular.module 的調(diào)用只能在庫加載完成后才能進(jìn)行。
另一個(gè)解決方案是在 <body> 元素中加載 AngularJS 庫，但是必須放置在您的 AngularJS 腳本前面：
AngularJS 實(shí)例
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="//www.w3cschool.cn/try/angularjs/1.2.5/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
AngularJS 應(yīng)用程序文件
現(xiàn)在您已經(jīng)知道模塊是什么以及它們是如何工作的，現(xiàn)在您可以嘗試創(chuàng)建您自己的應(yīng)用程序文件。
您的應(yīng)用程序至少應(yīng)該有一個(gè)模塊文件，一個(gè)控制器文件。
首先，創(chuàng)建模塊文件 "myApp.js"：
var app = angular.module("myApp", []);
然后，創(chuàng)建控制器文件。本實(shí)例中是 "myCtrl.js"：
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
最后，編輯您的 HTML 頁面：
AngularJS 實(shí)例
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="//www.w3cschool.cn/try/angularjs/1.2.5/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
