AngularJS入门教程之控制器详解


Posted in Javascript onJuly 27, 2016

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 控制器资料的整理,后续继续补充。

Javascript 相关文章推荐
用js的for循环获取radio选中的值
Oct 21 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 #Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 #Javascript
AngularJS入门之动画
Jul 27 #Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 #Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 #Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 #Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 #Javascript
You might like
PHPThumb图片处理实例
2014/05/03 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
JS动画效果代码3
2008/04/03 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python编写屏幕截图程序方法
2015/02/18 Python
Golang与python线程详解及简单实例
2017/04/27 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
python flask中静态文件的管理方法
2018/03/20 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python3字符串操作总结
2019/07/24 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
女大学生自我鉴定
2013/12/09 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
售房协议书
2014/08/19 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
婚宴来宾致辞
2015/07/28 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python