AngularJS1.X学习笔记6-控制器和作用域
来源:互联网 发布:java多态的作用 编辑:程序博客网 时间:2024/05/22 12:50
一、谈谈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学习笔记13-动画和触摸
- AngularJS1.X学习笔记1-整体看看
- AngularJS1.X学习笔记2-数据绑定
- AngularJS1.X学习笔记7-过滤器
- AngularJS1.X学习笔记11-服务
- AngularJS1.X学习笔记12-Ajax
- AngularJS1.X学习笔记13-路由
- angularJs1.x<二、控制器Controller>
- AngularJS1.X学习笔记3-内置模板指令
- AngularJS1.X学习笔记4-内置事件指令及其他
- AngularJS1.X学习笔记5-加强版的表单
- AngularJS1.X学习笔记8-自定义指令(上)
- AngularJS1.X学习笔记9-自定义指令(中)
- AngularJS1.X学习笔记10-自定义指令(下)
- AngularJS1.X学习笔记14-动画(解读文档)
- AngularJs1学习笔记:指令
- AngularJs1学习笔记:AngularJS 输入验证和事件
- AngularJS1.X学习笔记2-数据绑定
- AngularJS1.X学习笔记3-内置模板指令
- 【算法设计与数据结构】为何程序员喜欢将INF设置为0x3f3f3f3f?
- AngularJS1.X学习笔记4-内置事件指令及其他
- AngularJS1.X学习笔记5-加强版的表单
- AngularJS1.X学习笔记6-控制器和作用域
- CSS3伪类和伪元素的特性和区别
- CSS3选择器~一看吓一跳,这么多不会
- 书籍推荐---软技能:代码之外的生存指南
- scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrol
- hdu 1233 还是畅通工程(并查集)
- poj1850组合数学
- 小范围排序-------------->_<
- nodejs oj在线笔试应对方案(讲几种输入处理方法)