[AngularJS] Controller: AngularJS 控制器
AngularJS Controller
AngularJS的Controller是一個JavaScript物件，控制AngularJS的資料。
ng-controller指令定義AngularJS屬於哪一個Controller。
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input type="text" ng-model="Name"><br>
年紀: <input type="text" ng-model="Age"><br>
<br>
{{Name + "," + Age+"歲"}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.Name = "Berry";
$scope.Age = 18;
});
</script>
ng-app="myApp" : 定義 AngularJS應用程式作用於<div></div>裡。
ng-controller="myCtrl" : 定義所屬Controller，myCtrl是一個JavaScript的function。
$scope : 為一個物件，而這個物件可以是變數也可以是一個function，AngularJS會透過$scope物件來呼叫Controller 。
Controller在$scope中建立兩個屬性（Name和Age），<input>標籤中的ng-model 指令能夠綁定欄位的值到Controller的屬性中。
Controller 方法
上面的範例中，Controller有兩個屬性:Name和Age。
而Controller也可以有方法(Method):
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input type="text" ng-model="Name"><br>
年紀: <input type="text" ng-model="Age"><br>
<br>
{{Detial()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.Name = "Berry";
$scope.Age = 18;
$scope.Detial = function () {
return $scope.Name + "," + $scope.Age + "歲";
}
});
</script>
$scope.Detial = function () 表示Detial為一個function，並回傳Name+Age。{{ Detial() }} 表達function。
外部文件中的Controller
通常在較龐大的程式中，Controller會被分開寫在另一個JavaScript檔，再呼叫使用。
新增一個JavaScript檔，命名為StudentController，如下:
angular.module('myAPP', []).controller
(
'StudentController', function ($scope)
{
$scope.Name =
[
{ name: 'Berry', country: 'Taiwan' },
{ name: 'John', country: 'USA' },
{ name: 'Hanna', country: 'Japan' }
];
}
);
引用JavaScript於程式中:
<div ng-app="myAPP" ng-controller="StudentController">
<ul>
<li ng-repeat="x in Name">
{{'學生:'+x.name+' , 國家:'+ x.country}}
</li>
</ul>
</div>
<script src="~/Scripts/StudentController.js"></script>
