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 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
原生js实现验证码功能
Mar 16 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
简述 Python 的类和对象
2020/08/21 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
大学生的自我鉴定范文
2014/01/21 职场文书
社区科普工作方案
2014/06/03 职场文书
毕业生找工作求职信
2014/08/05 职场文书
初中家长评语大全
2014/12/26 职场文书
实习计划书范文
2015/01/16 职场文书
寒假安全保证书
2015/02/28 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
国家助学金受助感言
2015/08/01 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang