AngularJS1.X学习笔记6-控制器和作用域
经过一番艰苦卓绝的鏖战，我终于来到了控制器和作用域部分。控制器作为MVC的C，其重要性不可谓不重要；作用域决定了你可以拿到哪些东西，亦是分外重要。现在就来学习一下两个东西。去看看$apply,$watch,$broadcast是个什么鬼。
一、谈谈MVC
阮一峰老师说Angular是一个叫MVVM的模式（http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html），而自由男人说这是一个MVC框架，个人认为都差不多，目标都是分层，便于协作和维护，这个跟我们的计算机网络的分层思想差不多（可以参看http://www.cnblogs.com/floor/p/6649424.html）。下面还是按照MVC的观点看看Angular。
ThinkPHP是一个服务端MVC框架，他的视图就是我们前端的一切东西，控制器是从模型拿数据放到视图，或者从视图拿数据，交给模型，控制器是不直接与数据库打交道的，与数据库相关的操作就是模型的作用，我们在控制器调用M()方法就拿到了一个表对应的模型。
前端MVC则有不同，对Angular 而言，controller（）方法构建的就是控制器，$scope上的东西就可以理解为模型，他们一般是调用后端接口拿到的，视图就是你看到的东西。
二、单一控制器
这是最简单的控制器应用形式，特点是控制器与视图一一对应，无需考虑作用域之间的通信问题。缺点是随着项目复杂度的增加可能变得难以维护。
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>single controller</title>
</head>
<body>
<div ng-controller='dayCtrl'>
<div>
<h3>singleController</h3>
</div>
<h4>Today is {{day || "(不晓得)"}}</h4>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('dayCtrl',function($scope){
var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
$scope.day = dayNames[new Date().getDay()]; })
</script>
</body>
</html>
三、一个控制器管几个作用域
自由男人给出了这样一个图
由此可见，将一个控制器用于多个没有重合不部分的HTML相当于建立了多个控制器实例，他们对应多个作用域，控制器实例之间互不相干，作用域之间也互不相干。可以做个测试看看
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>use an controller more than once</title>
</head>
<body>
<div ng-controller='testCtrl'>
我是一个域：<input type="text" name="" ng-model="data">
</div>
<div ng-controller='testCtrl'>
我是另一个域：<input type="text" name="" ng-model="data">
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('testCtrl',function($scope){
$scope.data="数据" })
</script>
</body>
</html>
结果是在任何一个文本框输入都不会影响到另一个文本框，因为他们是相互隔离的。
四、作用域通信
上面讲到将一个控制器用于几个视图会产生几个隔离的作用域，但是有时候需要一部分数据能够共享，此时就应该使用$rootScope了。
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>use an controller more than once</title>
</head>
<body>
<div ng-controller='testCtrl'>
我是一个域：name:<input type="text" name="" ng-model="name"><br>
sex:<input type="text" name="" ng-model="sex">
</div>
<div ng-controller='testCtrl'>
我是一个域：name:<input type="text" name="" ng-model="name"><br>
sex:<input type="text" name="" ng-model="sex">
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('testCtrl',function($scope,$rootScope){
$scope.sex="男";
$scope.name = "大～熊";
$scope.$watch('sex',function(){
$rootScope.$broadcast("sexChange",$scope.sex);
});
$scope.$on('sexChange',function(event,args){
$scope.sex = args;
}) })
</script>
</body>
</html>
本想着做个gif展示一下的，发现ubuntu下做个gif有点麻烦，这个说明sex有俩个作用域共享，而name则是独享的。$rootScope可以认为是一个顶层作用域，他能够访问到其他子域，本例中，通过监听sex的变化，如果变化，则通过$rootScope发送一个sexChange事件，并将sex作为参数传进去，然后在$scope上侦听该事件，如果事件被触发，则改变$scope.sex为传进来的新值。
五、控制器的继承
一个控制器的视图包含另一个控制器，那么里面的控制器将继承外面的控制器放到$scope上的属性和方法。
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>继承</title>
</head>
<body>
<div ng-controller='fatherCtrl'>
<div ng-controller="sonCtrl">
<h1>{{data}}</h1>
</div>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('fatherCtrl',function($scope,$rootScope){
$scope.data = "愚人节快乐！"; })
.controller("sonCtrl",function(){ });
</script>
</body>
</html>
sonCtrl中并没有任何东西，但是它从fatherCtrl中继承了data属性（值为：愚人节快乐！）;
六、关于显示更新作用域
| 方法 | 干啥的 |
| $apply(expression) | 向作用域中应用变化 |
| $watch(expression,hadler) | expression发生变化执行handler |
| $watchCollection(object,handler) | object任一属性变化则执行handler |
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>updataScope</title>
</head>
<body>
<div ng-controller='dayCtrl'>
<h1>{{data}}</h1>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('dayCtrl',function($scope){
$scope.data = "愚人节快乐！"; setTimeout(function () {
$scope.$apply(function () {
$scope.data ="大家愚人节快乐！";
});
}, 1000);
})
</script>
</body>
</html>
$watch()在上面的作用域通信已经用过了，$watchCollection()与之类似，关于这个$apply()我还不太清楚它有何作用。有知道的同学请指点一下。
先写到这，过几天继续，要复习，要考试！
AngularJS1.X学习笔记6-控制器和作用域的更多相关文章
- AngularJS1.X学习笔记1-整体看看
听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...
- ES6学习笔记之块级作用域
ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...
- AngularJS1.X学习笔记10-自定义指令（下）
继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. ...
- Swoft2.x 小白学习笔记 (一) ---控制器
Swoft通过官方文档进行学习,这里不做介绍,直接上手. 涉及到Swoft方面:(配置.注意的坑) 1.控制器(路由.验证器.中间件) 2.mysql (Model使用).Redis配置及通用池 3 ...
- 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第四章内容. 1.函数:通过函数可以封装 ...
- AngularJS1.X学习笔记13-动画和触摸
本文主要涉及了ngAnimation和ngTouch模块,自由男人讲的比较少,估计要用的时候还要更加系统的学习一下. 一.安装 没错,就是酱紫. 二.玩玩动画 <!DOCTYPE html> ...
- AngularJS1.X学习笔记11-服务
如果我没记错的话,spring里边有个service层.什么是服务呢?个人理解就是很多地方要用的,可以跨越控制器甚至是跨越模块的工具.AngularJS也为我们提供了服务这种机制,这让我们可以将一些不 ...
- AngularJS1.X学习笔记8-自定义指令（上）
AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...
- AngularJs 学习笔记（一）作用域
AngularJs采用了注重时效的MVC方式,是基于MVW模式. 1.$scope和作用域的概念. AngularJs中的$scope对象是模板的域模型,也称作作用域实例,通过为其属性赋值,可以传递给 ...
随机推荐
- JQuery和Ajax在ASP.NET MVC中的基本应用
当我们在开发Web应用程序中使用JQuery和Ajax异步调用来实现很多功能时,不仅提高了程序的性能,而且给用户一个更好的交互式界面操作体验.接下来我们依旧用简单的实例来学习下它们的应用. 创建一个A ...
- 我眼中的JAVA的那些数据结构应用
能沉淀下来的东西,往往都很基础,整理了下JAVA中遇到的数据结构 目录大纲: 到目前接触到的 有几个说明: 可扩容数组 ArrayList 扩容数组的实现, 满了后扩容,扩容在1.5倍,通过copy过 ...
- java(jdk1.7) IO系列01之InputStream和OutputStream解析
1.InputStream和OutputStream简介 在java中InputStream和OutputStream分别代表字节输入流和字节输出流,表示以字节的方式来实现进程或者程序的通信,Inpu ...
- Asp.Net MVC学习总结（二）——控制器与动作(Controller And Action)
一.理解控制器 1.1.什么是控制器 控制器是包含必要的处理请求的.NET类,控制器的角色封装了应用程序逻辑,控制器主要是负责处理请求,实行对模型的操作,选择视图呈现给用户. 简单理解:实现了ICon ...
- 基础数据结构-串-KMP算法
KMP算法用于模式串字符匹配,因为没有提前预习,上课时听得云里雾里,后来回去看了一晚上,翻了一些网上的讲解才理解了.我简单讲一下,我们在一串字符串A里搜索匹配另一段字符串B时,思路最简单方法的就是从第 ...
- 1036: [ZJOI2008]树的统计Count
1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 7496 Solved: 3078[Submit] ...
- 通讯录--(iOS9独有的方法)
导入库文件 #import <ContactsUI/ContactsUI.h> #pragma mark iOS9 新出的点击通讯录的获取信息的办法 #pragma mark - 先弹 ...
- mp4文件格式解析
目前MP4的概念被炒得很火,也很乱.最开始MP4指的是音频(MP3的升级版),即MPEG-2 AAC标准.随后MP4概念被转移到视频上,对应的是MPEG-4标准.而现在我们流行的叫法,多半是指能播放M ...
- virtualBox,webstorm,开虚拟机传代码
一起git一个新技能 利用virtualBOX在本地开一个虚拟机,然后设置webstorm连接到虚拟机,将代码传到虚拟机里. 以下详细讲解: 第一步: 第二步:管理虚拟机的设置(我是用的是Xshell ...
- mongodb选型问题
一.Mongodb的介绍 MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoDB工作在收集和文件的概念. 数据库 数据库是一个物理容器集合.每个数据库都 ...