AngularJS 中的提供者
我們將介紹 AngularJS 中的 provider 以及 AngularJS 中的 provider、factory 和 service 之間的區別。
AngularJS 中的提供者
提供者是一種服務。provider() 函式允許我們建立一個包含 $get 方法的可配置服務。
讓我們想象建立一個使用 API 的 Web 應用程式；如果我們需要在我們的應用程式中設定一個 API 金鑰來訪問來自 API 的資料，我們可以在 module 配置中設定它並使用 $provide 服務將輸入傳遞給提供者。
讓我們建立一個帶有提供者的模組，該提供者將在控制器呼叫提供者時返回一個值。首先，我們將使用 script 標籤新增 AngularJS 庫和 app.js 檔案。
# AngularJS
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="app.js"></script>
</head>
我們將使用 ng-app 定義 AngularJS 應用程式，使用 ng-controller 定義控制器。
# AngularJS
<body ng-app="myApp">
<div ng-controller="myController"></div>
</body>
在 app.js 中，我們將建立我們的模組。
# AngularJS
var module = angular.module("myApp", []);
我們將使用 provider；提供者顧名思義就是提供值，所以在這種情況下，我們將提供一個字串值。提供者定義了一種方法：$get。
提供者可以有多個方法，但 Angular 呼叫是 $get。因此，我們將為返回字串值的 $get 方法分配一個函式。
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
return "Value from Provider";
};
});
我們將在我們的控制器中注入提供者，並從提供者中注入 console.log() 值。
# AngularJS
module.controller("myController", function(myProvider){
console.log(myProvider);
});
輸出：
如上例所示，我們從控制檯中的提供者那裡得到了準確的值。這樣就成功了，我們可以使用提供者返回一個值並將其注入我們的方法中。
重要的是要注意，所有的提供者都是一樣的，服務和工廠也是一樣的。但是無論我們注入提供者多少次，該值都只會被執行一次。
我們可以通過建立另一個控制器來測試它，如下所示。
# AngularJS
module.controller("myController", function(myProvider){
console.log("First Controller:" + myProvider);
});
module.controller("myController2", function(myProvider){
console.log("Second Controller:" + myProvider);
});
我們將在提供程式的 $get 方法中使用 console.log() 來記錄提供程式內的值。因此，無論何時執行此提供程式，它都會記錄相同的值。
通過這種方式，我們可以檢查我們的提供程式是執行一次還是兩次。
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
console.log("Provider Executed!")
return "Value from Provider";
};
});
讓我們在 index.html 中為我們的第二個控制器新增 div。
# AngularJS
<div ng-controller="myController"></div>
<div ng-controller="myController2"></div>
輸出：
上面的例子展示了提供者只執行了一次，但是提供者的值被注入到兩個控制器中。我們從控制器中得到了兩條輸出訊息。
重要的是要注意 Angular 在注入提供程式時執行它，呼叫 $get 並儲存並記住該值。每次注入提供程式時，它都會返回第一次提取的值。
AngularJS 中 Provider 和 Factory 之間的區別
讓我們建立一個與我們建立的提供程式具有相同功能的 factory。現在我們將複製我們的提供者並將其更改為工廠。
工廠沒有方法 $get，所以我們將直接呼叫工廠中的函式並返回一個值。這是唯一與提供者不同的部分。
我們將把我們的工廠注入到兩個控制器中。app.js 中的程式碼如下所示。
# AngularJS
var module = angular.module("myApp", []);
module.factory("myFactory", function(){
console.log("Factory Executed!")
return "Value from Factory";
});
module.controller("myController", function(myFactory){
console.log("First Controller:" + myFactory);
});
module.controller("myController2", function(myFactory){
console.log("Second Controller:" + myFactory);
});
輸出：
如上例所示，我們得到相同的結果。提供者和工廠都做同樣的事情，但工廠可以用更少的程式碼來完成。
AngularJS 中 Provider 和 Service 之間的區別
讓我們建立一個與我們建立的提供程式具有相同功能的服務。現在我們將複製我們的提供者並將其更改為服務。
服務沒有方法 $get，所以我們將直接呼叫我們服務中的函式，就像工廠一樣，並返回一個值。這是唯一與提供者不同的部分。
我們將把我們的服務注入到兩個控制器中。app.js 中的程式碼如下所示。
# AngularJS
var module = angular.module("myApp", []);
module.service("myService", function(){
console.log("Service Executed!");
this.getValue = function(){
return "Object from Service";
}
});
module.controller("myController", function(myService){
console.log("First Controller:" + myService.getValue());
});
module.controller("myController2", function(myService){
console.log("Second Controller:" + myService.getValue());
});
輸出：
如上例所示，我們得到相同的結果。提供者和服務都做同樣的事情，但是服務返回一個物件而不是一個字串。
要點是何時使用 provider、factory 和 service。如果我們想返回一個值而不是一個物件，我們就不能使用服務。
我們必須使用工廠而不是服務，但我們將使用工廠來返回物件而不是值。提供者允許我們進行配置時間。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn