{% raw %}
# AngularJS 控制器
?AngularJS 控制器 **控制** AngularJS 應用程序的數據。
?AngularJS 控制器是常規的 **JavaScript 對象**。
## AngularJS 控制器
AngularJS 應用程序被控制器控制。
**ng-controller** 指令定義了應用程序控制器。
控制器是 **JavaScript 對象**，由標準的 JavaScript **對象的構造函數** 創建。
控制器的 **$scope** 是控制器所指向的應用程序/HTML 元素。
## AngularJS 實例
```
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
??? $scope.person = {
??????? firstName: "John",
??????? lastName: "Doe"
??? };
}
</script>
```
實例講解：
AngularJS 應用程序由 **ng-app** 定義。應用程序在 <div> 內運行。
**ng-controller** 指令把控制器命名為 **object**。
函數 **personController** 是一個標準的 JavaScript **對象的構造函數**。
控制器對象有一個屬性：**$scope.person**。
person 對象有兩個屬性：**firstName** 和 **lastName**。
**ng-model** 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。
## 控制器屬性
上面的實例演示了一個帶有 lastName 和 firstName 這兩個屬性的控制器對象。
控制器也可以把函數作為對象屬性：
## AngularJS 實例
```
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.fullName()}}
</div>
<script>
function personController($scope) {
??? $scope.person = {
??????? firstName: "John",
??????? lastName: "Doe",
??????? fullName: function() {
??? ??????? var x;
??????????? x = $scope.person;
??????? ??? return x.firstName + " " + x.lastName;
??????? }
??? };
}
</script>
```
## 控制器方法
控制器也可以帶有方法：
## AngularJS 實例
```
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{fullName()}}
</div>
<script>
function personController($scope) {
? ? $scope.person = {
????? ? firstName: "John",
??????? lastName: "Doe",
???? };
???? $scope.fullName = function() {
???????? var x;
???????? x = $scope.person;
???????? return x.firstName + " " + x.lastName;
???? };
}
</script>
```
## 外部文件中的控制器
在大型的應用程序中，通常是把控制器存儲在外部文件中。
只需要把 <script> 標簽中的代碼復制到名為 personController.js 的外部文件中即可：
## AngularJS 實例
```
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script src="personController.js"></script>
```
## 另一個實例
下面的實例我們將創建一個新的控制器文件：
```
function namesController($scope) {
??? $scope.names = [
??????? {name:'Jani',country:'Norway'},
??????? {name:'Hege',country:'Sweden'},
??????? {name:'Kai',country:'Denmark'}
??? ];
}
```
然后在應用程序中使用這個控制器文件：
## AngularJS 實例
```
<div ng-app="" ng-controller="namesController">
<ul>
? <li ng-repeat="x in names">
??? {{ x.name + ', ' + x.country }}
? </li>
</ul>
</div>
<script src="namesController.js"></script>
```
{% endraw %}
