AngularJS 控制器
AngularJS控制器控制 AngularJS應用程序的數據。
AngularJS控制器是常規的JavaScript對象 。
AngularJS 控制器
AngularJS 應用程序被控制器控制。
ng-controller指令定義了應用程序控制器。
控制器是JavaScript對象 ，由標準的JavaScript 對象的構造函數創建。
AngularJS 實例
< 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 >
名: < 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 >
嘗試一下»
應用解析：
AngularJS應用程序由ng-app定義。 應用程序在<div> 內運行。
ng-controller="myCtrl" ?屬性是一個AngularJS指令。 用於定義一個控制器。
myCtrl函數是一個JavaScript函數。
AngularJS使用$scope對象來調用控制器。
在AngularJS 中， $scope 是一個應用象(屬於應用變量和函數)。
控制器的$scope （相當於作用域、控制範圍）用來保存AngularJS Model(模型)的對象。
控制器在作用域中創建了兩個屬性( firstName和lastName )。
ng-model指令綁定輸入域到控制器的屬性（firstName和lastName）。
控制器方法
上面的實例演示了一個帶有lastName 和firstName 這兩個屬性的控制器對象。
控制器也可以有方法（變量和函數）：
AngularJS 實例
< 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 >
名: < 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 >
嘗試一下»
外部文件中的控制器
在大型的應用程序中，通常是把控制器存儲在外部文件中。
只需要把<script>標籤中的代碼複製到名為personController.js的外部文件中即可：
AngularJS 實例
< div ng-app= "myApp" ng-controller= "personCtrl" >
First Name: < input type= "text" ng-model= "firstName" > < br >
Last Name: < input type= "text" ng-model= "lastName" > < br >
< br >
Full Name: {{firstName + " " + lastName}}
< /div >
< script src= "personController.js" > < /script >
First Name: < input type= "text" ng-model= "firstName" > < br >
Last Name: < input type= "text" ng-model= "lastName" > < br >
< br >
Full Name: {{firstName + " " + lastName}}
< /div >
< script src= "personController.js" > < /script >
嘗試一下»
其他實例
以下實例創建一個新的控制器文件:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
保存文件為namesController.js :
然後，在應用中使用控制器文件:
AngularJS 實例
< div ng-app= "myApp" ng-controller= "namesCtrl" >
< ul >
< li ng-repeat= "x in names" >
{{ x.name + ', ' + x.country }}
< /li >
< /ul >
< /div >
< script src= "namesController.js" > < /script >
< ul >
< li ng-repeat= "x in names" >
{{ x.name + ', ' + x.country }}
< /li >
< /ul >
< /div >
< script src= "namesController.js" > < /script >
嘗試一下»