AngularJS教程四—— 控制器

AngularJS 控制器

• AngularJS 控制器控制 AngularJS 應用程式的資料，應用程式被控制器控制。
• AngularJS 控制器是常規的 JavaScript 物件。
• ng-controller 指令定義了應用程式控制器。

控制器是 JavaScript 物件，由標準的 JavaScript 物件的建構函式 建立。

<div ng-app="myApp" ng-controller="myCtrl">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>

應用解析：

ng-controller="myCtrl" 是一個 AngularJS 指令。用於定義一個控制器。
myCtrl 函式是一個 JavaScript 函式。
在 AngularJS 中， $scope 是一個物件，類似Java的class，包含有變數和函式，同時也有作用域（類似public、private）。
控制器在作用域中建立了兩個屬性 (firstName 和 lastName)。
ng-model 指令繫結輸入域到控制器的屬性（firstName 和 lastName）。

控制器方法
控制器也可以有方法（變數和函式）：

<div ng-app="myApp" ng-controller="personCtrl">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{fullName()}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        $scope.fullName = function() {
            return $scope.firstName + " " + $scope.lastName;
        }
    });
</script>

轉載自http://www.runoob.com/angularjs/angularjs-modules.html