[AngularJS] Controller: 控制器

[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>

ng-app="myAPP" : 指定Module。

ng-controller="StudentController" : 指定Controlle。

ng-repeat="x in Name" : 從$scope.Name=[ ]的陣列中取中每一個Item。

{{ '學生:'+x.name+' , 國家:'+ x.country }} : 取用每一個屬性的值。

 

 END 

回目錄