AngularJS中的依赖注入


1.背景介绍

依赖注入式AngularJS的重要特性之一,依赖注入简化了Angular解析模块/组件之间依赖的过程。

什么是依赖注入

wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖.

     一句话--- 没事你不要来找我,有事我会去找你。

2.知识剖析

angular依赖注入机制

AngularJS提供了5个核心组件用来作为依赖注入: 

    value

    factory

    service

    provider

    constant

$provide (供应商)

$provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务。服务会被叫做供应商的东西来定义,我们可以使用$provide来创建一个供应商。我们需要使用$provide中的provider()方法来定义一个供应商,同时也可以通过要求$provide被注入到一个应用的config函数中来获得$provide服务。

$provide是一个服务,在Auto模块中.这个服务下面的方法用来定义供应商。而供应商是用来提供服务,服务就是我们说的依赖注入的具体

看一个例子:     

   angular.module(‘app’,[]).config(function($provide) {

$provide.provider('greeting', function() {

this.$get = function() {

return function(name) {

alert("Hello, " + name);

};

};

});

});

在上面的例子中我们为一个服务定义了一个叫做greeting的新provider。 我们可以把一个叫做greeting的变量注入到任何可注入的函数中(例如控制器)然后Angular就会调用这个provider的$get函数来返回这个服务的一个实例。在上面的例子中,被注入的是一个函数,它接受一个参数并且根据这个参数alert一条信息。我们可以像下面这样使用它:

app.controller('MyCtrl', function($scope, greeting) {

$scope.onClick = function() {

greeting('Ford Prefect');

};

});

定义供应商的方法


1、Constant


Constant定义常量,Constant定义的值不应该被改变,它可以被注入到任何地方,但是不能被装饰器(decorator)装饰

var app = angular.module('app', []);

app.config(function ($provide) {

$provide.constant('myConstant', 'The Matrix');

});

语法糖:

     app.constant('myConstant', 'The Matrix');

2、Value

Value可以是string,number甚至function,它和constant的不同之处在于,它可以被修改,不能被注入到config中,但是它可以被decorator装饰

var app = angular.module('app', []);

app.config(function ($provide) {

$provide.value('myValue', 'The Matrix')

});

 语法糖:

  app.value('myValue', 'The Matrix');

3、Service

Service是一个可注入的构造器,在AngularJS中它是单例的,用它在Controller中通信或者共享数据都很合适.在service里面可以不用返回东西,因为AngularJS会调用new关键字来创建对象。

var app = angular.module('app' ,[]);

app.config(function ($provide) {

$provide.service('myService', function () {

this.title = 'The Matrix';

});

});

  语法糖:

app.service('myService', function () {

this.title = 'The Matrix';

});

4、Factory

Factory是一个可注入的function,它和service的区别就是:factory是普通function,而service是一个构造器(constructor),  Angular在调用service时会用new关键字,而调用factory时只是调用普通的function,所以factory可以返回任何东西,而service可以不返回.factory可以返回任何东西,它实际上是一个只有$get方法的provider

var app = angular.module('app', []);

app.config(function ($provide) {

$provide.factory('myFactory', function () {

return {

title: 'The Matrix'

}

});

});

语法糖:

app.factory('movie', function () {

return {

title: 'The Matrix'

}

});

Provider

provider是value,Service,Factory的老大,除了constant其它都是provider的封装。

provider必须有一个$get方法,当然也可以说provider是一个可配置的factory

      app.provider('greeting', function() {

var text = 'Hello, ';

this.setText = function(value) {

text = value;

};

this.$get = function() {

return function(name) {

alert(text + name);

};

};

});

app.config(function(greetingProvider) {

greetingProvider.setText("Howdy there, ");

});

app.run(function(greeting) {

greeting('Ford Prefect');

});

注意这里config方法注入的是greetingProvider,上面定义了一个供应商叫greeting,但是注入到config中不能直接写greeting,   因为前文讲了注入的那个东西就是服务,是供应商提供出来的,而config中又只能注入供应商(两个例外是$provide和$injector),  所以用驼峰命名法写成greetingProvider,Angular就会帮你注入它的供应商。  factorry和value等服务与provider都是提供服务,为什么还有人要使用provider。答案是provider允许我们进行一些配置。   在前面我们已经提到过当你通过provider(或者其他简写方法)创建一个服务时,你实际上创建了一个新的provider,   它将定义我们的服务如何被创建。这些provider可以被注入到config函数中,我们可以和它们进行一些交互。如上文例子。

    AngularJS分两个阶段运行我们的用 – config阶段和run阶段。config阶段是我们设置任何的provider的阶段。   它也是我们设置任何的指令,控制器,过滤器以及其它东西的阶段。在run阶段,AngularJS会编译你的DOM并启动我们的应用。

7.参考文献

以上文字是对以下文献学习所做的笔记,感谢作者的总结。

参考一:https://segmentfault.com/a/1190000003096933     Service和Factory等的区别

参考二:http://www.html-js.com/article/1980      理解AngularJS中的依赖注入

问题:什么时候使用service 

什么时都可以,service和factory功能相同

2、service和factory的区别

factory 是普通函数,可以返回任何东西。service 是构造函数,可以不反回东西。功能相同。

3、controller注入需要注意什么

controller 有一个安全注入的说法。在有代码压缩需要的情况下,需要手动注入服务。防止压缩过程出现乱码,引起注入错误。

angular.module('myApp',[])

.controller('myCtrl',myCtrl)

.factory('modelBox', modelBox);

myCtrl.$inject=['$scope','modelBox'];

function myCtrl($scope,modelBox){

var hello ='hello ';

   $scope.button =function () {

modelBox.confirm (hello,function () {

modelBox.alert(‘welcome !’);

        })

}

}

function modelBox() {

return {

alert:function (message, callback) {

bootbox.alert({

title:"提示",

                backdrop:'static',

                message:"

" + message +"

",

                buttons: {

ok: {

label:'确定',

                        className:'btn-success'

                    }

},

                callback:function () {

if (callback) {

callback();

                    }

}

});

        },

        confirm:function (message, callback, cancel) {

bootbox.confirm({

message:"

" + message +"

",

                title:"提示",

                backdrop:'static',

                onEscape:true,

                buttons: {

confirm: {

label:'确定',

                        className:'btn-danger'

                    },

                    cancel: {

label:'取消',

                        className:'btn-success'

                    }

},

                callback:function (result) {

if (result) {

callback();    //callback 为传入的回调函数

                    }else if (!result && cancel) {

cancel();

                    }

}

});

        }

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容