angular之中,$state $watch $scope $rootScope 分别是什么?

大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员 今天给大家分享一下,题目angular之中,$state  $watch $scope $rootScope 分别是什么?


一、背景介绍

AngularJs是一个用于设计动态web应用的结构框架,使得开发现代的单一页面应用程序变得更加容易。而且能够简化我们的工作流程,让我们只专心于业务逻辑和数据的处理.$scope $rootScope $watch 和 $state就是里面的几个方法,今天着重跟大家讨论一下这几个方法


二、知识剖析

$SCOPE

$scope在angularjs中,你可以把它理解成作用域,每个不同的controller,都具有它不同的作用域,所以 controller不同,他们的scope是不同的,那么,如果我们想象js那样,做一个全局变量该怎么办呢?这就要说 到rootScope了。

$ROOTSCOPE

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

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

$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(),就可以跳转到相应的页面。

$state.Params()

$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}


三、常见问题

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


四、解决方案

$watch在对待原始类型和引用类型会有不同的处理方式,这就要首先说一说$watch函数的第三个参数。在前面的例子中,我们知道,$watch函数有接收两个参数,第一个参数是需要监视的对象,第二个参数是在监视对象发生变化时需要调用的函数,实际上$watch还有第三个参数,它在默认情况下是false。在默认情况下,即不显式指明第三个参数或者将其指明为false时,我们进行的监视叫做“引用监视”。引用监视的原词的“reference watch”,它的意思是只要监视的对象引用没有发生变化,就不算它发生了变化。

如果我们将$watch的第三个变量设置为true,那么此时我们进行的监视叫做“全等监视”,原词是“equality watch”。此时,只要$watch的对象有一点风吹草动,它马上就跳出来

既然全等监视这么好,那么我们为什么不直接用全等监视呢?当然,任何事情都有好的坏的两个方面,全等监视固然是好,但是它在运行时需要先遍历整个监视对象,然后在每次$digest之前使用angular.copy()将整个对象深拷贝一遍然后在运行之后用angular.equal()将前后的对象进行对比


五、编码实战

编码实战-腾讯视频


六、拓展思考



七、参考文献

AngularJS路由 $state服务、路由事件、获取路由参数

AngularJS Scope(作用域)-菜鸟教程


八、更多讨论



Q1:提问人:

问题:

A1:回答人:冯亚超 

回答:

Q2:提问人:

问题:

A2:回答人:冯亚超 

回答:

Q3:提问人:

问题:

A3:回答人:冯亚超 

回答:


PPT

感谢大家观看!

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

获得更多IT技能,请移步官网 点击链接直达:官网

猜你喜欢

转载自blog.csdn.net/f056917/article/details/80229939