这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【$state、$watch、$scope、$rootScope分别是什么？】
angular之中，$state$watch$scope$rootScope分别是什么？
分享人：聂义中
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
在平时的编码中，我们总会想着有什么方法能够简化我们的工作流程，让我们只专心于业务逻辑和数据的处理，而angularjs
就为我们程序员实现了这一点。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。下面，我们将要讨论的就是angularJS里面的$scope$rootScope$watch和$state
2.知识剖析
作用域
我们可以把angularJs里面的作用域看做为一个容器，在控制器中我们可以访问这个容器我们可以往这个容器中放入一些模型数据，在视图中我们可以通过表达式将数据展示给用户。作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带，他是一个对象，有可用的方法和属性，可应用在视图和控制器上。
$rootScope与$scope
【1】当angularJS遇到ng-app指令的时候就会自动生成一个名为$rootScope的作用域，该作用域就是就是angularJS的根作用域。$rootScope就相当于一个全局作用域，所以我们保存在其中的东西是全局性的，在任一controller之中都能够使用
【2】当angularJS遇到controller或者一些自定义指令的时候也会自动的生成一个名为$scope的作用域scope是html和单个controller之间的桥梁，数据绑定就靠他了。
【3】$scope都是$rootScope的子作用域。
$watch
相信使用过angularjs的同学都知道，ng中有个比较重要的特点，叫做双向绑定，那么这个双向绑定是如何实现的呢？当我们在对绑定的name属性进行修改的时候，angular内部的$digest循环级会执行一次，他执行的内容是检查我们的$scope作用域的内容与上次执行$digest循环的时候是否有变化，若有变化就执行$watch()方法绑定的处理函数。从而达到了监听作用域属性的效果。
$watch(watchExpression,listener,objectEquality);
watchExpression,需要监控的表达式
listener,处理函数，函数参数如下function(newValue,oldValue,scope)
objectEquality,是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化.如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值,那么你应该使用它
$state
在ajax技术发展普及之后，因为其不会留下历史记录方便浏览器访问和对于seo不友好的特点，一个新技术应运而生：路由，$state就是路由中的一项服务。
$state.go()
$state.go()方法可以产生与a链接一样的效果，可以将此方法绑定给一个button按钮，然后在按钮的点击事件中国执行$state.go()，就可以跳转到相应的页面。
$stateParams状态参数在上面提及使用$stateparams来提取在url中的不同参数。该服务的作用是处理url的不同部分。例如，当上述的inbox状态是这样时：url:'/inbox/:inboxId/messages/{sorted}?from&to'//当用户访问者链接时：'/inbox/123/messages/ascending?from=10&to=20'
$stateParams对象的值为：{inboxId:'123',sorted:'ascending',from:10,to:20}
详细讲解
3.常见问题
watch的深度监听是什么意思呢？有什么优缺点呢？
4.解决方案
$watch在对待原始类型和引用类型会有不同的处理方式，这就要首先说一说$watch函数的第三个参数。在前面的例子中，我们知道，$watch函数有接收两个参数，第一个参数是需要监视的对象，第二个参数是在监视对象发生变化时需要调用的函数，实际上$watch还有第三个参数，它在默认情况下是false。在默认情况下，即不显式指明第三个参数或者将其指明为false时，我们进行的监视叫做“引用监视”。引用监视的原词的“referencewatch”，它的意思是只要监视的对象引用没有发生变化，就不算它发生了变化。具体来说，在上面的例子中，只要是items的引用没有发生变化，就算items中的一些属性发生了变化，$watch也会当做没有看见。
如果我们将$watch的第三个变量设置为true，那么此时我们进行的监视叫做“全等监视”，原词是“equalitywatch”。此时，只要$watch的对象有一点风吹草动，它马上就跳出来
既然全等监视这么好，那么我们为什么不直接用全等监视呢？当然，任何事情都有好的坏的两个方面，全等监视固然是好，但是它在运行时需要先遍历整个监视对象，然后在每次$digest之前使用angular.copy()将整个对象深拷贝一遍然后在运行之后用angular.equal()将前后的对象进行对比，上面的例子中因为items比较简单，因此可能性能上不会有什么差别，但是到了实际生产时，我们要面对的数据千千万万，可能因为全等监视这一个设置就会消耗大量的资源，让应用停滞不前
5.编码实战
6.扩展思考
7.参考文献
参考一：深度理解scope
参考二：原始数据类型和对象类型的区别及深度拷贝解析
8.更多讨论
1 作用域的继承方式是什么？
答： angular里面的作用域是通过原型链的方式来实现继承的。
2 $watch脏检测原理
答： scope通过$watch方法向this.
watchers数组中添加watcher对象(包含watchFn,listenerFn,valueEq,last四个属性)。每当$digest循环被触发时，它会遍历
watchers数组中添加watcher对象(包含watchFn,listenerFn,valueEq,last四个属性)。每当$digest循环被触发时，它会遍历
watchers数组，执行watcher中的watchFn，获取当前scope上某属性的值(一个watcher对应scope上一个被监听属性)，然后去同watcher中的last(上一次的值)做比较，若两值不相等，就执行listenerFn。
3 怎么定义或修改$rootScope作用域的属性和方法
答： 可以将 $rootScope 注入到任何一个控制器的function（）里面，然后在该方法里面就可以定义$rootScope的属性和方法。
技能树-IT修真院
IT修真院是一个免费的线上IT技术学习平台 。
每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；
所有task均是从真实项目中提炼出来的技能点，
强调实战演练+自学优先+师兄辅导的学习方式，
严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑！
点击官网注册 官网，使用师兄邀请链接有优惠。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地