【成都小課堂188期】angular 依 賴 注入解析

1.背景介紹

以前原始社會寄摆,我們需要斧子谅辣,然后由于還沒有社會分工,只能自己打磨一把來使用婶恼,對應(yīng)在程序上是我們需要一個功能的時候只能自己創(chuàng)建桑阶,然后使用new等關(guān)鍵字來調(diào)用方法。 然后工業(yè)社會階段勾邦,我們需要使用斧子的時候蚣录,只需要找到工廠,購買斧子就可以使用眷篇,共產(chǎn)主義社會萎河,需要斧子的時候甚至不需要購買,直接坐等社會提供。 依賴注入的意思就是我們需要的東西不是我們自己創(chuàng)建的虐杯,而是第三方提供的玛歌,我們只需要引用就可以使用了。 不需要的時候就不引用它擎椰。

依賴注入產(chǎn)生的背景:

傳統(tǒng)應(yīng)用程序通常是在類內(nèi)部執(zhí)行代碼中主動創(chuàng)建這個類所依賴的其它對象支子, 從而導(dǎo)致類與類之間發(fā)生緊密耦合,使得類難于測試和隔離达舒,最終導(dǎo)致系統(tǒng)的擴(kuò)展和維護(hù)異常困難值朋。

解決方案:

依賴注入用來解決組件之間依賴關(guān)系、配置及生命周期管理巩搏, 通過轉(zhuǎn)移對象控制權(quán)吞歼,可以解決類之間的耦合問題, 對象與對象之間是松散耦合關(guān)系塔猾,更重要的是使得應(yīng)用程序體系結(jié)構(gòu)變得非常靈活篙骡, 很好的體現(xiàn)了面向?qū)ο蟮脑O(shè)計法則之一---依賴設(shè)計原則

2.知識剖析

依賴注入的原理:

程序運(yùn)行過程中,如需另一個對象協(xié)作(調(diào)用它的方法丈甸、訪問他的屬性)時糯俗,無須在代碼中創(chuàng)建被調(diào)用者,而是依賴于外部容器的注入睦擂, 調(diào)用者僅通過聲明某個組件就可以獲得組件的控制權(quán)得湘,而對該組件的依賴關(guān)系管理、查找顿仇、加載由外部完成淘正。

依賴注入有什么用

作用一:可以使我們能夠輕松對組件進(jìn)行測試

作用二:降低代碼的邏輯復(fù)雜度

angular提供了幾種很好的依賴注入機(jī)制,以下5個核心組件用來作為依賴注入 value臼闻、factory鸿吆、service、provider述呐、constant惩淳、 值 工廠 服務(wù) 提供者 常值

值(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)是用于返回函數(shù)的值思犁。它根據(jù)需求創(chuàng)造值,每當(dāng)一個服務(wù)或控制器需要进肯。它通常使用一個工廠函數(shù)來計算并返回對應(yīng)值

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);

}

});

服務(wù)(service)是一個單一的JavaScript包含了一組函數(shù)對象來執(zhí)行某些任務(wù)激蹲。服務(wù)使用service()函數(shù),然后注入到控制器的定義江掩。

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內(nèi)部創(chuàng)建過程中配置階段的服務(wù)学辱,工廠等(相AngularJS引導(dǎo)自身期間)含蓉。下面提到的腳本,可以用來創(chuàng)建项郊,我們已經(jīng)在前面創(chuàng)建MathService馅扣。提供者是一個特殊的工廠方法以及get()方法,用來返回值/服務(wù)/工廠着降。

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)用于通過配置相位值考慮事實(shí)差油,值不能使用期間的配置階段被傳遞。

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

3.常見問題

1任洞、依賴注入的幾種方法如何使用

2蓄喇、angular依賴注入的時候,controller里面注入的參數(shù)和function的參數(shù)列表順序問題

4.解決方案

1.推斷式注入聲明 如果沒有明確的聲明交掏, AngularJS會假定參數(shù)名稱就是依賴的名稱妆偏。 請注意,這個過程只適用于未經(jīng)過壓縮和混淆的代碼盅弛,因?yàn)锳ngularJS需要原始未經(jīng)壓縮的參數(shù)列表來進(jìn)行解析 當(dāng)AngularJS實(shí)例化這個模塊時钱骂,會查找greeter并自然而然地把對它的引用傳遞進(jìn)去

2、顯式注入聲明 AngularJS提供了顯式的方法來明確定義一個函數(shù)在被調(diào)用時需要用到的依賴關(guān)系挪鹏。 通過這種方法聲明依賴见秽,即使在源代碼被壓縮、參數(shù)名稱發(fā)生改變的情況下依然能夠正常工作讨盒。 我們給我們的函數(shù)設(shè)置的參數(shù)名稱分別是renamed$scope和renamedGreeter解取,然后我們在后面使用 MyController.$inject=['$scope','greeter']; 顯式的將我們需要的依賴注入到MyController函數(shù)中; 所以在MyController函數(shù)中返顺,renamedscope代表scope,MyController.inject=[′scope’, ‘greeter’];代表greeter

3 行內(nèi)注入聲明 AngularJS提供的注入聲明的最后一種方式禀苦,是可以隨時使用的行內(nèi)注入聲明。 允許我們在函數(shù)定義時從行內(nèi)將參數(shù)傳入遂鹊。此外振乏,它可以避免在定義過程中使用臨時變量。 這種方式其實(shí)是一個語法糖稿辙,它同前面提到的通過$inject屬性進(jìn)行注入聲明的原理是完全一樣的

5.編碼實(shí)戰(zhàn)

計算兩個數(shù)乘積的小例子

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.擴(kuò)展思考

這些依賴組件的本質(zhì)是啥昆码?

factory,service以及value全部都是用來定義一個provider的簡寫邻储, 它們提供了一種方式來定義一個provider而無需輸入所有的復(fù)雜的代碼。

7.參考文獻(xiàn)

參考:詳解依賴注入

參考:理解依賴注入

參考:深究依賴注入

參考:深究依賴注入

8.更多討論

AngularJS中的依賴注入組件的應(yīng)用場景旧噪?

AngularJS中的依賴注入與不用依賴注入的其他框架相比吨娜,有何優(yōu)點(diǎn)?

9淘钟、課堂后討論:

(1)value宦赠、constant的差異性:

前者值可以更改,后者不能,但是可以應(yīng)用在配置文件中勾扭。

(2)service應(yīng)用場景:

就任務(wù)來說毡琉,目前對http請求做成服務(wù)比較常用。

(3)顯式注入聲明的特點(diǎn):

通過這種方法聲明依賴妙色,即使在源代碼被壓縮桅滋、參數(shù)名稱發(fā)生改變的情況下依然能夠正常工作。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末身辨,一起剝皮案震驚了整個濱河市丐谋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌煌珊,老刑警劉巖号俐,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異定庵,居然都是意外死亡吏饿,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門蔬浙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來找岖,“玉大人,你說我怎么就攤上這事敛滋⌒聿迹” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵绎晃,是天一觀的道長蜜唾。 經(jīng)常有香客問我,道長庶艾,這世上最難降的妖魔是什么袁余? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮咱揍,結(jié)果婚禮上颖榜,老公的妹妹穿的比我還像新娘。我一直安慰自己煤裙,他們只是感情好掩完,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著硼砰,像睡著了一般且蓬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上题翰,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天恶阴,我揣著相機(jī)與錄音诈胜,去河邊找鬼。 笑死冯事,一個胖子當(dāng)著我的面吹牛焦匈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播昵仅,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼缓熟,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了岩饼?” 一聲冷哼從身側(cè)響起荚虚,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎籍茧,沒想到半個月后版述,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡寞冯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年渴析,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吮龄。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡俭茧,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出漓帚,到底是詐尸還是另有隱情母债,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布尝抖,位于F島的核電站毡们,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏昧辽。R本人自食惡果不足惜衙熔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望搅荞。 院中可真熱鬧红氯,春花似錦、人聲如沸咕痛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽暇检。三九已至产阱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間块仆,已是汗流浹背构蹬。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留悔据,地道東北人庄敛。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像科汗,于是被迫代替她去往敵國和親藻烤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1.背景介紹 以前原始社會头滔,我們需要斧子怖亭,然后由于還沒有社會分工,只能自己打磨一把來使用坤检,對應(yīng)在程序上是我們需要一...
    LMmx閱讀 342評論 0 2
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)兴猩。ng-model 指令也可以:...
    壬萬er閱讀 863評論 0 2
  • 也不知道為什么,突然想開這么個專題早歇,自己總想把在這個城市生活的點(diǎn)點(diǎn)滴滴記錄下來倾芝,希望能夠引起有共同感受的人的...
    小豬de腳印閱讀 186評論 0 0
  • 原創(chuàng)原創(chuàng) 2017-09-14 營養(yǎng)師 在知乎和微博上,大家問我最多的除了營養(yǎng)健康箭跳,就是加拿大注冊營養(yǎng)師的相關(guān)問題...
    Annie大講堂閱讀 1,774評論 0 1
  • Be_Jessica閱讀 211評論 0 0