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