AngularJS入门教程之控制器详解
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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>
</body>
</html>
运行结果：
名:
姓:
姓名: John Doe
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 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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>
</body>
</html>
运行效果：
名:
姓:
姓名: John Doe
外部文件中的控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
</body>
</html>
运行结果：
名:
姓:
姓名: John Doe
其他实例
以下实例创建一个新的控制器文件:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
保存文件为 namesController.js:
然后，在应用中使用控制器文件:
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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>
</body>
</html>
运行效果：
- Jani, Norway
- Hege, Sweden
- Kai, Denmark
以上就是对AngularJS 控制器资料的整理,后续继续补充。
相关文章
设计一个组件时，组件应该是内聚的，应该不依赖外部已经存在的组件，要实现这种松耦合的组件要使用中间人模式。2021-05-05
Angular组件库ng-zorro-antd实现radio单选框选择
这篇文章主要为大家介绍了Angular组件库ng-zorro-antd实现radio单选框取消选择实现问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了掌握Queries设计模式优化Angular应用开发的技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。他们之间有什么不同呢？今天小编给大家分享AngularJS constant和value区别详解，需要的朋友参考下2017-02-02
这篇文章主要介绍了AngularJS实现的根据数量与单价计算总价功能,涉及AngularJS事件响应与数值运算相关操作技巧,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了AngularJs Javascript MVC 框架的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
本篇文章主要介绍了浅谈Angular文字折叠展开组件的原理分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
angular 当需要form表单需要验证时，angular自带了许多校验器，但是很多时候自带的无法满足业务需求，这时候就需要自定义的校验器，下面通过本文给大家分享Angular2 自定义validators的实现方法，需要的朋友参考下吧2017-07-07
最近在使用angular来做项目，功能要求实现一是点击按钮获取验证码，二是点击登录验证表单。之前用jquery来做项目很好做，使用angular怎么实现呢？其实实现代码也很简单的，下面通过实例代码给大家介绍下，需要的朋友参考下吧2017-05-05
这篇文章主要给大家介绍了关于angular组件间通讯的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angular组件具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-05-05
最新评论