【成都小课堂188期】angular 依 赖 注入解析

1.背景介绍

以前原始社会,我们需要斧子,然后由于还没有社会分工,只能自己打磨一把来使用,对应在程序上是我们需要一个功能的时候只能自己创建,然后使用new等关键字来调用方法。 然后工业社会阶段,我们需要使用斧子的时候,只需要找到工厂,购买斧子就可以使用,共产主义社会,需要斧子的时候甚至不需要购买,直接坐等社会提供。 依赖注入的意思就是我们需要的东西不是我们自己创建的,而是第三方提供的,我们只需要引用就可以使用了。 不需要的时候就不引用它。

依赖注入产生的背景:

传统应用程序通常是在类内部执行代码中主动创建这个类所依赖的其它对象, 从而导致类与类之间发生紧密耦合,使得类难于测试和隔离,最终导致系统的扩展和维护异常困难。

解决方案:

依赖注入用来解决组件之间依赖关系、配置及生命周期管理, 通过转移对象控制权,可以解决类之间的耦合问题, 对象与对象之间是松散耦合关系,更重要的是使得应用程序体系结构变得非常灵活, 很好的体现了面向对象的设计法则之一---依赖设计原则

2.知识剖析

依赖注入的原理:

程序运行过程中,如需另一个对象协作(调用它的方法、访问他的属性)时,无须在代码中创建被调用者,而是依赖于外部容器的注入, 调用者仅通过声明某个组件就可以获得组件的控制权,而对该组件的依赖关系管理、查找、加载由外部完成。

依赖注入有什么用

作用一:可以使我们能够轻松对组件进行测试

作用二:降低代码的逻辑复杂度

angular提供了几种很好的依赖注入机制,以下5个核心组件用来作为依赖注入 value、factory、service、provider、constant、 值 工厂 服务 提供者 常值

值(value)是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器。

var mainApp = angular.module("mainApp", []);

//create a value object as "defaultInput" and pass it a data.

mainApp.value("defaultInput", 5);

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {

$scope.number = defaultInput;

$scope.result = CalcService.square($scope.number);

$scope.square = function() {

$scope.result = CalcService.square($scope.number);

}

});

工厂(factory)是用于返回函数的值。它根据需求创造值,每当一个服务或控制器需要。它通常使用一个工厂函数来计算并返回对应值

var mainApp = angular.module("mainApp", []);

mainApp.factory('MathService', function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b

}

return factory;

});

mainApp.service('CalcService', function(MathService){

this.square = function(a) {

return MathService.multiply(a,a);

}

});

服务(service)是一个单一的JavaScript包含了一组函数对象来执行某些任务。服务使用service()函数,然后注入到控制器的定义。

var mainApp = angular.module("mainApp", []);

mainApp.service('CalcService', function(MathService){

this.square = function(a) {

return MathService.multiply(a,a);

}

});

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {

$scope.number = defaultInput;

$scope.result = CalcService.square($scope.number);

$scope.square = function() {

$scope.result = CalcService.square($scope.number);

}

});

提供者(provider)所使用的AngularJS内部创建过程中配置阶段的服务,工厂等(相AngularJS引导自身期间)。下面提到的脚本,可以用来创建,我们已经在前面创建MathService。提供者是一个特殊的工厂方法以及get()方法,用来返回值/服务/工厂。

var mainApp = angular.module("mainApp", []);

mainApp.config(function($provide) {

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

this.$get = function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b;

}

return factory;

};

});

});

常量(constant)用于通过配置相位值考虑事实,值不能使用期间的配置阶段被传递。

mainApp.constant("configParam", "constant value");

3.常见问题

1、依赖注入的几种方法如何使用

2、angular依赖注入的时候,controller里面注入的参数和function的参数列表顺序问题

4.解决方案

1.推断式注入声明 如果没有明确的声明, AngularJS会假定参数名称就是依赖的名称。 请注意,这个过程只适用于未经过压缩和混淆的代码,因为AngularJS需要原始未经压缩的参数列表来进行解析 当AngularJS实例化这个模块时,会查找greeter并自然而然地把对它的引用传递进去

2、显式注入声明 AngularJS提供了显式的方法来明确定义一个函数在被调用时需要用到的依赖关系。 通过这种方法声明依赖,即使在源代码被压缩、参数名称发生改变的情况下依然能够正常工作。 我们给我们的函数设置的参数名称分别是renamed$scope和renamedGreeter,然后我们在后面使用 MyController.$inject=['$scope','greeter']; 显式的将我们需要的依赖注入到MyController函数中; 所以在MyController函数中,renamedscope代表scope,MyController.inject=[′scope’, ‘greeter’];代表greeter

3 行内注入声明 AngularJS提供的注入声明的最后一种方式,是可以随时使用的行内注入声明。 允许我们在函数定义时从行内将参数传入。此外,它可以避免在定义过程中使用临时变量。 这种方式其实是一个语法糖,它同前面提到的通过$inject属性进行注入声明的原理是完全一样的

5.编码实战

计算两个数乘积的小例子

var mainApp = angular.module("mainApp", []);

mainApp.config(function($provide) {

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

this.$get = function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b;

};

return factory;

};

});

});

mainApp.value("defaultInput", 5);

mainApp.factory('MathService', function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b;

};

return factory;

});

mainApp.service('CalcService', function(MathService){

this.square = function(a) {

return MathService.multiply(a,a);

}

});

mainApp.controller('CalcController', function($scope,$injector, CalcService, defaultInput,MathService) {

$scope.number = defaultInput;

$scope.result = CalcService.square($scope.number);

$scope.square = function() {

$scope.result = CalcService.square($scope.number);

};

$scope.square2 = function() {

MathService= $injector.get("MathService");

$scope.result2=MathService.multiply($scope.number,$scope.number2);

};

$scope.square2 = function() {

$scope.result2=MathService.multiply($scope.number,$scope.number2);

}

});

6.扩展思考

这些依赖组件的本质是啥?

factory,service以及value全部都是用来定义一个provider的简写, 它们提供了一种方式来定义一个provider而无需输入所有的复杂的代码。

7.参考文献

参考:详解依赖注入

参考:理解依赖注入

参考:深究依赖注入

参考:深究依赖注入

8.更多讨论

AngularJS中的依赖注入组件的应用场景?

AngularJS中的依赖注入与不用依赖注入的其他框架相比,有何优点?

9、课堂后讨论:

(1)value、constant的差异性:

前者值可以更改,后者不能,但是可以应用在配置文件中。

(2)service应用场景:

就任务来说,目前对http请求做成服务比较常用。

(3)显式注入声明的特点:

通过这种方法声明依赖,即使在源代码被压缩、参数名称发生改变的情况下依然能够正常工作。

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

推荐阅读更多精彩内容

  • 1.背景介绍 以前原始社会,我们需要斧子,然后由于还没有社会分工,只能自己打磨一把来使用,对应在程序上是我们需要一...
    LMmx阅读 342评论 0 2
  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 863评论 0 2
  • 也不知道为什么,突然想开这么个专题,自己总想把在这个城市生活的点点滴滴记录下来,希望能够引起有共同感受的人的...
    小猪de脚印阅读 186评论 0 0
  • 原创原创 2017-09-14 营养师 在知乎和微博上,大家问我最多的除了营养健康,就是加拿大注册营养师的相关问题...
    Annie大讲堂阅读 1,774评论 0 1
  • Be_Jessica阅读 211评论 0 0