从零学前端第十四讲：AngularJs进阶-作用域和控制器
修真院Web工程师零基础全能课
本节课内容
AngularJs进阶-作用域和控制器
主讲人介绍
沁修，葡萄藤技术总监
项目经验丰富，擅长H5移动项目开发。
专注技术选型、底层开发、最佳代码实践规范总结与推广。
直播录屏版
传送门：https://v.qq.com/x/page/t0782...
文字解析版
什么是scope作用域？
scope作用域是一个指向应用model的对象object，也是表达式的执行环境。
作用域有层次结构，有根作用域，有很多子作用域，根据位置不同而不同。
作用域还能监控表达式，传递事件。
比如在html当中，我们都会定义一个ng-app指令，那么随之而来就是一个作用域产生了。
不过由ng-app生成的作用域比较特殊，它是一个根作用域$rootscope，也就是其他所有scope的顶层。
除此之外，还有很多指令都会产生一个作用域，比如ng-controller, ng-repeat等。这些作用域都拥有自己的继承上下文，并且根作用域都是rootscope。
在我们生成一个作用域之后，$scope对象就代表了这个作用域的数据。
我们可以在$scope内定义各种数据，之后可以直接在html中以双花括号的表达式的方式来让html得到这个变量。
scope的用法？
在正式开始接触scope之前我们再来熟悉一下js的全局变量和局部变量：
var foo = "foo";
function bar() {
var foo = "bar";
console.log(foo);
}
bar();
console.log(foo);
这里说明，全局变量可以在方法内引入，而局部变量只能在定义的方法内使用，angular作用域跟变量性质相似。
angularjs中的全局作用域：
var myApp = angular.module('myApp', []);
/*
- run方法用于初始化全局的数据，仅对全局作用域起作用。
- 这里的run方法只会在angular启动的时候运行一次。
*/
myApp.run(function($rootScope){
$rootScope.version = 2.0;
});
全局作用域是所有controller的scope的桥梁。
rootscope定义的值，可以在各个controller中使用。
经常用于需要在多个页面场景中的数据就可以定义到全局作用域上。
angularjs中的局部作用域：
myApp.controller('homeCtrl', function($scope){
$scope.person = {
name: 'max'
}
})
myApp.controller('productCtrl',function($scope,$rootScope){
console.log($scope.person.name);//undefined
console.log($rootScope.version) //2.0
})
前面我们已经说过，每一个angular应用有且只有一个root scope，但可以拥有多个child scope。
因为一些directive会创建新的child scope，当新的scope被创建后，他们将作为一个child scope，加入到parent scope中。
这样，创建了一个与它们附属的DOM相似的树结构。
当angular在html中对{{person}}求值时，它首先查看与当前元素关联的scope的person属性。
如果没有找到对应的属性，它将会一直向上搜索parent scope，直到到达root scope。
在javascript中，这个行为被称为“原型继承”，child scope典型地继承自它们的parent。
$scope特点？
提供了$watch()方法，用于监听模型的变化
提供了$apply()方法，用于传播模型的变化
$watch()监听模型变化，当模型发生变化，它会给你提示。
表达式：
$watch(watchExpression, listener, objectEquality);
watchExpression：监听的对象，比如一个angular表达式如’scope.person’。
listener：当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：
newValue(新值), oldValue(旧值), scope(作用域的引用)。
objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化.。
如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。
$scope.name = 'hello';
$scope.$watch('name',function(newValue, oldValue, scope){
console.log(newValue);
console.log(oldValue);
});
$timeout(function(){
$scope.name = "world";
},1000);
$apply()用于传播模型的变化。
AngularJS 外部的控制器（DOM 事件、外部的回调函数如jQuery等）调用了AngularJS 函数之后，就需要调用$apply。
myApp.controller('homeCtrl', function($scope){
vm.name = 'hello';
setTimeout(function () {
vm.name = "world";
}, 2000);
})
预期的应该是先显示hello, 两秒后改为world。
但事实是我们发现它不会自动变化，因为调研了外部的事件，所以需要用$apply方法就可以了：
myApp.controller('homeCtrl', function($scope){
vm.name = 'hello';
setTimeout(function () {
$scope.$apply(function () {
vm.name = "world";
});
}, 2000);
})
$scope的生命周期？
创建 creation
↓
注册监视器 watcher registration
↓
模型变化 model mutation
↓
变化检测 mutation observation
↓
作用域销毁 scope destruction
浏览器正常的事件流中，当浏览器接收到事件后，它会执行一个相应的javascript回调。
一旦回调函数执行完毕后，浏览器将会重绘DOM，并返回到继续等待事件的状态。
1.在应用启动的过程中，会创建rootscope，而后在模板的链接过程中，一些directive会创建新的child scope。
2.directive在scope中注册$watch，这些watch会用来向DOM传播model的值。
3.更新模型状态必须是在$apply方法中才可以被观察到，不过angular框架是封装了这个方法过程的。
我们通常无需担心，除非是之前提到过的，angular以外的一些方法事件在触发后，不能正常调用$apply才需要手动去添加这个方法。
4.$apply方法结束后，angular会在根作用域执行一个$digest周期并且扩散到所有子作用域。
scope检查所有$watch监听的表达式，将现在的值与旧的值作比较。
这个过程会检查模型状态是否改变以及更新。
5.销毁作用域，当不在需要子作用域的时候，就会被销毁掉。
总结$scope？
1、提供了观察者可以监听数据模型的变化
2、可以将数据模型的变化通知给整个 App
3、可以进行嵌套,隔离业务功能和数据
4、给表达式提供上下文执行环境
在scope之后我们又来看看和它关系非常紧密的控制器controller。。。
什么是控制器？
从作用上来讲，controller主要是对视图中的数据和事件函数进行挂载，同时处理一些业务的地方。
从功能上来讲，在angularjs中，controller是一个js函数，用来扩展angular的子scope的实例。
因此它可以用来设置scope对象的初始状态，并且增加一些属性行为到scope中。
控制器使用？
在模板中声明控制器
<div ng-controller="myController">...</div>
控制器实际上就是一个js的构造函数：
//控制器类定义
var myControllerClass = function($scope){
//模型属性定义
$scope.text = "...";
//模型方法定义
$scope.do = function(){...};
};
//在模块中注册控制器
angular.module('someModule',[])
.controller("myController",myControllerClass);
控制器构造函数仅在AngularJS对HTML文档进行编译时被执行一次。
一旦控制器创建完毕，就意味着scope对象上的业务模型构造完毕，此后就不再需要控制器了，因为scope对象接管了。
控制器和scope？
<html ng-app=“myApp">
<body ng-init=“foo={name:’hello'}”>
<div ng-controller=“myCtrl"></div>
</body>
</html>
对scope的影响是什么样的呢？
$rootScope: {
foo: {name: ‘hello'}
}
scope: {
prototype: $rootScope,
bar: ...
}
可以看到ng-app指令创建了$rootScope对象，这个时候它还是一个空对象。
body元素对应的scope对象还是$rootScope，ng-init指令将foo对象挂到了$rootScope上
div元素又通过ng-controller指令创建了一个新的scope对象，这个对象的原型是$rootScope
因为继承关系，如果在scope中引用foo会指向$rootScope.foo
注意不要在controller中做的事情：
1.DOM操作
2.表单输入的格式化，用form controls
3.输出内容的格式化和过滤，用filter
4.控制器之间的数据共享，另外定义services服务来处理
以上就是上节课的内容解析啦
从零学前端第十四讲：AngularJs进阶-作用域和控制器相关推荐
- python 函数修饰器 父类_手把手教你学python第十四讲（函数装饰器,super用法和时间处理）...
文中有些字在图中是因为每篇文章最多100张图片,我把有的小图片和文字一起截图了,文中所有的引用都会标出原文网址,除此以外都是作者原创. 有时候会在文章最前或者最后补充一些知识或者把前面说的有问题的地方 ...
- 从零学前端第一讲：前端开发是什么？给初学者有什么建议？
这里是修真院前端小课堂,本篇分析的主题是 [从零学前端第一讲:前端开发是什么?给初学者有什么建议?] 初识前端 1.前端开发是什么? 2.前端开发有前途吗? 3.前端开发哪里学? 4.前端发展 5.对 ...
- SLAM十四讲-设计前端-0.4-代码解读
本博文的创作目的是对高翔博士的<视觉SLAM十四讲>第九讲--实践:设计前端,0.4部分的代码进行解读,以作为阅读的笔记,若有错误之处,欢迎留言讨论. 基本类 上图是工程中所用到的基 ...
- 史上最简SLAM零基础解读(10.1) - g2o(图优化)→简介环境搭建(slam十四讲第二版为例)
本人讲解关于slam一系列文章汇总链接:史上最全slam从零开始 文末正下方中心提供了本人联系方式,点击本人照片即可显示WX→官方认证{\color{blue}{文末正下方中心}提供了本人 \co ...
- 视觉SLAM十四讲笔记
文章目录 章节安排 1. 数学基础部分(1~6) 2. SLAM技术部分(7~14) 第一讲 前言和简介 第二讲 初识SLAM 相机: 视觉SLAM框架 SLAM问题的数学描述 cmake Cmake ...
- slam十四讲第二版 pdf_聊聊这两年学习slam啃过的书
作者:Amber 来源:微信公众号|3D视觉工坊(系投稿) 「3D视觉工坊」技术交流群已经成立,目前大约有8000人,方向主要涉及3D视觉.CV&深度学习.SLAM.三维重建.点云后处理.自动 ...
- SLAM十四讲笔记1
文章目录 ch02 初识SLAM ch02-01 经典视觉SLAM框架 ch02-02 SLAM问题的数学表述 ch03 三维空间刚体运动 ch03.01 旋转矩阵:点和向量,坐标系 01 向量a在线 ...
- 视觉SLAM十四讲学习笔记-第六讲学习笔记总结（1）---非线性优化原理
第六讲学习笔记如下: 视觉SLAM十四讲学习笔记-第六讲-非线性优化的状态估计问题_goldqiu的博客-CSDN博客 视觉SLAM十四讲学习笔记-第六讲-非线性优化的非线性最小二乘问题_ ...
- 视觉SLAM十四讲学习笔记-第六讲-非线性优化的非线性最小二乘问题
专栏系列文章如下: 视觉SLAM十四讲学习笔记-第一讲_goldqiu的博客-CSDN博客 视觉SLAM十四讲学习笔记-第二讲-初识SLAM_goldqiu的博客-CSDN博客 视觉SLAM十四讲学习 ...
最新文章
- Hadoop Backup Node
- Elias-Fano编码算法——倒排索引压缩用，本质上就是桶排序数据结构思路
- tf.arg_max
- K8S部署工具：KubeOperator集群部署
- 基于JAVA+SpringMVC+Mybatis+MYSQL的保险销售管理系统
- 【OpenCV入门指南】第六篇 轮廓检测 下
- 小米手环6NFc支持Android,小米手环6普通版和NFC版有什么区别-哪个好-哪款更值得入手...
- ACWING828 模拟栈
- LINUX C获取并设置环境变量
- java 什么是封闭类,封闭类与声明类
- 【BZOJ 1053】反素数【素数基本知识】
- 魔兽怀旧服怎么找不到服务器,魔兽世界怀旧服世界服务器无法连接怎么办
- 电脑如何压缩图片大小kb？如何在线压缩图片？
- 电脑网络里面的以太网不见了，开启后立即自动关闭，如何解决？
- 1109: 方块消除 blocks
- SwiftUI macOS 轻松搭建音乐Radio类App界面(教程含源码)
- Dart中常量构造函数
- Picture2Epub
- 【自然语言处理】Word2Vec 词向量模型详解 + Python代码实战
- SMETA认证辅导，SMATA验厂审核现场会查验哪些文件
热门文章
- SpringBoot启动项目时提示:Error:java: 读取***.jar时出错;
- IDEA中新建SpringBoot项目时提示:Artifact contains illegal characters
- C#中一行代码实现18位数字时间戳转换为DateTime
- Thymeleaf中使用select进行消息回显时提示：Exception evaluaating SpringEL expression
- Xcode8上传成功后，商店里构建版本却没有应用
- SOA和微服务之间的区别（应用和数据的垂直拆分水平拆分）
- 【LeetCode】35. 搜索插入位置（C++实现）
- 一个成功敏捷团队的失败历程
- 如何做到服务器虚拟化,老生常谈 如何打造服务器虚拟化的基础
- 游戏行业案例 | 99.7% 的充值玩家比例提升，从何而来？