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

曾经终败给现在 2024-03-16 22:28 4阅读 0赞

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

### 背景介绍 ###

*  在平时的编码中，我们总会想着有什么方法能够简化我们的工作流程，让我们只专心于业务逻辑和数据的处理，而angularjs
 *  就为我们程序员实现了这一点。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。下面，我们将要讨论的就是angularJS里面的$scope$rootScope$watch和$state

### 知识剖析 ###

#### 作用域 ####

*  我们可以把angularJs里面的作用域看做为一个容器，在控制器中我们可以访问这个容器我们可以往这个容器中放入一些模型数据，在视图中我们可以通过表达式将数据展示给用户。作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带，他是一个对象，有可用的方法和属性，可应用在视图和控制器上。

#### $rootScope与$scope ####

*  当angularJS遇到ng-app指令的时候就会自动生成一个名为$rootScope的作用域，该作用域就是就是angularJS的根作用域。$rootScope就相当于一个全局作用域，所以我们保存在其中的东西是全局性的，在任一controller之中都能够使用
 *  当angularJS遇到controller或者一些自定义指令的时候也会自动的生成一个名为$scope的作用域scope是html和单个controller之间的桥梁，数据绑定就靠他了。
 *  $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'//
 *  $stateParams对象的值为：\{inboxId:'123',sorted:'ascending',from:10,to:20\}

### 解决方案 ###

*  $watch在对待原始类型和引用类型会有不同的处理方式，这就要首先说一说$watch函数的第三个参数。在前面的例子中，我们知道，$watch函数有接收两个参数，第一个参数是需要监视的对象，第二个参数是在监视对象发生变化时需要调用的函数，实际上$watch还有第三个参数，它在默认情况下是false。在默认情况下，即不显式指明第三个参数或者将其指明为false时，我们进行的监视叫做“引用监视”。引用监视的原词的“referencewatch”，它的意思是只要监视的对象引用没有发生变化，就不算它发生了变化。具体来说，在上面的例子中，只要是items的引用没有发生变化，就算items中的一些属性发生了变化，$watch也会当做没有看见。
 *  如果我们将$watch的第三个变量设置为true，那么此时我们进行的监视叫做“全等监视”，原词是“equalitywatch”。此时，只要$watch的对象有一点风吹草动，它马上就跳出来
 *  既然全等监视这么好，那么我们为什么不直接用全等监视呢？当然，任何事情都有好的坏的两个方面，全等监视固然是好，但是它在运行时需要先遍历整个监视对象，然后在每次$digest之前使用angular.copy()将整个对象深拷贝一遍然后在运行之后用angular.equal()将前后的对象进行对比，上面的例子中因为items比较简单，因此可能性能上不会有什么差别，但是到了实际生产时，我们要面对的数据千千万万，可能因为全等监视这一个设置就会消耗大量的资源，让应用停滞不前