发表于: 2017-06-04 23:16:08
1 912
1、优化任务6 html细节,外联路由html加载模块。(直接放置同文件夹下,html模块不用加网页声明那些,直接以<div>内容开始。
提示:如果本地外联路由html加载模块报错“Cross origin requests are only supported for protocol schemes:。。。。”,
百度分析:浏览器为了安全性考虑,默认对跨域访问禁止。
解决:给浏览器传入启动参数(allow-file-access-from-files),允许跨域访问。 Windows下,运行(CMD+R)或建立快捷方式:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
2、开始任务7,续任务6网页。发现到任务10就是整个网站的完整搭建,包括上传文件、新增内容、搜索等学习任务。
3、Angular数据双向绑定
Angular实现了双向绑定机制。所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。
一个最简单的示例就是这样:
<div ng-controller="CounterCtrl">
<span ng-bind="counter"></span>
<button ng-click="counter++">increase</button> //每当点击一次按钮,界面上的数字就增加一。
</div>function CounterCtrl($scope) {
$scope.counter = 1;
Angular主要通过scopes实现数据双向绑定。AngularJS的scopes包括以下四个主要部分:
digest循环以及dirty-checking,包括watch,watch,digest,和$apply。
Scope继承 - 这项机制使得我们可以创建scope继承来分享数据和事件。
对集合 – 数组和对象 – 的有效dirty-checking。
事件系统 - on,on,emit,以及$broadcast。
我们主要讲解第一条Angular数据绑定是怎么实现的。
1.digest循环以及dirty-checking,包括watch,watch,digest,和$apply
①浏览器事件循环和Angular.js扩展
我们的浏览器一直在等待事件,比如用户交互。假如你点击一个按钮或者在输入框里输入东西,事件的回调函数就会在javascript解释器里执行,然后你就可以做任何DOM操作,等回调函数执行完毕时,浏览器就会相应地对DOM做出变化。 Angular拓展了这个事件循环,生成一个有时成为angular context的执行环境(这是个重要的概念)。
②watch队列(watch队列(watch list)
每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch。想象一下$watch就是那个可以检测它监视的model里时候有变化的东西。
当我们的模版加载完毕时,也就是在linking阶段(Angular分为compile阶段和linking阶段),Angular解释器会寻找每个directive,然后生成每个需要的$watch。
③$digest循环
当浏览器接收到可以被angular context处理的事件时,digest循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列,另一个处理digest循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列,另一个处理watch队列。 这个是处理什么的呢?digest将会遍历我们的digest将会遍历我们的watch,然后询问它是否有属性和值的变化,直$watch队列都检查过。
这就是所谓的dirty-checking。既然所有的$watch都检查完了,那就要问了:有没有$watch更新过?如果有至少一个更新过,这个循环就会再次触发,直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话,它将会抛出一个异常,防止无限循环。 当$digest循环结束时,DOM相应地变化。
困难:对任务7的理解不是很透彻,请教师兄后已经明白,主要是列表栏内容全部需要引用端口数据。然后双向数据和端口数据的结合还比较懵,边看边做任务熟悉下。
计划:继续任务7。买的书到位了,强迫每天抽时间看一点。
评论