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