AngularJS 中的提供者

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

AngularJS 中的提供者

作者：迹忆客最近更新：2023/04/13 浏览次数：

我们将介绍 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 提供者的示例

如上例所示，我们从控制台中的提供者那里得到了准确的值。这样就成功了，我们可以使用提供者返回一个值并将其注入我们的方法中。

重要的是要注意，所有的提供者都是一样的，服务和工厂也是一样的。但是无论我们注入提供者多少次，该值都只会被执行一次。

我们可以通过创建另一个控制器来测试它，如下所示。

# 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 中 `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 factory 示例

如上例所示，我们得到相同的结果。提供者和工厂都做同样的事情，但工厂可以用更少的代码来完成。

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());
});