手册
目录
AngularJS 应用程序由控制器控制。
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 = "Bill";
$scope.lastName = "Gates";
});
</script>
运行实例 »点击 "运行实例" 按钮查看在线实例
AngularJS 应用程序由 ng-app="myApp" 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。它定义了一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 将使用 $scope 对象调用控制器。
在 AngularJS 中，$scope 是应用程序对象（应用程序变量和函数的所有者）。
控制器在范围（firstName 和 lastName）中创建两个属性（变量）。
ng-model 指令将输入字段绑定到控制器属性（firstName 和 lastName）。
上面的示例演示了一个具有两个属性：lastName 和 firstName 的控制器对象。
控制器还可以具有方法（作为函数的变量）：
<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 = "Bill";
$scope.lastName = "Gates";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
运行实例 »点击 "运行实例" 按钮查看在线实例
在较大的应用程序中，将控制器存储在外部文件中是很常见的。
只需将 <script> 标签之间的代码复制到一个名为 personController.js 的外部文件中：
<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 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'}
];
});
将文件保存为 namesController.js：
然后在应用程序中使用控制器文件：
<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>
运行实例 »点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习
