数据双向绑定并不是Angular最出彩的地方。大部分对AngularJs的介绍都偏重于使用,使用的学习只是学了AngularJs的API,而那只能AngularJs的很小一部分。随着使用越来越深,系统越来越大,我们也越来越迷失,是时候深入AngularJs的实现来学习。因为AngularJs 2.0就要来了,由于2.0和1不兼容,基于API的学习不再有用,而内部实现的精华才能延续。其实,软件的很多技术也大都如此,冲走的是实现,留下的是思想。

原文

深入探索AngularJS

作用域Scope是DOM和Directives交互的抽象

Scope是POJO对象

AngularJS只是往Scope中添加了很多“内部"属性,大部分以$开头,还有些以$$开头,两个$开头的属性一般不要使用。

Scope是上下文

应该看作是一个容器,保存着当前的上下文和上下文敏感的变量数据等

Scope继承树

  • Scope总是和一个DOM元素联系起来
  • Controller会创建一个新的Scope
  • Directive有时候会创建一个新的Scope
  • 其他情况会直接使用父级的Scope
  • 如果不在ng-app内,没有任何相关的Scope

Scope附加功能

AngularJS往Scope中添加了一些属性

遍历功能

  • $id

    Scope的唯一id号
  • $root
  • $parent
  • $$childHead
  • $$childTail
  • $$prevSibling
  • $$nextSibling

正交功能

Element和Attribute

Directive可以定义为Element(标识)也可以定义为标识的属性。 更为强大的架构就是综合应用这两种功能,用属性定义来改变或增强原Element的功能。

模块模式 - Module Pattern

模块模式是一个设计模式,它能够消除大量重复的 thisprototype使用。 Angular Material就使用这个模式开发模块代码 Angular Material Coding Conventions and Guidelines

参考: http://toddmotto.com/mastering-the-module-pattern/

创建模块

(function(){
//code
})();

这里申明了一个函数,然后马上调用它自己,这也被称作立即执行函数表达式 (Immediately-Invoked Function Expression)。这个函数就创建了一个新的作用域(Scope),从而模拟了类似私有域的效果, 把大部分代码从全局作用域(Gloable Scope)中隔离出来。

创建新的作用域之后,我们需要把代码赋于命名空间。

var Module = ( function () {
//code
})();

这样,我们就在全局作用域中申明了 Module,这样我们就可以任意调用它,甚至把它传给另外一个模块。

私有方法 - Private Method

Javascript所有的函数定义默认下都是全局的,而且Javascript也没有命名空间的概念,这两个缺陷使得Javascript很容易产生名称冲突。 模块模式可以帮助解决这些问题。

Javascript 本身不能够定义私有方法,但是我们可以使用模块模式模拟出私有方法的效果。

私有方法本质上是:你不希望外部用户调用执行的某个作用域内部的任何东西。特别是那些从服务器读取或回写的操作。

通过模块模式,我们可以如下隐藏私有方法:

var Module = (function(){
var privateMethod = function(){
//do something
};
})();

在新作用域内部申明的方法privateMethod就很好的隐藏起来,任何外部试图调用privateMethod都会导致错误。

理解返回 - Return

景点模块模式可以用 return返回一个对象给模块,那些在该对象下声明的方法可以通过模块的命名空间来调用。

var Module = (function(){
return {
publicMethod:function(){
//code
}
};
})();

调用: Module.publicMethod();

这和标准方式定义的对象没有任何区别:

var myObj = {
defaults: { name: 'Hao Wang'},
publicMethod: function () {
console.log(this.defaults);
}
}; //调用
myObj.publicMethod();

当时标准方式的问题是,一些内部属性和方法都暴露出来了,不能隐藏(Javascript没有私有属性和方法)。 如上面例子中的defaults就有可能被外部用户修改,导致不期望的行为。

Promise - 异步的承诺

Promise让异步调用看起来更像同步调用,从而很容易的取到返回值和捕获异常。

介绍

使用Promise我们可以在任何一个执行点捕获错误,然后忽略剩下的执行步骤。 这种流程控制来源于新的代码风格本身,无需额外的代码。 从而,我们可以很容易的组合多个函数功能并且异常以冒泡式的抛出,同时有维持异步运行的能力。

Promise自始自终都是异步运行,我们不用担心它会阻塞其它部分的代码运行。

Promise in Angular

Angular的事件循环(Event Loop)在$rootScope.$evalAsync阶段解析(Resolve)Promise,直到$digest运行循环结束。 我们和容易的把Promise的结果输出成视图,这能够直接把XHR调用的结果直接赋给$scope对象的一个属性。

使用Promise到后台取数据的一个实例

<ul ng-controller="DashboardController">
<li ng-repeat="pr in pullRequests">
{{pr.title}}
</li>
</ul>

当用服务返回一个promise, 我们可以用.then()方法与promise进行交互操作, 我们可在该方法中修改scope中的任何变量,从而改变视图。

angular.module('myApp', [])
.controller('DashboardController', ['$scope', 'GithubService', function($scope, GithubService){
GithubService.getPullRequests(123) //这里返回的是Promise
.then(tunction(data){
$scope.pullRequests = data.data;
});
}]);

创建一个Promise

内建服务$q可以用来创建你自己的Promise。我们可以通过调用$q.defer()方法来创建一个“延迟”对象: var deferred = $q.defer();

“延迟”对象有三个方法和一个promise属性,该属性返回一个Promise对象。

  • .resolve(value) - 解析(返回结果)方法
  • .reject(reason) - 拒绝方法;等同于解析出一个拒绝对象.resolve($q.reject(reason));
  • .notify(value) - 返回执行的状态方法

Promise执行状态

如果我们有一个长时间运行的请求,可以调用.notify()来及时返回进程状态。 通常,我们会把这个长时间任务放在一个服务中:

.factory('GithubService', funcion($q, $http){
var getEventsFromRepo= function(){
//task
};
var service = {
makeMultipleRequests: function(repos){
for (var i=0; i < repos.length; i++) {
output.push(getEventsFromRepo(repos[i]));
percentComplete = (i+1) / repos.length * 100;
d.notify(percentComplete);
}
d.resolve(output);
return d.promise;
}
}
return service;
});

这里,每取一个repo, 我们就会收到一个进程状态的通知。下面是对这个Pomise的使用和状态通知的显示

.controller('HomeController', function($scope, GithubService){
GithubService.makeMultipleRequests(['auser/behavior','..'])
.then(function(result){
//Handle the result
}, function(err){
//Error occurred
}, function(percentComplete) {
$scope.progress=percentComplte;
});
});

异步流

Promise的then()方法返回一个新的Promise, 这个新的Promise实际上是在原始Promise的值解析之后创建的。这样我们就可以用then()让异步的执行通过一个一个Promise串联下去。

使用then()我们创建了异步执行体流,这样我们可以在任何一步切入,然后切换不同的返回值。 这种切换也可以染我们暂停或者延迟解析的流程。

$http服务就是使用这种切入来实现请求和响应的interceptors。

$q服务还有几个其他的帮助方法:

  • $q.all(promises) - 可以把多个Promise合并成一个Promise。
  • $q.defer() - 创建一个延迟对象。
  • $q.reject(reason) - 创建一个Promise,其解析值为rejection
  • $q.when(value) - 把一个对象封装成为Promise,这个对象可以是普通对象也可以原本就是Promise。

与服务器的交互

谈到后端时,我们有两种情况:有服务器后端和无服务器后端

ExpressJS作服务器后端

搭建Express

  1. 安装NodeJS
  2. 安装Express: $ npm install -g express-generator
  3. 创建网站: $ express myApp
  4. 运行App准备:` cd myApp && npm install -d
  5. 运行App: `$ node app.js
  6. 高级运行App (源代码的改动触发重新编译):

    $ npm install --save-dev node mon

    $ nodemon app.js

( 本文版权属于© 2015 卓逸天成 | 转载请注明作者和出处:卓逸知识文库 )

深入探索AngularJS的更多相关文章

  1. 深入探索AngularJS(持续更新)

    数据双向绑定并不是Angular最出彩的地方.大部分对AngularJs的介绍都偏重于使用,使用的学习只是学了AngularJs的API,而那只能AngularJs的很小一部分.随着使用越来越深,系统 ...

  2. angularjs $http提交数据探索

    前两天在搞自己的项目,前端js框架用的是angularjs框架:网站整的差不多的时候出事了:那就是当我用$http.post()方法向服务器提交一些数据的时候:后台总是接收不到数据: 于是采用了其他方 ...

  3. (转)构建自己的AngularJS,第一部分:Scope和Digest

    原翻译链接:https://github.com/xufei/Make-Your-Own-AngularJS/edit/master/01.md 原文链接:http://teropa.info/blo ...

  4. [译]用AngularJS构建大型ASP.NET单页应用(一)

    原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣 ...

  5. 走进AngularJs(一)angular基本概念的认识与实战

    一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...

  6. Angularjs 脏值检测

    文章转自:http://www.ituring.com.cn/article/39865 构建自己的AngularJS,第一部分:Scope和Digest 原文链接:http://teropa.inf ...

  7. angularjs(一)基础概念

    一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...

  8. AngularJs + Web API 页面开发(一)

    AngularJS这个JS框架是个神马东东我也不太清楚,我也是初学者~~ AngularJS适用于single page App,单页面程序都是局部刷新的,这一点和Ajax有第一的区别,因为使用Aja ...

  9. 走进AngularJs(三)自定义指令-----(上)

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

随机推荐

  1. Scrum 敏捷开发

    使用敏捷开发一个月的事件,基本的开发模式跟我遇到的这个文章介绍的基本类似,暂时简单Copy到了这里...... http://www.scrumcn.com/agile/scrum-knowledge ...

  2. pom.xml如何引入项目jar包

    <dependency> <groupId>com.jacob</groupId> <artifactId>jacob</artifactId&g ...

  3. CRC在线计算工具

    http://www.lammertbies.nl/comm/info/crc-calculation.html

  4. CSS-表格特有属性和定位

    1.表格特有属性 1.边框合并 属性:border-collapse 取值: 1.separate 默认值,即分离边框模式 2.collapse 边框合并 2.边框边距 作用:设置单元格之间或单元格与 ...

  5. mysql explain中的type列含义和extra列的含义

    很多朋友在用mysql进行调优的时候都肯定会用到explain来看select语句的执行情况,这里简单介绍结果中两个列的含义. 1 type列 官方的说法,说这列表示的是“访问类型”,更通俗一点就是: ...

  6. kbmmw 5.0 中的REST 服务

    目前关于REST 服务的话题越来越热,kbmmw 在5.0 里面开始支持rest.今天我就试一下kbmmw 的 rest 服务.闲话少说,开始. 老规矩,放上两个kbmMWServer1和 kbmMW ...

  7. 2018.11.02 NOIP模拟 飞越行星带(最小生成树/二分+并查集)

    传送门 发现题目要求的就是从下到上的瓶颈路. 画个图出来发现跟去年noipnoipnoip提高组的奶酪差不多. 于是可以二分宽度+并查集检验,或者直接求瓶颈. 代码

  8. 枚举子窗口EnumChildWindows()的应用

    1.EnumChildWindows()函数的作用枚举子窗口(按顺序调用回调函数,并将子窗口的句柄传递给了回调函数).函数原型: BOOL WINAPI EnumChildWindows( HWND ...

  9. git——^和~的区别(转)

    原文地址: http://www.cnblogs.com/softidea/p/4967607.html 一. 引子 在git操作中,我们可以使用checkout命令检出某个状态下文件,也可以使用re ...

  10. CodeForces 916C Jamie and Interesting Graph (构造)

    题意:给定两个数,表示一个图的点数和边数,让你构造出一个图满足 1-  n 的最短路是素数,并且最小生成树也是素数. 析:首先 1 - n 的最短路,非常好解决,直接 1 连 n 就好了,但是素数尽量 ...