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

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

1.背景介绍

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

2.知识剖析

（1）$scope

$scope在angularjs中，你可以把它理解成作用域，每个不同的controller，都具有它不同的作用域，所以 controller不同，他们的scope是不同的，

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

当在控制器中添加 $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

视频