angular js中的依賴注入是什麼？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【angular js中的依賴注入是什麼？ 】
【JS-7】
angular js中的依賴注入是什麼？
分享人：朱士峰
目錄
1.背景介紹
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');
};
});
定義供應商的方法
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';
});
});
p語法糖：
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就會幫你注入它的供應商。
AngularJS分兩個階段執行我們的用 – config階段和run階段。config階段是我們設定任何的provider的階段。
它也是我們設定任何的指令，控制器，過濾器以及其它東西的階段。在run階段，AngularJS會編譯你的DOM並啟動我們的應用。
三.常見問題
1. factorry和value等服務與provider都是提供服務，為什麼還有人要使用provider?
2.請描述下factory和service的區別
3.依賴注入有哪幾種方式？
四.解決方案
問題1回答：
provider允許我們進行一些配置。
在前面我們已經提到過當你通過provider（或者其他簡寫方法）建立一個服務時，你實際上建立了一個新的provider，
它將定義我們的服務如何被建立。這些provider可以被注入到config函式中，我們可以和它們進行一些互動。
問題2回答：
factory是普通function，而service是一個構造器(constructor)，
Angular在呼叫service時會用new關鍵字，而呼叫factory時只是呼叫普通的function，
所以factory可以返回任何東西，而service可以不返回.factory可以返回任何東西，
它實際上是一個只有$get方法的provider
問題3回答：
依賴注入有三種方式
1.通過陣列標註在方法的引數中宣告依賴
2.使用控制器構造方法的$inject屬性注入依賴
3.通過方法引數隱式推斷依賴
五.編碼實戰
六.拓展思考
這些依賴元件的本質是什麼？
factory，service以及value全部都是用來定義一個provider的簡寫，
它們提供了一種方式來定義一個provider而無需輸入所有的複雜的程式碼。
七.參考文獻
參考一：
https://segmentfault.com/a/1190000003096933
AngularJS中的Provider們：Service和Factory等的區別
參考二：
http://www.html-js.com/article/1980
理解AngularJS中的依賴注入
八.更多討論
---------------------
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地