$scope $rootScope $watch 和 $state是什么？

1.背景介绍

在平时的编码中，我们总会想着有什么方法能够简化我们的工作流程，让我们只专心于业务逻辑和数据的处理，而angularjs

就为我们程序员实现了这一点。$scope $rootScope $watch 和 $state就是里面的几个方法，今天着重跟大家讨论一下这

几个方法

2.知识剖析

$scope

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

controller不同，他们的scope是不同的。

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

var app =angular.module('myApp', []);

app.controller('myCtrl',function($scope) {

$scope.carname ="Volvo";

});

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

如果我们想象js那样，做一个全局变量该怎么办呢？这就要说

到rootScope了。

$rootScope

$rootScope就相当于一个全局作用域，所以我们保存在其中的东西是全局性的，在任一controller之中都能够使用

scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。

用rootscope定义的值，可以在各个controller中使用。

$watch

相信使用过angularjs的同学都知道，ng中有个比较重要的特点，叫做双向绑定，那么这个双向绑定是如何实现的呢？

当我们在创建出scope下的一个新属性的时候，ng就会主动为我们新属性加上$watch这个方法，这个方法会监听我们

的数据变化，当数据变化之后，就立即把view和scope上数据同步。

$watch(watchExpression, listener, objectEquality);

watchExpression,需要监控的表达式

listener,处理函数，函数参数如下

function(newValue,oldValue, scope)

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

$state

在ajax技术发展普及之后，因为其不会留下历史记录方便浏览器访问和对于seo不友好的特点，一个新技术应运而生：

路由，$state就是路由中的一项服务。

3.常见问题

Angular这个框架要怎么去学习

4.解决方案

如果你写惯了jQuery手工操作DOM的代码， 刚开始的时候会对angular的代码风格非常不适应。

angular对于js基础不够好的新手确实比较困难，尽量多想一想directive，provider，filter是什么，想通了就知道angular是什么，该怎么写了，在这之前建议花几天时间把js基础先看一遍

简单说就是要先去理解他的原理，工作机制，想一想为什么会有这个东西，怎么工作

5.编码实战

6.扩展思考

$http是什么？怎么用？

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

7.参考文献

参考一：angularJS中的$watch方法监听作用域

参考二：AngularJS Scope(作用域)

8.更多讨论

问题

1:$scope和$rootscope的优先级谁高

$scope的优先级高，系统会先查找$scope内的，如果能找到相应的值，就不会再往上查找！

2：$watch 的作用原理？

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

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

3：$state怎么使用？

使用方法如下