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