BlogJava-云自无心水自闲-随笔分类-AngularJS

使用AngularJS与服务器通讯

云自无心水自闲 — Fri, 27 Feb 2015 10:39:00 GMT

先给一个例子：
$http. get('/remote/item' ). then(function(response) {
console.log('成功。');
}, function(errResponse) {
console. error('出错.' );
});

一。介绍Promise
在这个例子中，$http.get()函数返回了一个Promise对象, 有了这个对象，我们才能很方便地直接在后面添加then函数的定义。
Promise对象在AngularJS中是一个非常重要的存在。它提供了强大的功能和便利性。

1。异步性
从定义的语法上看，操作似乎是同步的，但是Promise的工作其实是异步的，只有在服务端返回数据后，后续的函数才会被调用。这是一个事件驱动，非阻塞式的框架。

2。它避免了其它框架的嵌套回调函数的缺点。
－所有异步任务都会返回一个Promise对象
－每个Promise对象都有一个then函数，then函数有两个参数，分别是成功处理函数和失败处理函数
－失败处理函数和成功处理函数都只会在异步处理完成后被调用一次
－then函数也会返回Promise对象，这样，我们可以把多个函数串连起来成为一个函数链
－成功处理函数和失败处理函数的返回值可以被传递到函数链下一个的函数中
－如果在成功（或者失败)处理函数中，又开始了一个异步调用，那么函数链中的函数将会在这个异步调用结束后才开始

二。异步链式调用的后续处理
假如我们定义了如下的函数链：
$http.get('/item').then(s1, e1).then(s2, e2).then(s3, e3);
我们如何自主的根据函数链中每个函数的运行结果，决定触发后续函数的成功处理函数或者失败处理函数呢？
比如说，在s1处理过程中，发生问题，于是我们触发了e2, 但是在e2处理完后，我们又想触发s3.
AnguarJS提供了$q来满足这样的需求。
如果我们想触发函数链中下一个函数的成功处理，我们只需要最后给出一个返回值，有了返回值，AngularJS会认为函数执行正确，自动调用下一个函数中的成功处理
如果想触发失败处理，那么可以简单地返回$q.reject(data)，这样就会触发下一个函数的失败处理

云自无心水自闲 2015-02-27 18:39 发表评论

AngularJS中的依赖注入和服务(service)

云自无心水自闲 — Mon, 09 Feb 2015 11:28:00 GMT

在前文（http://www.blogjava.net/usherlight/archive/2015/02/01/422633.html）中我们曾经介绍过，定义controller时，需要2个参数，第一个参数是controller的名称，第二个参数是一个数组，数组的最后一个元素将是controller的函数，前面的参数是controller的依赖项。我们现在就来仔细分析一下其中的具体过程。

先给一个例子：

angular. module('notesApp' , [])
. controller('MainCtrl' , ['$log' , function($log) {
var self = this;
self. logStuff = function() {
$log. log('The button was pressed' );
};
}])

在这个例子中可以看到，我们在第一个参数中用字符串（服务名称）添加了一个依赖项。当我们通过字符串声明了这一个服务之后，我们就可以把它当作一个变量注入到函数中。AngularJS会自动查找字符串名称对应的服务名，按照顺序将其注入到函数中。

myModule.controller("MainCtrl", ["$log", "$window", function($l, $w) {}]);
在这个例子中，$log, $windows是AngularJS自带的两个服务，在数组中通过名称声明后，会被注入到函数的两个参数中。
比较常用的AngularJS自带的服务有：$window, $location, $http等

从上面的例子中可以看出，AngularJS的设计思想就是不要在函数中自己去实例化或者通过其它途径来获取服务的实例，而是声明需要的对象，由AngularJS来注入具体的实例。

创建自己的服务
什么时候应该创建服务，而不是controller呢？
1。需要重用的时候
2。需要保留应用级的状态。这是非常重要的一点，controller是会不断地被创建和销毁的，如果需要保存应用级的状态，就需要使用service
3。和页面显示无关
4。需要和第三方服务整合
5。缓存

服务是会被延迟加载的，也就是说只有在第一次被引用的时候，才会被创建。
服务将会被定义一次，也只会被实例化一次。

云自无心水自闲 2015-02-09 19:28 发表评论

AngularJS的一些使用方法和技巧（2）

云自无心水自闲 — Tue, 03 Feb 2015 11:36:00 GMT

07. ng-repeart

a. 在循环map的时候，会自动根据键值进行排序。

b. 一些自带的变量，$first(是否是第一个), $last(是否是最后一个), $middle(是否是中间的), $index(下标，根据键值排序后的下标), $even, $odd

08. 自己定义新变量时不要使用$$开头。

09. 可以使用track-by表达式来优化对DOM的操作，对DOM对象使用从数据库取得的ID来进行标记，这样的话，当我们重复多次从数据库中取出相同的数据的时候，DOM对象就能够被重用。

10. 数据双向绑定的好处

a. 如果我们想改变页面Form中的数值，我们不需要在Javascript中，根据ID或者名称来查找相应的Form控件，只需要改变Controller变量的值，不需要JQuery的Selector,也不需要findElementByID

b. 如果我们想在javascript中获取Form控件的值，在控件的变量中就能直接获得。

11. 使用ng-submit比在button上使用ng-click要好一些。HTML的表单的提交有多种方式，比如在输入域中按回车键就会触发ng-submit，而不会触发button的ng-click事件。

12. 在ng-model中，可以直接引用一个对象,比如：，而不需要事先在model中以self.user={}定义。在AngularJS中，使用了ng-model的话，AngularJS在初始化数据绑定的时候，自动创建其中的对象和键值。在刚才的例子中，一旦用户开始在输入域中键入第一个字母，用户user就会被自动创建。

13. 推荐使用将相关数据集中到一个对象的方式来进行数据绑定，比如，用户名和密码，推荐使用：

而不是：

云自无心水自闲 2015-02-03 19:36 发表评论

AngularJS的一些使用方法和技巧（1）

云自无心水自闲 — Sun, 01 Feb 2015 11:19:00 GMT

1. AngularJS的module函数有两种用法，

a. 定义一个module, 需要传入2个参数，module('moduleName', []), 第一个参数是新的module名称，第二个参数是新module所依赖的module数组。

b. 载入一个module, 只需要1个参数，module('moduleName'), 唯一的一个参数指定要载入的module名称。

2. 使用controller函数来定义一个控制器(controller), 用ng-controller将控制器绑定到具体的HTML组件上。定义控制器的controller函数也需要2个参数，第一个是控制器名称，第二个参数同样也是一个数组，数组的最后一个元素就是controller本身的函数，前面的元素用字符串的形式指定其需要的依赖项。如果没有依赖项，那就只需要定义函数。比如：

angular.module('app1', [])

.controller('mainControl', [function() {

console.log('controller created.');

}]);

3. 在controller函数中用var定义的局部变量，在HTML中是不可见的。

4. 推荐在controller函数中尽量避免直接引用this, 比较好的做法是使用代理。原因是一个函数中的this关键词在被外部调用的时候，是会被覆盖掉的。这样的话，在函数内部和外部的this会是完全不同两个对象。

代理用法示例：

angular.module('app1', [])

.controller('mainControl', [function() {

var self = this;

self.message = 'Hello world';

self.changeMessage = function() {

self.message = 'Goodbye.';

};

}]);

5. ng-bind与双大括号的区别, ng-bind和{{}}可以说基本上是可以互相替换的，但是也有区别。区别在于：AngularJS在启动的时候就会执行ng-bind, 而{{}}的替换时间会稍晚一些。有可能发现页面在加载的时候，双括号被一闪而过地替换掉（只在页面初次加载的时候发生）。但是ng-bind就没有这个问题。
6. ng-cloak可以用于解决双括号闪现的问题。

云自无心水自闲 2015-02-01 19:19 发表评论

AngularJS的加载执行过程

云自无心水自闲 — Sat, 31 Jan 2015 12:36:00 GMT

1. HTML页面的加载，这会触发加载页面包含的所有JS (包括 AngularJS)

2. AngularJS启动，搜寻所有的指令(directive)

3. 找到ng-app，搜寻其指定的模块(Module)，并将其附加到ng-app所在的组件上。

4. AnguarJS遍历所有的子组件，查找指令和bind命令

5. 每次发现ng-controller或者ng-repeart的时候，它会创建一个作用域(scope)，这个作用域就是组件的上下文。作用域指明了每个DOM组件对函数、变量的访问权。

6. AngularJS然后会添加对变量的监听器，并监控每个变量的当前值。一旦值发生变化，AngularJS会更新其在页面上的显示。

7. AngularJS优化了检查变量的算法，它只会在某些特殊的事件触发时，才会去检查数据的更新，而不是简单地在后台不停地轮询。

云自无心水自闲 2015-01-31 20:36 发表评论