angularJS中的依赖注入

大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。

今天给大家带来的是:angularJS中的依赖注入

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

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

依赖注入产生的背景:

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

解决方案:

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

了解了什么是依赖注入,就是说高层类(5岁小孩)应该依赖底层基础设施(家长)来提供必要的服务。 依赖注入不是目的,它是一系列工具和手段,最终的目的是帮助我们开发出松散耦合(loose coupled)、 可维护、可测试的代码和程序

2.知识剖析

依赖注入的原理:

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

依赖注入有什么用

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

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

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

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

mainApp.value("defaultInput", 5);

mainApp.controller('CalcController', function( defaultInput) {

});

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

.factory('HelloAngular',function () {//factory方法要简单一点

var name = '锤子';

function getName() {//函数

return name;

}

return{

getName:getName

}

}

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

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

this.$get = function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b;

}

return factory;

};

});

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

//服务

.service('service',function () {

return [1,2,3,4]  //只能定义对象,不能定义基本的如数字,字符串

// 1111

})

3.常见问题

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

4.解决方案

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

2、显式注入声明 AngularJS提供了显式的方法来明确定义一个函数在被调用时需要用到的依赖关系。 通过这种方法声明依赖,即使在源代码被压缩、参数名称发生改变的情况下依然能够正常工作。

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

5.编码实战

通过工厂可以让两个不同的controller里面的值双向绑定

angular.module('App',[])

//服务

.service('service',function () {

return [1,2,3,4]  //只能定义对象,不能定义基本的如数字,字符串

// 1111

})

//工厂 都可以定义

.factory('factory',function () {

return'李四'

})

//通过工厂使他们共享

.factory('Data',function () {

return{

ssss:'共享'

}

})

.controller('firstcontroller',['$scope','factory','service','Data',function ($scope,factory,service,Data) {

console.log(service)

console.log(factory)

$scope.name='张三'

$scope.Data= Data

}])

.controller('datacontroller',['$scope','Data',function ($scope,Data) {

$scope.Data= Data

}])

6.扩展思考

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

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

7.参考文献

参考:深究依赖注入

8.更多讨论

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

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


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

推荐阅读更多精彩内容

  • 1.背景介绍 今天给大家讲的是angular的依赖注入,首先,我们要介绍一下什么是依赖注入 依赖注入,我们打个比喻...
    过去的声音阅读 219评论 0 0
  • 1.背景介绍 以前原始社会,我们需要斧子,然后由于还没有社会分工,只能自己打磨一把来使用,对应在程序上是我们需要一...
    LMmx阅读 339评论 0 2
  • 仿佛双脚站在一片冰原上,血液从下往上逐渐凝固,只剩下心脏还能感到时不时一阵抽搐,头颅和眼眶一阵阵发热。 上一次感到...
    面包婶阅读 324评论 1 0
  • 古人云,八卦之心、人皆有之。顾嫣发来消息,询问她相亲事宜,隔着屏幕都能感受到顾会计想看现场直播的迫切心情。 一想到...
    毒鸡汤少女清浅浅阅读 270评论 0 0
  • 【0918晨读感悟】——麦肯锡方法 周一早会上总经理宣布,程静升任客服部经理。 这是她入职公司一年以来的第三次升职...
    楚冰焰阅读 351评论 0 0