AngularJS_4 Dependency Injection(依赖注入)

(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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值