(This is the note of angular course in HKUST.)
为了方便整理思路和回忆,这篇博客还是不写蹩脚的英文了。
AngularJS有多种可用的代码形式来实现依赖注入,最清晰明确的是下面这种——Inline array annotation:
module.controller('MyController',['$scope','myFactory',function($scope,myFactory){...}])
module为控制全页面的模块,通过其controller接口声明一个新的控制器。该接口包含两个参数,第一个为该控制器的名称,第二个为依赖注入列表。上述例子中,一个注入了三个实体,分别是scope模块,工厂类与本地函数(本地函数可以调用前两者)。在形式上,后续三个实体全是以注入形式声明,反过来,该控制器依赖于这三个实体。理论上三个实体的代码都可以在远端定义(这里第三个实体,即本地功能实现直接以代码形式给出),控制器本身并不清楚三个实体的定义,这种形式更利于架构解耦。
scope模块和本地函数的功能都很清楚了,实现变量绑定和本地功能。其中scope模块,由于其便利性,一般都会注入。可以发现,这两个实体主要只是借用了依赖注入的形式,也可以用传统形式实现。应该是出于架构一直上的考虑,angular选择了全部采用依赖注入。
首先,得了解Angular Service。它是lazily instantiated,只在需要的时候实例化。各个Service可以存储在系统的不同位置。其代码可以通过依赖注入的方式,在整个App范围内共享。Angular提供很多Built-in Service(内建),用$
符号开头(比如我们常用的scope service),常用的如下:
$http,$scope,$rootScope,$location,$parse,$templateCache,$animate,$injector
我们可以通过Angular预留的接口实现自定义的Service,一共有的有service();factory();provider();constant();value();
五个接口用于实现不同功能的Service,常用的有前两个,它们的定义方式如下:
angular.module('myApp')
.factory('myFactory', function() {
var myfac = {};
var dishes = [...];
myfac.getDishes = function() {
return dishes;
};
myfac.getDish = function(index) {
return dishes[index];
};
return myfac;
}
.service('myService', function() {
var dishes = [...];
this.getDishes = function(){
return dishes;
};
this.getDish = function(index)
{
return dishes[index];
};
});
它们的使用方式相同,以最开始的定义举例,在控制器函数内,可用下面的方式调用:
$scope.dishes = myFactory.getDishes()
$scope.favoriteDish = myService.getDish(0)
关于Service、Factory与Provider的对比,网上有一篇很详细的讲解,请参考——http://blog.csdn.net/lglgsy456/article/details/36902179