angular js中的依賴注入是什麼？

時間 2020-02-11

標籤 angular 依賴注入什麼欄目 AngularJS 简体版

原文原文鏈接

這裏是修真院前端小課堂，每篇分享文從html

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】前端

八個方面深度解析前端知識/技能，本篇分享的是：segmentfault

【angular js中的依賴注入是什麼？】設計模式

【JS-7】數組

angular js中的依賴注入是什麼？ app

分享人：朱士峯 ide

目錄函數

1.背景介紹 this

2.知識剖析編碼

3.常見問題

4.解決方案

5.編碼實戰

6.擴展思考

7.參考文獻

8.更多討論

一.背景介紹

依賴注入式AngularJS的重要特性之一，依賴注入簡化了Angular解析模塊/組件之間依賴的過程。

什麼是依賴注入

wiki 上的解釋是：依賴注入（Dependency Injection，簡稱DI）是一種軟件設計模式，在這種模式下，

一個或更多的依賴（或服務）被注入（或者經過引用傳遞）到一個獨立的對象（或客戶端）中，而後成爲了該客戶端狀態的一部分。

該模式分離了客戶端依賴自己行爲的建立，這使得程序設計變得鬆耦合，並遵循了依賴反轉和單一職責原則。與服務定位器模式形

成直接對比的是，它容許客戶端了解客戶端如何使用該系統找到依賴 .

一句話 --- 沒事你不要來找我，有事我會去找你。

二.知識剖析

angular依賴注入機制

AngularJS 提供了5個核心組件用來做爲依賴注入：

value

factory

service

provider

constant

$provide (供應商)

供應商==>泛指provider

服務==>泛指service

provider==>provider()方法建立的東東

service==>service()方法建立的東東

$provide服務負責告訴Angular如何創造一個新的可注入的東西：即服務。服務會被叫作供應商的東西來定義，咱們可使用$provide來建立一個供應商。

咱們須要使用$provide中的provider()方法來定義一個供應商，同時也能夠經過要求$provide被注入到一個應用的config函數中來得到$provide服務。看圖

看一個例子：

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

};

});

定義供應商的方法

一、Constant

Constant定義常量Constant定義的值不該該被改變，它能夠被注入到任何地方，但不能被裝飾器(decorator)裝飾

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

app.config(function ($provide) {

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

});

語法糖：

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

二、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');

三、Service

Service是一個可注入的構造器，在AngularJS中它是單例的，用它在Controller中通訊或者共享數據都很合適.

在service裏面能夠不用返回東西，由於AngularJS會調用new關鍵字來建立對象。

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

app.config(function ($provide) {

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

this.title = 'The Matrix';

});

p語法糖：

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

this.title = 'The Matrix';

});

四、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就會幫你注入它的供應商。

AngularJS分兩個階段運行咱們的用 – config階段和run階段。config階段是咱們設置任何的provider的階段。

它也是咱們設置任何的指令，控制器，過濾器以及其它東西的階段。在run階段，AngularJS會編譯你的DOM並啓動咱們的應用。

三.常見問題