$state、$watch、$scope、$rootScope分别是什么？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【$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的属性和方法。