控制器
-
什么是控制器
控制器实际上就是JS函数,它们不需要扩展任何AngularJS特定的类,也不需要调用任何特定的AngularJS API,就可以正常工作。 -
控制器的作用
控制器主要用来初始化作用域实例,在实际运用中,初始化又分为:
- 提供模型的初始值;
- 增加UI相关的行为)(函数)以扩展$scope对象
注意:在设定模型初始值时,控制器和ng-init指令都可以,但是控制器可以让我们在JS代码中表达初始化逻辑,而不是污染HTML模板。
- 一个具体的实例
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myContr">
我最好的闺蜜姓:<input type="text" ng-model="firstName"></br></br>
她名为????:<input type="text" ng-model="lastName"></br></br>
<p>所以她的全名是:{{firstName}}{{lastName}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myContr', function ($scope) {
$scope.firstName = "李";
$scope.lastName = "林";
});
</script>
</body>
</html>
- ng-controller=“myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器
- AngularJS 使用$scope 对象来调用控制器
- 控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
- 控制器在作用域中创建了两个属性 (firstName 和 lastName)
- ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)
- 控制器方法
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法(变量和函数):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
姓:<input type="text" ng-model="firstName"></br></br>
名:<input type="text" ng-model="lastName"></br></br>
姓名:{{name()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myContr', function ($scope) {
$scope.firstName = "张";
$scope.lastName = "敏";
$scope.name = function () {
return $scope.firstName + $scope.lastName;
}
});
</script>
</body>
</html>
注意调用函数的时候一定要加括号({{name()}})。
- 外部文件中的控制器
在大型的应用程序中,通常是把控制器存储在外部文件中。只需要把脚本标签中的代码复制到指定的外部文件中即可
.html文件代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
姓:<input type="text" ng-model="firstName"></br></br>
名:<input type="text" ng-model="lastName"></br></br>
姓名:{{name()}}
</div>
<script src = "myController.js"></script>
</body>
</html>
指定外部文件(我例子里是myController.js)的代码:
var app = angular.module('myApp', []);
app.controller('myContr', function ($scope) {
$scope.firstName = "张";
$scope.lastName = "敏";
$scope.name = function () {
return $scope.firstName + $scope.lastName;
}
});
- 其他实例
先创建一个新的控制器文件(kexinController.js)
angular.module('myApp', []).controller('myContr', function ($scope) {
$scope.names = [{
name: '可馨馨',
person: '姑姑'
},
{
name: '花花',
person: '爸爸'
},
{
name: '笨虎',
person: '爷爷'
}
];
});
然后在应用中使用控制器文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
可馨的外号是<li ng-repeat="x in names">
{{x.name}}这是{{x.person}}给起的
</li>
</div>
<script src="kexinController.js"></script>
</body>
</html>
注意记得在.js文件书写时,不要忘记“ ” , s c o p e 是 一 个 类 , 而 ”,scope是一个类,而 ”,scope是一个类,而$scope是对象,一个scope类里可以有很多对象,函数里具体用的也是对象。