AngularJS 中的提供者

Rana Hasnain Khan 2023年1月30日 2022年4月20日
  1. AngularJS 中的提供者
  2. AngularJS 中 ProviderFactory 之間的區別
  3. AngularJS 中 ProviderService 之間的區別
AngularJS 中的提供者

我們將介紹 AngularJS 中的 provider 以及 AngularJS 中的 providerfactoryservice 之間的區別。

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 提供者的示例

如上例所示,我們從控制檯中的提供者那裡得到了準確的值。這樣就成功了,我們可以使用提供者返回一個值並將其注入我們的方法中。

重要的是要注意,所有的提供者都是一樣的,服務和工廠也是一樣的。但是無論我們注入提供者多少次,該值都只會被執行一次。

我們可以通過建立另一個控制器來測試它,如下所示。

# 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>

輸出:

angularjs 提供者第二個例子

上面的例子展示了提供者只執行了一次,但是提供者的值被注入到兩個控制器中。我們從控制器中得到了兩條輸出訊息。

重要的是要注意 Angular 在注入提供程式時執行它,呼叫 $get 並儲存並記住該值。每次注入提供程式時,它都會返回第一次提取的值。

AngularJS 中 ProviderFactory 之間的區別

讓我們建立一個與我們建立的提供程式具有相同功能的 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 factory 示例

如上例所示,我們得到相同的結果。提供者和工廠都做同樣的事情,但工廠可以用更少的程式碼來完成。

AngularJS 中 ProviderService 之間的區別

讓我們建立一個與我們建立的提供程式具有相同功能的服務。現在我們將複製我們的提供者並將其更改為服務。

服務沒有方法 $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());
});

輸出:

angularjs 服務示例

如上例所示,我們得到相同的結果。提供者和服務都做同樣的事情,但是服務返回一個物件而不是一個字串。

要點是何時使用 providerfactoryservice。如果我們想返回一個值而不是一個物件,我們就不能使用服務。

我們必須使用工廠而不是服務,但我們將使用工廠來返回物件而不是值。提供者允許我們進行配置時間。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

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