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

大家好,我是IT修真院郑州分院第6期的学员王栋,一枚正直、纯洁、善良的前端程序员今天给大家分享一下,修真院官网js任务六深度思考中的知识点——angular之中,$state  $watch $scope $rootScope 分别是什么?

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.更多讨论

问题

Q1:王姣妍

$scope和$rootscope的优先级谁高

A1:王栋

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

 Q2:王姣妍

$watch 的作用原理?

A2:王栋

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

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

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

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

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

Q3:$state怎么使用?

A3:王栋

使用方法如下

PPT

视频

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容