AngularJS中的服务、提供商和工厂之间有什么区别?
当前回答
我的理解很简单。
工厂:您只需在工厂内部创建一个对象并返回它。
服务:
您只需要一个使用此关键字定义函数的标准函数。
供应商:
您定义了一个$get对象,它可以用于获取返回数据的对象。
其他回答
所有的好答案都已经有了。我想在服务和工厂方面再补充几点。以及服务/工厂之间的差异。你也可以有这样的问题:
我应该使用服务还是工厂?有什么不同?他们的行为是否相同?
让我们从服务和工厂之间的区别开始:
两者都是Singleton:每当Angular第一次发现它们作为依赖项时,它都会创建服务/工厂的单个实例。创建实例后,将永远使用同一实例。可用于对具有行为的对象进行建模:它们都可以有方法、内部状态变量等。尽管编写代码的方式会有所不同。
服务:
服务是一个构造函数,Angular将通过调用newyourServiceName()来实例化它。这意味着一些事情。
函数和实例变量将是它的财产。您不需要返回值。当Angular调用new yourServiceName()时,它将接收此对象以及您在其上放置的所有财产。
示例:
angular.service('MyService', function() {
this.aServiceVariable = "Ved Prakash"
this.aServiceMethod = function() {
return //code
};
});
当Angular将此MyService服务注入控制器时取决于它,该控制器将获得它可以调用的MyService上的函数,例如MyService.aServiceMethod()。
注意:
由于构造的服务是一个对象,因此当调用它们时,它内部的方法可以引用它:
angular.service('ScoreKeeper', function($http) {
this.score = 0;
this.getScore = function() {
return this.score;
};
this.setScore = function(newScore) {
this.score = newScore;
};
this.addOne = function() {
this.score++;
};
});
例如,如果您通过从服务器$http.get('/score').then(ScoreKeeper.setScore)获取分数来初始化分数,那么您可能会尝试在承诺链中调用ScoreKeeper。这样做的问题是,ScoreKeeer.setScore将在该绑定为空的情况下被调用,并且您会收到错误。更好的方法是$http.get('/score').then(ScoreKeeper.setScore.bind(ScoreKeeper))。无论您是否选择在服务方法中使用它,请注意如何调用它们。
从服务返回值:
由于JavaScript构造函数的工作方式,若从构造函数函数返回一个复杂值(即Object),调用者将获得该Object而不是该实例。
这意味着你基本上可以从下面复制粘贴工厂示例,用服务替换工厂,它会起作用:
angular.service('MyService', function($http) {
var api = {};
api.aServiceMethod= function() {
return $http.get('/users');
};
return api;
});
因此,当Angular使用新的MyService()构造服务时,它将获得该api对象而不是MyService实例。
这是任何复杂值(对象、函数)的行为,但不是基本类型的行为。
工厂:
工厂是一个返回值的普通旧函数。返回值是注入到依赖于工厂的事物中的值。Angular中的一个典型工厂模式是返回一个具有函数作为财产的对象,如下所示:
angular.factory('MyFactory', function($http) {
var api = {};
api.aFactoryMethod= function() {
return $http.get('/users');
};
return api;
});
工厂依赖项的注入值是工厂的返回值值,并且它不必是对象。这可能是一种功能
以上1和2个问题的答案:
大多数情况下,只要坚持使用工厂就可以了。他们的行为更容易理解。别无选择关于是否返回一个值,此外,没有错误如果你做错事,就会被介绍。当我谈论注射时,我仍然将其称为“服务”但它们是依赖关系。服务/工厂行为非常相似,有些人会说任何一个都很好。这有点正确,但我觉得遵循约翰·帕帕风格指南的建议,坚持工厂**
TL;博士1) 使用Factory时,您可以创建一个对象,向其添加财产,然后返回相同的对象。当您将此工厂传递到控制器中时,对象上的那些财产现在将通过工厂在该控制器中可用。
app.controller(‘myFactoryCtrl’, function($scope, myFactory){
$scope.artist = myFactory.getArtist();
});
app.factory(‘myFactory’, function(){
var _artist = ‘Shakira’;
var service = {};
service.getArtist = function(){
return _artist;
}
return service;
});
2) 当您使用Service时,AngularJS会在后台使用“new”关键字实例化它。因此,您将财产添加到“this”,服务将返回“this“。当您将服务传递到控制器时,“this”上的那些财产现在将通过您的服务在该控制器上可用。
app.controller(‘myServiceCtrl’, function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service(‘myService’, function(){
var _artist = ‘Nelly’;
this.getArtist = function(){
return _artist;
}
});
3) 提供程序是唯一可以传递给.config()函数的服务。如果要在服务对象可用之前为其提供模块范围的配置,请使用提供程序。
app.controller(‘myProvider’, function($scope, myProvider){
$scope.artist = myProvider.getArtist();
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider(‘myProvider’, function(){
//Only the next two lines are available in the app.config()
this._artist = ‘’;
this.thingFromConfig = ‘’;
this.$get = function(){
var that = this;
return {
getArtist: function(){
return that._artist;
},
thingOnConfig: that.thingFromConfig
}
}
});
app.config(function(myProviderProvider){
myProviderProvider.thingFromConfig = ‘This was set in config’;
});
非TL;博士
1) 工厂工厂是创建和配置服务的最流行方式。除了TL之外,真的没有太多了;DR说。您只需创建一个对象,向其添加财产,然后返回相同的对象。然后,当您将工厂传递到控制器中时,对象上的那些财产现在将通过工厂在该控制器中可用。下面是一个更广泛的示例。
app.factory(‘myFactory’, function(){
var service = {};
return service;
});
现在,当我们将“myFactory”传递到我们的控制器时,我们附加到“service”的任何财产都将可用。
现在,让我们向回调函数中添加一些“私有”变量。这些不能从控制器直接访问,但我们最终将在“服务”上设置一些getter/setter方法,以便在需要时更改这些“私有”变量。
app.factory(‘myFactory’, function($http, $q){
var service = {};
var baseUrl = ‘https://itunes.apple.com/search?term=’;
var _artist = ‘’;
var _finalUrl = ‘’;
var makeUrl = function(){
_artist = _artist.split(‘ ‘).join(‘+’);
_finalUrl = baseUrl + _artist + ‘&callback=JSON_CALLBACK’;
return _finalUrl
}
return service;
});
在这里,您会注意到我们没有将这些变量/函数附加到“服务”。我们只是创建它们,以便以后使用或修改它们。
baseUrl是iTunes API所需的基本URL_艺术家是我们希望查找的艺术家_finalUrl是我们将调用iTunes的最终和完全构建的URLmakeUrl是一个创建并返回iTunes友好URL的函数。
既然我们的helper/private变量和函数已经就位,那么让我们向“service”对象添加一些财产。无论我们在“服务”上放置什么,都可以直接在我们传递“myFactory”到的任何控制器中使用。
我们将创建setArtist和getArtist方法,它们只是返回或设置艺术家。我们还将创建一个方法,用我们创建的URL调用iTunes API。该方法将返回一个承诺,一旦数据从iTunes API返回,该承诺将实现。如果你在AngularJS中没有太多使用承诺的经验,我强烈建议你深入研究一下。
下面的setArtist接受艺术家并允许您设置艺术家。getArtist返回艺术家。callItunes首先调用makeUrl()来构建我们将用于$http请求的URL。然后它设置一个promise对象,用我们的最终url发出一个$http请求,然后因为$http返回一个promice,所以我们可以在请求后调用.success或.error。然后,我们用iTunes数据来解决我们的承诺,或者用一条消息“出现了错误”来拒绝它。
app.factory('myFactory', function($http, $q){
var service = {};
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
service.setArtist = function(artist){
_artist = artist;
}
service.getArtist = function(){
return _artist;
}
service.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
return service;
});
现在我们的工厂完工了。我们现在可以将“myFactory”注入到任何控制器中,然后就可以调用附加到服务对象的方法(setArtist、getArtist和callItunes)。
app.controller('myFactoryCtrl', function($scope, myFactory){
$scope.data = {};
$scope.updateArtist = function(){
myFactory.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myFactory.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
在上面的控制器中,我们正在注入“myFactory”服务。然后,我们使用“myFactory”中的数据在$scope对象上设置财产。上面唯一棘手的代码是,如果你以前从未处理过承诺。因为callItunes正在返回一个promise,所以我们可以使用.then()方法,并在iTunes数据实现我们的承诺后,才设置$scope.data.artistData。你会注意到我们的控制器非常“薄”(这是一个很好的编码练习)。我们所有的逻辑和持久数据都位于我们的服务中,而不是控制器中。2) 服务在处理创建服务时,最重要的一点可能是它是用“new”关键字实例化的。对于JavaScript专家来说,这应该会给你一个关于代码本质的重要提示。对于那些JavaScript背景有限的人,或者对于那些不太熟悉“new”关键字实际功能的人,让我们回顾一些JavaScript基础知识,这些基础知识最终将帮助我们理解服务的本质。
为了真正了解使用“new”关键字调用函数时发生的更改,让我们创建一个函数并使用“new”关键字调用它,然后让我们展示解释器在看到“new”关键词时所做的操作。最终结果都是一样的。
首先,让我们创建构造函数。
var Person = function(name, age){
this.name = name;
this.age = age;
}
这是一个典型的JavaScript构造函数。现在,每当我们使用“new”关键字调用Person函数时,“this”将绑定到新创建的对象。
现在,让我们将一个方法添加到Person的原型中,以便它可以在Person“类”的每个实例上使用。
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
现在,因为我们将sayName函数放在原型上,Person的每个实例都可以调用sayName功能,以提醒该实例的名称。
既然我们在原型上有了Person构造函数和sayName函数,那么让我们实际创建Person的一个实例,然后调用sayName功能。
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
因此,创建Person构造函数、向其原型添加函数、创建Person实例,然后在其原型上调用函数的代码看起来都是这样的。
var Person = function(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
现在让我们看看在JavaScript中使用“new”关键字时实际发生了什么。首先您应该注意的是,在我们的示例中使用了“new”之后,我们能够像调用对象一样调用“tyler”上的方法(sayName),这是因为它是一个对象。因此,首先,我们知道Person构造函数正在返回一个对象,无论我们是否可以在代码中看到它。其次,我们知道,因为sayName函数位于原型上,而不是直接位于Person实例上,所以Person函数返回的对象必须在查找失败时委托给原型。更简单地说,当我们调用tyler.sayName()时,解释器会说“好的,我要查看我们刚刚创建的‘tyler’对象,找到sayName函数,然后调用它。等一下,我在这里看不到它-我看到的只是名称和年龄,让我检查一下原型。是的,看起来它在原型上,让我调用它”。
下面是如何思考“new”关键字在JavaScript中的实际作用的代码。这基本上是上面一段的代码示例。我已经将“解释器视图”或解释器在注释中看到代码的方式。
var Person = function(name, age){
//The below line creates an object(obj) that will delegate to the person’s prototype on failed lookups.
//var obj = Object.create(Person.prototype);
//The line directly below this sets ‘this’ to the newly created object
//this = obj;
this.name = name;
this.age = age;
//return this;
}
现在了解了“new”关键字在JavaScript中的真正作用,在AngularJS中创建服务应该更容易理解。
创建服务时最需要理解的是知道服务是用“new”关键字实例化的。结合上述知识和我们的示例,您现在应该认识到,您将把财产和方法直接附加到“this”,然后它将从服务本身返回。让我们来看看这一点。
与我们最初在Factory示例中所做的不同,我们不需要创建一个对象然后返回该对象,因为正如前面多次提到的那样,我们使用了“new”关键字,因此解释器将创建该对象,将其委托给其原型,然后将其返回给我们,而无需我们做任何工作。
首先,让我们创建“private”和helper函数。这看起来应该很熟悉,因为我们对工厂做了完全相同的事情。我不会在这里解释每一行的作用,因为我在工厂示例中做过,如果你感到困惑,请重新阅读工厂示例。
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
});
现在,我们将把控制器中可用的所有方法附加到“this”。
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.setArtist = function(artist){
_artist = artist;
}
this.getArtist = function(){
return _artist;
}
this.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
});
现在,就像在我们的工厂中一样,setArtist、getArtist和callItunes将在我们传递myService的任何控制器中可用。这是myService控制器(与我们的工厂控制器几乎完全相同)。
app.controller('myServiceCtrl', function($scope, myService){
$scope.data = {};
$scope.updateArtist = function(){
myService.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myService.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
正如我之前提到的,一旦你真正了解了“新”的作用,服务几乎与AngularJS中的工厂完全相同。3) 提供商
关于提供程序,最重要的一点是它们是您可以传递到应用程序的app.config部分的唯一服务。如果您需要在服务对象的某一部分在应用程序中的其他地方可用之前对其进行更改,这一点非常重要。虽然与服务/工厂非常相似,但我们将讨论一些差异。
首先,我们以与我们的服务和工厂类似的方式建立我们的提供商。下面的变量是我们的“private”和helper函数。
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below.
this.thingFromConfig = ‘’;
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
}
*同样,如果上述代码的任何部分令人困惑,请查看Factory部分,在那里我将更详细地解释它的作用。
您可以将提供商视为有三个部分。第一部分是稍后将修改/设置的“私有”变量/函数(如上所示)。第二部分是变量/函数,这些变量/函数将在app.config函数中可用,因此可以在其他地方可用之前进行更改(如上所示)。需要注意的是,这些变量需要附加到“this”关键字。在我们的示例中,app.config中只有“thingFromConfig”可以更改。第三部分(如下所示)是当您将“myProvider”服务传递到特定控制器中时,控制器中可用的所有变量/函数。
使用Provider创建服务时,控制器中唯一可用的财产/方法是从$get()函数返回的财产/方法。下面的代码将$get放在“this”上(我们知道最终会从该函数返回)。现在,$get函数返回我们希望在控制器中可用的所有方法/财产。下面是一个代码示例。
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
现在完整的Provider代码如下所示
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below
this.thingFromConfig = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
});
现在,就像在我们的工厂和服务中一样,setArtist、getArtist和callItunes将在我们传递给myProvider的任何控制器中可用。这是myProvider控制器(与我们的工厂/服务控制器几乎完全相同)。
app.controller('myProviderCtrl', function($scope, myProvider){
$scope.data = {};
$scope.updateArtist = function(){
myProvider.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myProvider.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
如前所述,使用Provider创建服务的关键是能够在将最终对象传递给应用程序的其余部分之前,通过app.config函数更改一些变量。让我们看一个例子。
app.config(function(myProviderProvider){
//Providers are the only service you can pass into app.config
myProviderProvider.thingFromConfig = 'This sentence was set in app.config. Providers are the only service that can be passed into config. Check out the code to see how it works';
});
现在您可以看到“thingFromConfig”在我们的提供程序中是如何作为空字符串的,但当它显示在DOM中时,它将是“This sentence was set…”。
对我来说,理解差异的最佳和最简单的方法是:
var service, factory;
service = factory = function(injection) {}
AngularJS如何实例化特定组件(简化):
// service
var angularService = new service(injection);
// factory
var angularFactory = factory(injection);
因此,对于服务,AngularJS组件是由服务声明函数表示的类的对象实例。对于工厂,它是从工厂声明函数返回的结果。工厂的行为可能与服务相同:
var factoryAsService = function(injection) {
return new function(injection) {
// Service content
}
}
最简单的思考方式如下:
服务是一个单例对象实例。如果您想为代码提供单例对象,请使用服务。工厂是一个阶级。如果您想为代码提供自定义类,请使用工厂(无法使用服务完成,因为它们已经实例化)。
工厂“类”示例在周围的注释中提供,以及提供程序差异。
工厂
如果给AngularJS一个函数,AngularJS将在请求工厂时缓存并注入返回值。
例子:
app.factory('factory', function() {
var name = '';
// Return value **is** the object that will be injected
return {
name: name;
}
})
用法:
app.controller('ctrl', function($scope, factory) {
$scope.name = factory.name;
});
服务
如果给AngularJS一个函数,AngularJS将调用new来实例化它。AngularJS创建的实例将在请求服务时缓存并注入。由于new用于实例化服务,因此关键字this是有效的,并引用实例。
例子:
app.service('service', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.getName = function() {
return name;
}
});
用法:
app.controller('ctrl', function($scope, service) {
$scope.name = service.getName();
});
供应商
给AngularJS一个函数,AngularJS将调用它的$get函数。它是$get函数的返回值,将在请求服务时缓存并注入。
提供程序允许您在AngularJS调用$get方法获取可注入对象之前配置提供程序。
例子:
app.provider('provider', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.$get = function() {
return {
name: name
}
}
})
用法(作为控制器中的注射剂)
app.controller('ctrl', function($scope, provider) {
$scope.name = provider.name;
});
用法(在调用$get以创建可注射对象之前配置提供程序)
app.config(function(providerProvider) {
providerProvider.setName('John');
});
服务与供应商与工厂:
我试图保持简单。这都是关于JavaScript的基本概念。
首先,我们来谈谈AngularJS中的服务!
什么是服务:在AngularJS中,Service只是一个单独的JavaScript对象,可以存储一些有用的方法或财产。此单例对象是根据ngApp(Angular应用程序)创建的,它在当前应用程序中的所有控制器之间共享。当Angularjs实例化服务对象时,它使用唯一的服务名称注册该服务对象。因此,每当我们需要服务实例时,Angular都会在注册表中搜索该服务名称,并返回对服务对象的引用。这样我们就可以调用方法、访问服务对象上的财产等。您可能会有疑问,是否也可以在控制器的范围对象上放置财产和方法!所以为什么需要服务对象?答案是:服务在多个控制器范围内共享。如果您将一些财产/方法放在控制器的范围对象中,它将仅对当前范围可用。但当您在服务对象上定义方法和财产时,它将全局可用,并且可以通过注入该服务在任何控制器的范围内访问。
所以,若有三个控制器作用域,让它是controllerA、controllerB和controllerC,它们都将共享同一个服务实例。
<div ng-controller='controllerA'>
<!-- controllerA scope -->
</div>
<div ng-controller='controllerB'>
<!-- controllerB scope -->
</div>
<div ng-controller='controllerC'>
<!-- controllerC scope -->
</div>
如何创建服务?
AngularJS提供了注册服务的不同方法。在这里,我们将集中讨论工厂(..)、服务(..)和提供者(..)三种方法;
使用此链接进行代码参考
工厂功能:
我们可以如下定义工厂函数。
factory('serviceName',function fnFactory(){ return serviceInstance;})
AngularJS提供了“factory('serviceName',fnFactory)”方法,该方法包含两个参数,serviceName和一个JavaScript函数。Angular通过调用函数fnFactory()创建服务实例,如下所示。
var serviceInstace = fnFactory();
传递的函数可以定义一个对象并返回该对象。AngularJS只是将此对象引用存储到作为第一个参数传递的变量中。从fnFactory返回的任何内容都将绑定到serviceInstance。除了返回对象之外,我们还可以返回函数、值等,无论我们将返回什么,都将可用于服务实例。
例子:
var app= angular.module('myApp', []);
//creating service using factory method
app.factory('factoryPattern',function(){
var data={
'firstName':'Tom',
'lastName':' Cruise',
greet: function(){
console.log('hello!' + this.firstName + this.lastName);
}
};
//Now all the properties and methods of data object will be available in our service object
return data;
});
服务功能:
service('serviceName',function fnServiceConstructor(){})
这是另一种方式,我们可以注册服务。唯一的区别是AngularJS尝试实例化服务对象的方式。这次angular使用“new”关键字并调用如下所示的构造函数。
var serviceInstance = new fnServiceConstructor();
在构造函数中,我们可以使用“this”关键字向服务对象添加财产/方法。例子:
//Creating a service using the service method
var app= angular.module('myApp', []);
app.service('servicePattern',function(){
this.firstName ='James';
this.lastName =' Bond';
this.greet = function(){
console.log('My Name is '+ this.firstName + this.lastName);
};
});
提供程序功能:
Provider()函数是创建服务的另一种方法。让我们有兴趣创建一个只向用户显示一些问候信息的服务。但我们也希望提供一个功能,用户可以设置自己的问候语。从技术上讲,我们希望创建可配置的服务。我们如何做到这一点?必须有一种方法,让应用程序可以传递他们的自定义问候消息,Angularjs将其提供给创建我们服务实例的工厂/构造函数。在这种情况下,provider()函数完成任务。使用provider()函数,我们可以创建可配置的服务。
我们可以使用下面给出的提供程序语法创建可配置的服务。
/*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});
/*step2:configure the service */
app.config(function configureService(serviceProvider){});
提供程序语法如何在内部工作?
1.提供程序对象是使用我们在提供程序函数中定义的构造函数创建的。
var serviceProvider = new serviceProviderConstructor();
2.我们在app.config()中传递的函数被执行。这被称为配置阶段,在这里我们有机会定制我们的服务。
configureService(serviceProvider);
3.最后通过调用serviceProvider的$get方法创建服务实例。
serviceInstance = serviceProvider.$get()
使用provide语法创建服务的示例代码:
var app= angular.module('myApp', []);
app.provider('providerPattern',function providerConstructor(){
//this function works as constructor function for provider
this.firstName = 'Arnold ';
this.lastName = ' Schwarzenegger' ;
this.greetMessage = ' Welcome, This is default Greeting Message' ;
//adding some method which we can call in app.config() function
this.setGreetMsg = function(msg){
if(msg){
this.greetMessage = msg ;
}
};
//We can also add a method which can change firstName and lastName
this.$get = function(){
var firstName = this.firstName;
var lastName = this.lastName ;
var greetMessage = this.greetMessage;
var data={
greet: function(){
console.log('hello, ' + firstName + lastName+'! '+ greetMessage);
}
};
return data ;
};
});
app.config(
function(providerPatternProvider){
providerPatternProvider.setGreetMsg(' How do you do ?');
}
);
工作演示
摘要:
工厂使用返回服务实例的工厂函数。serviceInstance=fnFactory();
服务使用构造函数,Angular使用“new”关键字调用此构造函数以创建服务实例。serviceInstance=新的fnServiceConstructor();
Provider定义了providerConstructor函数,此providerConstructer函数定义了工厂函数$get。Angular调用$get()来创建服务对象。提供程序语法还有一个额外的优点,即在服务对象实例化之前对其进行配置。serviceInstance=$get();
推荐文章
- AngularJS控制器的生命周期是什么?
- $destroy是否删除事件监听器?
- 用布尔值将单选按钮绑定到模型
- AngularJS只适用于单页应用程序吗?
- angular.js中的内联条件
- 如何突出显示当前菜单项?
- 如何使用AngularJS获取url参数
- angularjs中的compile函数和link函数有什么区别
- 如何向一个5岁的孩子解释依赖注入?
- Ng-repeat结束事件
- 缓存一个HTTP 'Get'服务响应在AngularJS?
- 从ng-click获取原始元素
- Angular JS:当我们已经有了具有作用域的指令控制器时,指令的link函数还需要什么?
- Angularjs的ng-model不能在ng-if中工作
- AngularJS禁用了开发机器上的部分缓存