angular之中，$state $watch $scope $rootScope 分别是什么？

本人是腹黑 优雅的程序员一小枚~~

angular之中，$state $watch $scope $rootScope 分别是什么？

1.背景介绍

在平时的编码中，咱们总会想着有什么方法可以简化咱们的工做流程，让咱们只专心于业务逻辑和数据的处理，而angularjs 就为咱们程序员实现了这一点。$scope $rootScope $watch 和 $state就是里面的几个方法，今天着重跟你们讨论一下这 几个方法

2.知识剖析

（1）$scope

$scope在angularjs中，你能够把它理解成做用域，每一个不一样的controller，都具备它不一样的做用域，因此 controller不一样，他们的scope是不一样的，

当你在 AngularJS 建立控制器时，你能够将 $scope 对象看成一个参数传递:

{{carname}}

当在控制器中添加 $scope 对象时，视图 (HTML) 能够获取了这些属性。 视图中，你不须要添加 $scope 前缀, 只须要添加属性名便可，如： {{carname}}。 若是咱们想象js那样，作一个全局变量该怎么办呢？这就要说 到rootScope了。

（2）$rootScope

$rootScope是由angularJS加载模块的时候自动建立的，每一个模块只会有1个rootScope;

$rootScope就至关于一个全局做用域，因此咱们保存在其中的东西是全局性的，在任一controller之中都可以使用

scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。 用rootscope定义的值，能够在各个controller中使用。

（3）$watch:

相信使用过angularjs的同窗都知道，ng中有个比较重要的特色，叫作双向绑定，那么这个双向绑定是如何实现的呢？ 当咱们在建立出scope下的一个新属性的时候，ng就会主动为咱们新属性加上$watch这个方法，这个方法会监听咱们 的数据变化，当数据变化以后，就当即把view和scope上数据同步。

虽然angular会为每个ng-model添加一个$watch事件，但咱们还能够定义本身的$watch，因此须要了解一下$watch的用法；

$watch(watchExpression, listener, objectEquality);

watchExpression,须要监控的表达式

listener,处理函数，函数参数以下 function(newValue,oldValue, scope)

objectEquality,是否深度监听，若是设置为true,它告诉Angular检查所监控的对象中每个属性的变化. 若是你但愿监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

（4）$state

在ajax技术发展普及以后，由于其不会留下历史记录方便浏览器访问和对于seo不友好的特色，一个新技术应运而生： 路由，$state就是路由中的一项服务。

路由的具体用法

此处可点→→→ui-rooter的使用方法

（5）$stateParams

$stateParams是一个对象，包含 url 中每一个参数的键/值。$stateParams能够为控制器或者服务提供 url 的各个部分。 注意：$stateParams必须与一个控制器相关，而且$stateParams中的“键/值”也必须事先在那个控制器的url属性中有定义。

3.常见问题

watch的深度监听是什么意思呢？有什么优缺点呢？

4.解决方案

$watch在对待基本类型和引用类型会有不一样的处理方式，这就要首先说一说$watch函数的第三个参数。它在默认状况下是false。在默认状况下，即不显式指明第三个参数或者将其指明为false时，咱们进行的监视叫作“引用监视”。引用监视的原词的“reference watch”，它的意思是只要监视的对象引用没有发生变化，就不算它发生了变化。具体来讲，在上面的例子中，只要是items的引用没有发生变化，就算items中的一些属性发生了变化，$watch也会当作没有看见。

若是咱们将$watch的第三个变量设置为true，那么此时咱们进行的监视叫作“全等监视”，原词是“equality watch”。此时，只要$watch的对象有一点风吹草动，它立刻就跳出来

既然全等监视这么好，那么咱们为何不直接用全等监视呢？固然，任何事情都有好的坏的两个方面，全等监视当然是好，可是它在运行时须要先遍历整个监视对象，而后在每次$digest以前使用angular.copy()将整个对象深拷贝一遍而后在运行以后用angular.equal()将先后的对象进行对比，可是到了实际生产时，咱们要面对的数据千千万万，可能由于全等监视这一个设置就会消耗大量的资源，让应用停滞不前

5.编码实战

demo

6.扩展思考

怎么取消$watch，为何取消？

$watch的性能消耗较大，因此对于已经不须要监视的watch，记得定时取消掉。

7.参考文献

参考一：Angular.js中使用$watch监听模型变化

参考二：关于$watch应用的一些小技巧

参考三：AngularJS $watch用法

8.更多讨论

PPT

视频

感谢你们观看奥。