AngularJS 1.x系列：AngularJS控制器（3）
1. 控制器（Controller）定义
控制器（Controller）在AngularJS中作用是增强视图（View），AngularJS控制器是一个构造方法，用来向视图（View）中添加额外功能。
ng-controller指令定义AngularJS应用程序控制器。
控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。
当控制器通过ng-controller指令被添加到DOM页面时，AngularJS会通过控制器构造函数生成一个对象。
在生成构造函数对象过程中，$scope对象作为参数注入其中，并允许访问$scope对象。
通过$scope对象与页面中的元素进行数据绑定，实现数据从控制器（Controller）到视图（View）的过程。
2. 控制器初始化$scope对象
控制器（Controller）的作用是操作$scope对象，具体表现在：
◊ 初始化$scope对象
◊ 为$scope对象添加自定义实现
$scope对象可以看作是由控制器（Controller）封装后的ViewModel。
2.1 初始化$scope对象
示例代码：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", function($scope){
$scope.text = "Hello World!";
});
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
<div ng-bind="text"></div>
</div>
</body>
</html>
2.2 为$scope对象添加自定义方法
示例代码：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", function($scope){
$scope.text = "Hello World!";
$scope.getText = function(){
$scope.text = "Hello AngularJS!";
return $scope.text;
};
});
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
<div ng-bind="text"></div>
<input type="button" value="ChangeText" ng-click="getText()" />
</div>
</body>
</html>
2.3 为$scope对象添加带参数方法
示例代码：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", function($scope){
$scope.text = "Hello World!";
$scope.getText = function(){
$scope.text = "Hello AngularJS!";
return $scope.text;
};
$scope.setText = function(param){
$scope.text = param;
};
}]);
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
<div ng-bind="text"></div>
<input type="button" value="ChangeText" ng-click="setText('Hello AngularJS!')" />
</div>
</body>
</html>
$scope对象方法多个参数之间逗号（，）隔开
2.4 $scope对象属性和方法的继承
AngularJS中的“ng-controller”指令允许在不同层次元素中指定控制器，处于内层控制器中的$scope对象将会自动继承外层控制器中的$scope对象的属性和方法。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ParentCtrl", ["$scope", function($scope){
$scope.text = "Text";
}]);
app.controller("ChildCtrl", ["$scope", function($scope){
$scope.child_text = "Child Text";
}]);
</script>
</head>
<body>
<div ng-controller="ParentCtrl">
<div ng-bind="text"></div>
<div ng-controller="ChildCtrl">
<div ng-bind="child_text"></div>
</div>
</div>
</body>
</html>
3. 作用域（Scope）
作用域（scope）是构成AngularJS应用的核心基础，AngularJS将$scope设计成和DOM类似的结构，$scope可以进行嵌套，可以引用父级$scope中的属性和方法。
3.1 $rootScope
AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。
$rootScope是AngularJS中最接近全局作用域的对象，不建议在$rootScope上绑定太多业务逻。
所有的应用都有一个$rootScope，可以作用在ng-app指令包含的所有HTML元素中。
$rootScope可作用于整个应用中。在$rootscope中定义的属性及方法，可以在各个controller的$scope中使用。
示例代码：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.run(["$rootScope", function($rootScope){
$rootScope.text = "Hello AngularJS!";
}]);
</script>
</head>
<body>
{{ text }}
</body>
</html>
3.2 $scope
AngularJS中$scope对象作为数据模型，自定义属性和方法，可以在控制器（Controller）和视图（View）中使用。
$scope对象的生命周期处理有四个不同阶段:
1>.创建
在创建控制器（Controller）或指令时，AngularJS会用$injector创建一个新的作用域（$scope），并在这个新建的控制器（Controller）或指令运行时注入作用域（$scope）。
2>.链接
当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。
所有创建$scope对象的函数也会将自身附加到视图中。
这些作用域将会注册当Angular应用上下文中发生变化时需要运行的$watch函数。
3>.更新
当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。
4>.销毁
当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。
示例代码：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", function($scope){
$scope.text = "Hello AngularJS!";
}]);
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
{{ text }}
</div>
</body>
</html>
ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。
$scope与$rootScope具有相同属性或方法时，$scope将覆盖$rootScope中相同属性或方法。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", "$rootScope", function($scope, $rootScope) {
$rootScope.text = "Hello";
// $scope.text = "Hello AngularJS!";
}]);
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
{{ text }}
</div>
</body>
</html>
AngularJS 1.x系列：AngularJS控制器（3）的更多相关文章
- [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- Angular系列----AngularJS入门教程05：双向绑定（转载）
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- Angular系列------AngularJS快速开始（转载）
Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. ...
- AngularJS高级程序设计读书笔记 -- 控制器篇
作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...
- AngularJS 1.x系列：AngularJS简介及第一个应用（2）
1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...
- AngularJS 1.x系列：AngularJS服务-Service
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- Angular系列----AngularJS入门教程00：引导程序（转载）
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
随机推荐
- Java开发笔记（五十五）关键字static的用法
前面介绍嵌套类的时候讲到了关键字static,用static修饰类,该类就变成了嵌套类.从嵌套类的用法可知,其它地方访问嵌套类之时,无需动态创建外层类的实例,直接创建嵌套类的实例就行.其实static ...
- redis分布式锁工具类
目录 (1)需要导入的包 (2)JedisUtil类 (3)jedisPool配置 (4)使用举例 (1)需要导入的包 <dependency> <groupId>redis. ...
- TiDB
由于目前的项目把mysql换成了TiDb,所以特意来了解下tidb.其实也不能说换,由于tidb和mysql几乎完全兼容,所以我们的程序没有任何改动就完成了数据库从mysql到TiDb的转换,TiDB ...
- 高效遍历匹配Json数据，避免嵌套循环[转]
工作中经常会遇到这样的需求:1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状态2.勾选人员后,前往别的页面,再次返回,人员依旧程勾选状态3.等等.... 数据结构如下 ...
- splay详解（一）
前言 Spaly是基于二叉查找树实现的, 什么是二叉查找树呢?就是一棵树呗:joy: ,但是这棵树满足性质—一个节点的左孩子一定比它小,右孩子一定比它大 比如说 这就是一棵最基本二叉查找树 对于每次插 ...
- Dynamics CRM日期字段查询使用时分秒的方法
本人微信公众号:微软动态CRM专家罗勇 ,回复293或者20190110可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 我们 ...
- 解决Centos7 yum 出现could not retrieve mirrorlist 错误
刚通过VMware12安装了centos7.x后,使用ip addr查看centos局域网的ip发现没有,使用yum安装一些工具包时也出现报错: Loaded plugins: fastestmirr ...
- SuperMap GIS资料-----云与Web端技术资料集锦
转自:http://blog.csdn.net/supermapsupport/article/details/70254484 产品白皮书 iServer产品 教学视频 许可说明 安装部署 ...
- OpenTK学习笔记
OpenGL定义 OpenGL被定义为"图形硬件的一种软件接口".实质上是3D图形和模型库,具有高度可移植性,具有非常快的速度. OpenGL架构 术语pipeline常用于阐述彼 ...
- 使用Python的列表推导式计算笛卡儿积
笛卡儿积: 笛卡儿积是一个列表, 列表里的元素是由输入的可迭代类型的元素对构 成的元组,因此笛卡儿积列表的长度等于输入变量的长度的乘积, 如下图: 如果你需要一个列表,列表里是 3 种不同尺寸的 T ...