AngularJS:服务与提供商vs工厂
Lio*_*ior 3296 dependency-injection angularjs angularjs-service angularjs-factory angularjs-provider
什么是之间的差异Service,Provider并Factory在AngularJS？
Lio*_*ior 2860
从AngularJS邮件列表中,我得到了一个惊人的线程,解释了服务与工厂与提供商及其注入使用情况.编译答案:
服务
语法:module.service( 'serviceName', function );
结果:当将serviceName声明为可注入参数时,将为您提供该函数的实例.换句话说 new FunctionYouPassedToService().
工厂
语法:module.factory( 'factoryName', function );
结果:当将factoryName声明为injectable参数时,将通过调用传递给module.factory的函数引用来提供返回的值.
供应商
语法:module.provider( 'providerName', function );
结果:当将providerName声明为可注入参数时,将为您提供 (new ProviderFunction()).$get().在调用$ get方法之前实例化构造函数 - ProviderFunction是传递给module.provider的函数引用.
提供商的优势在于可以在模块配置阶段配置它们.
请参阅此处了解提供的代码.
这是Misko的一个很好的进一步解释:
provide.value('a', 123);
function Controller(a) {
expect(a).toEqual(123);
}
在这种情况下,喷射器只是按原样返回值.但是,如果你想计算价值怎么办？然后使用工厂
provide.factory('b', function(a) {
return a*2;
});
function Controller(b) {
expect(b).toEqual(246);
}
这factory是一个负责创建价值的函数.请注意,工厂函数可以请求其他依赖项.
但是如果你想成为更多的OO并拥有一个名为Greeter的课程怎么办？
function Greeter(a) {
this.greet = function() {
return 'Hello ' + a;
}
}
然后要实例化你必须写
provide.factory('greeter', function(a) {
return new Greeter(a);
});
然后我们可以在这样的控制器中要求'greeter'
function Controller(greeter) {
expect(greeter instanceof Greeter).toBe(true);
expect(greeter.greet()).toEqual('Hello 123');
}
但这太浪漫了.写这个的更简单的方法是provider.service('greeter', Greeter);
但是如果我们想Greeter在注射之前配置类呢？然后我们可以写
provide.provider('greeter2', function() {
var salutation = 'Hello';
this.setSalutation = function(s) {
salutation = s;
}
function Greeter(a) {
this.greet = function() {
return salutation + ' ' + a;
}
}
this.$get = function(a) {
return new Greeter(a);
};
});
然后我们可以这样做:
angular.module('abc', []).config(function(greeter2Provider) {
greeter2Provider.setSalutation('Halo');
});
function Controller(greeter2) {
expect(greeter2.greet()).toEqual('Halo 123');
}
作为一个侧面说明,service,factory,和value都是从商的.
provider.service = function(name, Class) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.instantiate(Class);
};
});
}
provider.factory = function(name, factory) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.invoke(factory);
};
});
}
provider.value = function(name, value) {
provider.factory(name, function() {
return value;
});
};
- 另请参阅http://stackoverflow.com/a/13763886/215945,其中讨论了服务和工厂之间的差异. (58认同)
- 如果使用一个明确的实际例子,这个例子可能是不可思议的.我迷失了,试图找出像'toEqual`和`greeter.Greet`这样的东西.为什么不使用稍微更真实和相关的东西？ (33认同)
- 虽然通过创建函数实例来调用服务.它实际上每个注射器只创建一次,这使它像singleton.http://docs.angularjs.org/guide/dev_guide.services.creating_services (17认同)
- 使用函数expect()是一个很难解释的东西.下次使用真实世界代码. (5认同)
- 在编辑611中,我添加了角度常量和值的使用.为了证明另一个已经显示的差异.http://jsbin.com/ohamub/611/edit (3认同)
- 关于module.service的声明,你将得到`new FunctionYouPassedToService()`并不总是如此.如果FunctionYouPassedToService()返回一个对象或函数,它将作为可注入服务返回,就像module.factory一样. (2认同)
Epo*_*okK 810
JS小提琴演示
"Hello World"示例使用factory/ service/ provider:
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
//provider style, full blown, configurable version
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!";
}
}
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
{{hellos}}
</div>
</body>- @Nate:`this`实际上并没有改变上下文,因为被调用的是`new Provider()`.$ get(),其中`Provider`是传递给`app.provider`的函数.也就是说`$ get()`被称为构造的`Provider`上的一个方法,所以`this`将引用`Provider`,如示例所示. (12认同)
- 是@Antoine得到"未知提供:helloWorldProvider"错误的原因,因为在.config代码中,您使用'helloWorldProvider',但是当您在myApp.provider('helloWorld',function())中定义提供程序时,您使用'你好,世界'？换句话说,在您的配置代码中,angular如何知道您指的是helloWorld提供程序？谢谢 (4认同)
- 为什么在本地运行时会收到`未知提供者:helloWorldProvider < - helloWorld`？评论出来,其他2个例子的错误相同.是否有一些隐藏的提供商配置？(Angular 1.0.8) - 发现:http://stackoverflow.com/questions/12339272/angular-js-unknown-provider (3认同)
- `this`不会改变`$ get`函数的上下文吗？ - 您不再引用该函数中的实例化提供程序. (2认同)
Tyl*_*nis 643
TL; DR
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; DR
1)工厂
工厂是最流行的创建和配置服务的方式.DR说的确没有比TL更多的东西.您只需创建一个对象,向其添加属性,然后返回该对象.然后,当您将工厂传递到控制器时,该对象上的这些属性现在将通过您的工厂在该控制器中可用.下面是一个更广泛的例子.
app.factory(‘myFactory’, function(){
var service = {};
return service;
});
现在,当我们将'myFactory'传递给我们的控制器时,我们可以使用我们附加到'service'的任何属性.
现在让我们在回调函数中添加一些"私有"变量.这些不能直接从控制器访问,但我们最终会在'service'上设置一些getter/setter方法,以便在需要时能够改变这些'private'变量.
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;
});
在这里你会注意到我们没有将这些变量/函数附加到'service'.我们只是创建它们以便以后使用或修改它们.
- baseUrl是iTunes API所需的基本URL
- _artist是我们希望查找的艺术家
- _finalUrl是我们将调用iTunes的最终完全构建的URL
- makeUrl是一个创建并返回我们的iTunes友好URL的函数.
现在我们的助手/私有变量和函数已经到位,让我们为'service'对象添加一些属性.无论我们提供什么'服务'都可以直接在我们通过'myFactory'的控制器中使用.
我们将创建setArtist和getArtist方法,只返回或设置艺术家.我们还将创建一个方法,使用我们创建的URL调用iTunes API.一旦数据从iTunes API返回,此方法将返回一个承诺.如果您在AngularJS中没有多少使用承诺的经验,我强烈建议您深入了解它们.
以下setArtist接受艺术家并允许您设置艺术家.getArtist返回艺术家.callItunes首先调用makeUrl()以构建我们将与$ http请求一起使用的URL.然后它设置一个promise对象,使用我们的最终url发出$ http请求,然后因为$ http返回一个promise,我们可以在我们的请求之后调用.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专家来说,这应该会给你一个关于代码本质的一个很大的暗示.对于那些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'关键字,因此解释器将创建该对象,让它委托给它是原型,然后在没有我们完成工作的情况下将它归还给我们.
首先,让我们创建我们的'私人'和帮助函数.这应该看起来非常熟悉,因为我们对我们的工厂做了同样的事情.我不会解释每一行在这里的作用,因为我在工厂示例中这样做,如果您感到困惑,请重新阅读工厂示例.
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)提供者
关于Providers最重要的事情是,它们是您可以传递到应用程序的app.config部分的唯一服务.如果您需要更改服务对象的某些部分,然后在应用程序中的其他任何位置可用,那么这一点非常重要.虽然与服务/工厂非常相似,但我们将讨论一些差异.
首先,我们以与服务和工厂类似的方式设置我们的提供商.下面的变量是我们的"私人"和帮助函数.
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;
}
}
*再次如果上述代码的任何部分令人困惑,请查看工厂部分,在那里我将解释它所做的更多细节.
您可以将提供商视为包含三个部分.第一部分是稍后将修改/设置的"私有"变量/函数(如上所示).第二部分是app.config函数中可用的变量/函数,因此可以在其他任何地方可用之前进行更改(如上所示).重要的是要注意这些变量需要附加到'this'关键字.在我们的示例中,只有'thingFromConfig'可以在app.config中进行更改.第三部分(如下所示)是将"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中时,它将是'这句话被设置......'.
- 这篇优秀文章中唯一缺少的部分是在工厂使用服务的相对优势; 在Lior接受的答案中清楚地解释了这一点 (11认同)
- 您的TLDR需要TLDR. (4认同)
- "JavaScript大师"的妙语很狡猾.:D我认为这个答案非常清楚.写得很好. (3认同)
- @JensB tl; dr - Learn React. (3认同)
- FWIW(可能不多),这里有一个博主,它对Angular有疑问,并且不喜欢providerProvider http://codeofrob.com/entries/you-have-ruined-javascript.html (2认同)
flu*_*lup 511
所有服务都是单身人士 ; 他们每个应用程序实例化一次.它们可以是任何类型,无论是原始类型,对象文字,函数,还是自定义类型的实例.
的value,factory,service,constant,和provider方法都是供应商.他们教Injector如何实例化服务.
最详细,但也是最全面的是提供者食谱.在剩下的四个配方类型-价值,工厂,服务,不断- 是在运营商的配方上面只是语法糖.
- 该值配方是最简单的情况下,如果你自己实例化服务,并提供实例值的注射器.
- 该工厂配方使喷油器工厂功能时,它需要实例化服务,它调用.调用时,工厂函数创建并返回服务实例.服务的依赖关系作为函数的参数注入.因此,使用此配方可添加以下功能:
- 能够使用其他服务(具有依赖性)
- 服务初始化
- 延迟/延迟初始化
- 该服务的食谱几乎是一样的工厂配方,但这里的喷油器调用构造函数与新的运营商,而不是一个工厂函数.
- 该供应商的食谱通常是矫枉过正.它允许您配置工厂的创建,从而增加了一层间接.
仅当您要为应用程序范围的配置公开API时才应使用Provider配方,该API必须在应用程序启动之前进行.这通常仅适用于可重用服务,其行为可能需要在应用程序之间略有不同.
- 在恒配方是一样的价值食谱但它允许您定义是在现有的服务配置阶段.比使用Value配方创建的服务早.与值不同,它们不能使用
decorator.
- @joshperry作为一个新手,我已经搜索了服务和工厂之间的差异了一段时间.我同意这是有史以来最好的答案!我将服务理解为服务类(例如编码器/解码器类),它可能具有一些私有属性.工厂提供了一组无状态辅助方法. (5认同)
- 上面其他答案中的Yaa示例未能非常清楚地解释b/w服务和提供程序的核心差异,这些是在实例化这些配方时注入的内容. (3认同)
- 那么服务和工厂基本相同？使用其中一个提供除了替代语法之外的其他内容？ (2认同)
- @Matt,是的,当您已经拥有自己希望作为服务公开的功能时,服务是一种简洁的方式.来自docs:myApp.factory('unicornLauncher',["apiToken",function(apiToken){return new UnicornLauncher(apiToken);}]); vs:myApp.service('unicornLauncher',["apiToken",UnicornLauncher]); (2认同)
Pan*_*kar 223
了解AngularJS工厂,服务和提供商
所有这些都用于共享可重用的单例对象.它有助于在您的应用程序/各种组件/模块之间共享可重用的代码.
来自Docs Service/Factory:
- 懒惰地实例化 - 当应用程序组件依赖它时,Angular仅实例化服务/工厂.
- 单身人士 - 依赖于服务的每个组件都会获得对服务工厂生成的单个实例的引用.
厂
工厂是在创建对象之前可以操作/添加逻辑的函数,然后返回新创建的对象.
app.factory('MyFactory', function() {
var serviceObj = {};
//creating an object with methods/functions or variables
serviceObj.myFunction = function() {
//TO DO:
};
//return that object
return serviceObj;
});
用法
它可以只是一个类的函数集合.因此,当您在控制器/工厂/指令功能中注入它时,它可以在不同的控制器中实例化.每个应用程序仅实例化一次.
服务
只需在查看服务时就可以考虑阵列原型.服务是使用"new"关键字实例化新对象的函数.您可以使用this关键字向服务对象添加属性和函数.与工厂不同,它不返回任何内容(它返回包含方法/属性的对象).
app.service('MyService', function() {
//directly binding events to this context
this.myServiceFunction = function() {
//TO DO:
};
});
用法
需要在整个应用程序中共享单个对象时使用它.例如,经过身份验证的用户详细信息,可共享的方法/数据,实用程序功能等.
提供商
提供程序用于创建可配置的服务对象.您可以从配置功能配置服务设置.它使用该$get()函数返回一个值.该$get函数以角度运行在运行阶段.
app.provider('configurableService', function() {
var name = '';
//this method can be be available at configuration time inside app.config.
this.setName = function(newName) {
name = newName;
};
this.$get = function() {
var getName = function() {
return name;
};
return {
getName: getName //exposed object to where it gets injected.
};
};
});
用法
当您需要在服务对象可用之前为其提供模块化配置时,例如.假设你想根据你的环境设置你的API URL dev,stage或者prod
注意
只有提供商将在角度配置阶段提供,而服务和工厂则不提供.
希望这已经清除了您对工厂,服务和提供商的理解.
Luc*_*cia 192
对我来说,当我意识到它们都以相同的方式工作时,就会出现这样的启示:通过运行一次,存储它们获得的值,然后在通过依赖注入引用时咳嗽相同的存储值.
说我们有:
app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);
三者之间的区别在于:
a的储值来自于跑步fn.b的储值来自newINGfn.c存储的值来自首先通过newing 获取实例fn,然后运行$get实例的方法.
这意味着在AngularJS中有类似缓存对象的东西,每次注入的值只分配一次,当它们第一次注入时,其中:
cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()
这就是我们this在服务中使用并定义this.$get提供者的原因.
- 我最喜欢这个答案.所有这些都是通过DI提供对象的访问.通常你对'工厂'做得很好.存在"服务"的唯一原因是像CoffeeScript,TypeScript,ES6等语言,因此您可以使用它们的类语法.只有使用`app.config()`将模块用于具有不同设置的多个应用程序时,才需要`provider`.如果您的服务是纯单例或能够创建某些内容的实例,则仅取决于您的实现. (2认同)
Ana*_*ant 136
服务与提供商对工厂:
我想保持简单.这都是关于基本的JavaScript概念.
首先,我们来谈谈AngularJS中的服务!
什么是服务: 在AngularJS中,Service只是一个单独的JavaScript对象,它可以存储一些有用的方法或属性.此单例对象是基于ngApp(Angular app)创建的,并且在当前应用程序中的所有控制器之间共享.当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()函数是创建服务的另一种方式.让我们有兴趣创建一个只向用户显示一些问候消息的服务.但我们还希望提供一种功能,以便用户可以设置自己的问候消息.在技术方面,我们希望创建可配置的服务.我们应该怎么做 ？必须有一种方法,以便app可以传递他们的自定义问候语消息,Angularjs将使其可用于创建我们的服务实例的工厂/构造函数.在这种情况下,provider()函数可以完成这项工作.使用provider()函数我们可以创建可配置的服务.
我们可以使用提供程序语法创建可配置服务,如下所示.
/*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});
/*step2:configure the service */
app.config(function configureService(serviceProvider){});
提供者语法内部如何工作？
1.Provider对象是使用我们在provider函数中定义的构造函数创建的.
var serviceProvider = new serviceProviderConstructor();
2.我们在app.config()中传递的函数,被执行.这称为配置阶段,在这里我们有机会定制我们的服务.
configureService(serviceProvider);
3.通过调用serviceProvider的$ get方法创建最终服务实例.
serviceInstance = serviceProvider.$get()
使用提供语法创建服务的示例代码:
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();
Service使用构造函数,Angular使用'new'关键字调用此构造函数来创建服务实例. serviceInstance = new fnServiceConstructor();
Provider定义了一个providerConstructor函数,这个providerConstructor函数定义了一个工厂函数$ get.Angular调用$ get()来创建服务对象.提供程序语法具有在实例化之前配置服务对象的附加优势. serviceInstance = $ get();
Lui*_*rez 85
正如几个人在这里正确指出的那样,工厂,提供商,服务,甚至价值和常数都是同一件事的版本.您可以将更一般的内容剖析provider到所有这些中.像这样:
这是这张图片来自的文章:
pix*_*its 63
厂
您为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');
});
小智 56
在与提供商玩游戏时,我注意到一些有趣的事
对于服务提供者而言,注射剂的可见性与服务和工厂的可见性不同.如果声明AngularJS为"常量"(例如myApp.constant('a', 'Robert');),则可以将其注入服务,工厂和提供程序.
但是如果你声明一个AngularJS"值"(例如.,myApp.value('b', {name: 'Jones'});),你可以将它注入服务和工厂,但不能注入提供者创建函数.但是,您可以将其注入$get为您的提供程序定义的函数中.AngularJS文档中提到了这一点,但很容易错过.您可以在值和常量方法的部分中的%提供页面上找到它.
<div ng-app="MyAppName">
<div ng-controller="MyCtrl">
<p>from Service: {{servGreet}}</p>
<p>from Provider: {{provGreet}}</p>
</div>
</div>
<script>
var myApp = angular.module('MyAppName', []);
myApp.constant('a', 'Robert');
myApp.value('b', {name: 'Jones'});
myApp.service('greetService', function(a,b) {
this.greeter = 'Hi there, ' + a + ' ' + b.name;
});
myApp.provider('greetProvider', function(a) {
this.firstName = a;
this.$get = function(b) {
this.lastName = b.name;
this.fullName = this.firstName + ' ' + this.lastName;
return this;
};
});
function MyCtrl($scope, greetService, greetProvider) {
$scope.servGreet = greetService.greeter;
$scope.provGreet = greetProvider.fullName;
}
</script>
She*_*yan 45
对于新手而言,这是一个非常令人困惑的部分,我试图用简单的词语来澄清它
AngularJS服务:用于与控制器中的服务引用共享实用程序功能.服务本质上是单例,因此对于一个服务,在浏览器中只创建一个实例,并在整个页面中使用相同的引用.
在服务中,我们使用此对象创建函数名称作为属性.
AngularJS Factory:Factory的目的也与Service相同,但在这种情况下,我们创建一个新对象并添加函数作为此对象的属性,最后我们返回此对象.
AngularJS Provider:这个目的也是一样的,但Provider提供了它的$ get函数的输出.
http://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider解释了定义和使用服务,工厂和提供商的问题.
- 工厂和提供者也是单例对象吗？在服务方面建议工厂的任何区域？ (2认同)
Luk*_*ski 34
对我来说,理解差异的最好和最简单的方法是:
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
}
}
最简单的思考方式如下:
- 服务是一个单例对象实例.如果要为代码提供单例对象,请使用服务.
- 工厂是一个班级.如果要为代码提供自定义类,请使用工厂(由于已经实例化,因此无法使用服务).
工厂的"类"示例在评论中提供,以及提供商差异.
yoe*_*alb 33
我对此事的澄清:
基本上所有提到的类型(服务,工厂,提供商等)只是创建和配置全局变量(当然对于整个应用程序来说是全局变量),就像旧的全局变量一样.
虽然不建议使用全局变量,但这些全局变量的实际用途是通过将变量传递给相关控制器来提供依赖注入.
创建"全局变量"的值有很多级别的复杂性:
- 常量
这定义了一个在整个应用程序中不应该被修改的实际常量,就像其他语言中的常量一样(JavaScript缺少的东西). - 值
这是一个可修改的值或对象,它可以作为一些全局变量,甚至可以在创建其他服务或工厂时注入(参见下文).但是,它必须是一个" 字面值 ",这意味着必须写出实际值,并且不能使用任何计算或编程逻辑(换句话说39或myText或{prop:"value"}都可以,但是2 + 2不是). - 工厂
更一般的值,可以立即计算.它的工作原理是将函数传递给AngularJS,其中包含计算值所需的逻辑,AngularJS执行它,并将返回值保存在命名变量中.
请注意,可以返回一个对象(在这种情况下它将起到类似于服务的作用)或一个函数(将作为回调函数保存在变量中). - 服务
服务是一个更精简的工厂版本,仅当值是一个对象时才有效,它允许直接在函数中编写任何逻辑(就好像它是一个构造函数),以及声明和访问使用this关键字的对象属性. - 提供者
与工厂的简化版本的服务不同,提供者是一种更复杂但更灵活的初始化"全局"变量的方式,最大的灵活性是从app.config设置值的选项.
它的工作方式类似于使用服务和提供者的组合,通过向提供者传递一个函数,该函数具有使用this关键字声明的属性,可以从中使用app.config.
然后它需要一个单独的$ .get函数,该函数由AngularJS在通过app.config文件设置上述属性后执行,并且这个$ .get函数的行为与上面的工厂一样,因为它的返回值用于初始化"global" "变量.
saj*_*jan 26
我的理解在下面非常简单.
工厂: 您只需在工厂内创建一个对象并将其返回.
服务:
您只需要一个使用此关键字定义函数的标准函数.
提供者:
$get您定义了一个对象,它可用于获取返回数据的对象.
Yar*_*rin 24
Angular文档摘要:
- 有五种配方类型定义了如何创建对象:Value, Factory,Service,Provider和Constant.
- 工厂和服务是最常用的食谱.它们之间的唯一区别是Service配方更适合自定义类型的对象,而Factory可以生成JavaScript原语和函数.
- 该供应商的食谱是核心配方类型和所有其他的人都在它只是语法糖.
- 提供者是最复杂的配方类型.除非要构建需要全局配置的可重用代码,否则不需要它.
来自SO的最佳答案:
/sf/answers/1884696411/ (< - GOOD)
/sf/answers/1908471771/
/sf/answers/1159630111/
Ved*_*Ved 18
所有好的答案已经存在.我想在服务和工厂上增加几点.随着服务/工厂之间的差异.人们也可以有这样的问题:
- 我应该使用服务还是工厂？有什么不同？
- 他们是一样的还是有同样的行为？
让我们从服务和工厂之间的区别开始:
两者都是单身人士:每当Angular第一次将这些视为依赖时,它就会创建一个服务/工厂实例.创建实例后,将永久使用相同的实例.
可用于对具有行为的对象建模:它们都可以包含方法,内部状态变量等.虽然你编写代码的方式会有所不同.
服务:
服务是构造函数,Angular将通过调用new来实例化它yourServiceName().这意味着一些事情.
- 函数和实例变量将是.的属性
this. - 您不需要返回值.当Angular调用时
new yourServiceName(,它将接收this包含您放置的所有属性的对象.
示例示例:
angular.service('MyService', function() {
this.aServiceVariable = "Ved Prakash"
this.aServiceMethod = function() {
return //code
};
});
当Angular将此
MyService服务注入依赖于它的控制器时,该控制器将获得一个MyService可以调用函数的控件,例如MyService.aServiceMethod().
小心this:
由于构造的服务是一个对象,因此当它们被调用时,它内部的方法可以引用它:
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++;
};
});
您可能想要ScoreKeeper.setScore在一个承诺链中调用,例如,如果您通过从服务器抓取它来初始化分数:$http.get('/score').then(ScoreKeeper.setScore).这样做的问题是ScoreKeeper.setScore将被this绑定调用,null您将得到错误.更好的方法是$http.get('/score').then(ScoreKeeper.setScore.bind(ScoreKeeper)).无论您是否选择在服务方法中使用此方法,请小心如何调用它们.
从以下位置返回值Service:
由于JavaScript构造函数的工作方式,如果(i.e., an Object)从constructor函数返回复杂值,调用者将获取该Object而不是此实例.
这意味着您基本上可以从下面复制粘贴工厂示例,替换factory为service,并且它将起作用:
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个问题的答案:
在大多数情况下,只需坚持使用工厂的一切.他们的行为更容易理解.没有选择是否返回一个值,而且如果你做错了就不会引入错误.
不过,当我谈到将它们作为依赖项注入时,我仍将它们称为"服务".
服务/工厂行为非常相似,有些人会说任何一个都很好.这有点真实,但我发现更容易遵循John Papa的风格指南的建议,只是坚持工厂.**
ske*_*r88 16
另外一个澄清是工厂可以创建函数/原语,而服务则不能.看看这个的jsfiddle基于Epokk的:http://jsfiddle.net/skeller88/PxdSP/1351/.
工厂返回一个可以调用的函数:
myApp.factory('helloWorldFromFactory', function() {
return function() {
return "Hello, World!";
};
});
工厂还可以使用可以调用的方法返回一个对象:
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
该服务返回一个对象,该对象具有可以调用的方法:
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
有关详细信息,请参阅我在差异上写的帖子:http://www.shanemkeller.com/tldr-services-vs-factories-in-angular/
ses*_*ses 16
已有好的答案,但我只是想分享这个.
首先:提供者是创建service(单例对象)的方式/配方,假设由$ injector注入(AngulaJS如何处理IoC模式).
和价值,工厂,服务和常数(4种方式) - 提供者方式/接受的语法糖.
有Service vs Factory部分已覆盖:
https://www.youtube.com/watch?v=BLzNCkPn3ao
服务new实际上是关于关键字,我们知道4件事:
- 创造全新的对象
- 将其链接到其
prototype对象 - 连接
context到this - 并返回
this
而Factory是关于工厂模式的 - 包含返回像该服务一样的对象的函数.
- 能否使用其他服务(具有依赖性)
- 服务初始化
- 延迟/延迟初始化
这个简单/短视频:也包括提供商:https://www.youtube.com/watch？v = HvTZbQ_hUZY(你看到它们可以看到它们从工厂到提供商的方式)
在应用程序完全启动/初始化之前,提供程序配方主要在应用程序配置中使用.
BEJ*_*SAD 14
阅读完所有这些帖子后,它给我带来了更多的困惑..但仍然都是值得信息的......最后我发现下面的表格会给出简单的比较信息
- 注入器使用配方创建两种类型的对象:服务和专用对象
- 有五种配方类型定义了如何创建对象:Value,Factory,Service,Provider和Constant.
- 工厂和服务是最常用的食谱.它们之间的唯一区别是Service配方更适合自定义类型的对象,而Factory可以生成JavaScript原语和函数.
- 提供者配方是核心配方类型,所有其他配方只是语法糖.
- 提供者是最复杂的配方类型.除非要构建需要全局配置的可重用代码,否则不需要它.
- 除Controller外的所有特殊用途对象都是通过工厂配方定义的.
并且对于初学者的理解: -这可能不正确的用例,但在高级别这是这三个用例.
- 如果要在角度模块中使用配置功能,则应创建为提供者
angular.module('myApp').config(function($testProvider){
$testProvider.someFunction();
})- Ajax呼叫或第三方集成需要服务.
- 对于数据操作,将其创建为工厂
对于基本方案,工厂和服务的行为相同.
Jam*_*ine 13
以下是我在AngularjS中作为对象工厂的代码模板提出的一些broilerplate代码.我用Car/CarFactory作为例子来说明.在控制器中实现简单的实现代码.
<script>
angular.module('app', [])
.factory('CarFactory', function() {
/**
* BroilerPlate Object Instance Factory Definition / Example
*/
this.Car = function() {
// initialize instance properties
angular.extend(this, {
color : null,
numberOfDoors : null,
hasFancyRadio : null,
hasLeatherSeats : null
});
// generic setter (with optional default value)
this.set = function(key, value, defaultValue, allowUndefined) {
// by default,
if (typeof allowUndefined === 'undefined') {
// we don't allow setter to accept "undefined" as a value
allowUndefined = false;
}
// if we do not allow undefined values, and..
if (!allowUndefined) {
// if an undefined value was passed in
if (value === undefined) {
// and a default value was specified
if (defaultValue !== undefined) {
// use the specified default value
value = defaultValue;
} else {
// otherwise use the class.prototype.defaults value
value = this.defaults[key];
} // end if/else
} // end if
} // end if
// update
this[key] = value;
// return reference to this object (fluent)
return this;
}; // end this.set()
}; // end this.Car class definition
// instance properties default values
this.Car.prototype.defaults = {
color: 'yellow',
numberOfDoors: 2,
hasLeatherSeats: null,
hasFancyRadio: false
};
// instance factory method / constructor
this.Car.prototype.instance = function(params) {
return new
this.constructor()
.set('color', params.color)
.set('numberOfDoors', params.numberOfDoors)
.set('hasFancyRadio', params.hasFancyRadio)
.set('hasLeatherSeats', params.hasLeatherSeats)
;
};
return new this.Car();
}) // end Factory Definition
.controller('testCtrl', function($scope, CarFactory) {
window.testCtrl = $scope;
// first car, is red, uses class default for:
// numberOfDoors, and hasLeatherSeats
$scope.car1 = CarFactory
.instance({
color: 'red'
})
;
// second car, is blue, has 3 doors,
// uses class default for hasLeatherSeats
$scope.car2 = CarFactory
.instance({
color: 'blue',
numberOfDoors: 3
})
;
// third car, has 4 doors, uses class default for
// color and hasLeatherSeats
$scope.car3 = CarFactory
.instance({
numberOfDoors: 4
})
;
// sets an undefined variable for 'hasFancyRadio',
// explicitly defines "true" as default when value is undefined
$scope.hasFancyRadio = undefined;
$scope.car3.set('hasFancyRadio', $scope.hasFancyRadio, true);
// fourth car, purple, 4 doors,
// uses class default for hasLeatherSeats
$scope.car4 = CarFactory
.instance({
color: 'purple',
numberOfDoors: 4
});
// and then explicitly sets hasLeatherSeats to undefined
$scope.hasLeatherSeats = undefined;
$scope.car4.set('hasLeatherSeats', $scope.hasLeatherSeats, undefined, true);
// in console, type window.testCtrl to see the resulting objects
});
</script>
这是一个更简单的例子.我正在使用一些第三方库,它们期望"位置"对象暴露纬度和经度,但是通过不同的对象属性.我不想破解供应商代码,所以我调整了我传递的"位置"对象.
angular.module('app')
.factory('PositionFactory', function() {
/**
* BroilerPlate Object Instance Factory Definition / Example
*/
this.Position = function() {
// initialize instance properties
// (multiple properties to satisfy multiple external interface contracts)
angular.extend(this, {
lat : null,
lon : null,
latitude : null,
longitude : null,
coords: {
latitude: null,
longitude: null
}
});
this.setLatitude = function(latitude) {
this.latitude = latitude;
this.lat = latitude;
this.coords.latitude = latitude;
return this;
};
this.setLongitude = function(longitude) {
this.longitude = longitude;
this.lon = longitude;
this.coords.longitude = longitude;
return this;
};
}; // end class definition
// instance factory method / constructor
this.Position.prototype.instance = function(params) {
return new
this.constructor()
.setLatitude(params.latitude)
.setLongitude(params.longitude)
;
};
return new this.Position();
}) // end Factory Definition
.controller('testCtrl', function($scope, PositionFactory) {
$scope.position1 = PositionFactory.instance({latitude: 39, longitude: 42.3123});
$scope.position2 = PositionFactory.instance({latitude: 39, longitude: 42.3333});
}) // end controller
;
net*_*eet 12
作为参考这个页面和文档(自上次我看起来似乎有了很大的改进),我把以下真正的( - )世界演示放在一起,它使用了5种提供者中的4种; 价值,恒定,工厂和全面的供应商.
HTML:
<div ng-controller="mainCtrl as main">
<h1>{{main.title}}*</h1>
<h2>{{main.strapline}}</h2>
<p>Earn {{main.earn}} per click</p>
<p>You've earned {{main.earned}} by clicking!</p>
<button ng-click="main.handleClick()">Click me to earn</button>
<small>* Not actual money</small>
</div>
应用
var app = angular.module('angularProviders', []);
// A CONSTANT is not going to change
app.constant('range', 100);
// A VALUE could change, but probably / typically doesn't
app.value('title', 'Earn money by clicking');
app.value('strapline', 'Adventures in ng Providers');
// A simple FACTORY allows us to compute a value @ runtime.
// Furthermore, it can have other dependencies injected into it such
// as our range constant.
app.factory('random', function randomFactory(range) {
// Get a random number within the range defined in our CONSTANT
return Math.random() * range;
});
// A PROVIDER, must return a custom type which implements the functionality
// provided by our service (see what I did there?).
// Here we define the constructor for the custom type the PROVIDER below will
// instantiate and return.
var Money = function(locale) {
// Depending on locale string set during config phase, we'll
// use different symbols and positioning for any values we
// need to display as currency
this.settings = {
uk: {
front: true,
currency: '£',
thousand: ',',
decimal: '.'
},
eu: {
front: false,
currency: '€',
thousand: '.',
decimal: ','
}
};
this.locale = locale;
};
// Return a monetary value with currency symbol and placement, and decimal
// and thousand delimiters according to the locale set in the config phase.
Money.prototype.convertValue = function(value) {
var settings = this.settings[this.locale],
decimalIndex, converted;
converted = this.addThousandSeparator(value.toFixed(2), settings.thousand);
decimalIndex = converted.length - 3;
converted = converted.substr(0, decimalIndex) +
settings.decimal +
converted.substr(decimalIndex + 1);
converted = settings.front ?
settings.currency + converted :
converted + settings.currency;
return converted;
};
// Add supplied thousand separator to supplied value
Money.prototype.addThousandSeparator = function(value, symbol) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, symbol);
};
// PROVIDER is the core recipe type - VALUE, CONSTANT, SERVICE & FACTORY
// are all effectively syntactic sugar built on top of the PROVIDER construct
// One of the advantages of the PROVIDER is that we can configure it before the
// application starts (see config below).
app.provider('money', function MoneyProvider() {
var locale;
// Function called by the config to set up the provider
this.setLocale = function(value) {
locale = value;
};
// All providers need to implement a $get method which returns
// an instance of the custom class which constitutes the service
this.$get = function moneyFactory() {
return new Money(locale);
};
});
// We can configure a PROVIDER on application initialisation.
app.config(['moneyProvider', function(moneyProvider) {
moneyProvider.setLocale('uk');
//moneyProvider.setLocale('eu');
}]);
// The ubiquitous controller
app.controller('mainCtrl', function($scope, title, strapline, random, money) {
// Plain old VALUE(s)
this.title = title;
this.strapline = strapline;
this.count = 0;
// Compute values using our money provider
this.earn = money.convertValue(random); // random is computed @ runtime
this.earned = money.convertValue(0);
this.handleClick = function() {
this.count ++;
this.earned = money.convertValue(random * this.count);
};
});
工作演示.
A.B*_*A.B 12
这个答案解决了主题/问题
工厂,服务和常数 - 如何只是提供者食谱之上的语法糖？
要么
工厂,服务和供应商如何内部simailar
基本上会发生什么
当你犯了一个factory()它设置你function的第二个参数提供给供应商$get,并返回它(provider(name, {$get:factoryFn })),你得到的是provider,但没有属性/方法比其他$get的是provider(意味着你可以不配置此)
工厂的源代码
function factory(name, factoryFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
});
};
当service()它返回时,你提供一个工厂()function注入constructor(返回你在服务中提供的构造函数的实例)并返回它
源代码服务
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
};
因此,基本上在这两种情况下,您最终都会将提供者$ get设置为您提供的函数,但是您可以提供除$ get以外的任何内容,因为您最初可以在provider()中为配置块提供
ngu*_*yên 11
我知道很多优秀的答案,但我必须分享我的使用经验
1. service对于大多数默认情况
2. factory用于创建特定实例的服务
// factory.js ////////////////////////////
(function() {
'use strict';
angular
.module('myApp.services')
.factory('xFactory', xFactoryImp);
xFactoryImp.$inject = ['$http'];
function xFactoryImp($http) {
var fac = function (params) {
this._params = params; // used for query params
};
fac.prototype.nextPage = function () {
var url = "/_prc";
$http.get(url, {params: this._params}).success(function(data){ ...
}
return fac;
}
})();
// service.js //////////////////////////
(function() {
'use strict';
angular
.module('myApp.services')
.service('xService', xServiceImp);
xServiceImp.$inject = ['$http'];
function xServiceImp($http) {
this._params = {'model': 'account','mode': 'list'};
this.nextPage = function () {
var url = "/_prc";
$http.get(url, {params: this._params}).success(function(data){ ...
}
}
})();
和使用:
controller: ['xFactory', 'xService', function(xFactory, xService){
// books = new instance of xFactory for query 'book' model
var books = new xFactory({'model': 'book', 'mode': 'list'});
// accounts = new instance of xFactory for query 'accounts' model
var accounts = new xFactory({'model': 'account', 'mode': 'list'});
// accounts2 = accounts variable
var accounts2 = xService;
...
use*_*687 10
派对迟到了.但我认为这对于想要学习(或明确)使用工厂,服务和提供商方法开发Angular JS Custom Services的人更有帮助.
我看到了这个视频,它清楚地解释了开发AngularJS Custom Services的工厂,服务和提供商方法:
https://www.youtube.com/watch?v=oUXku28ex-M
源代码:http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service
此处发布的代码直接从上述来源复制,以使读者受益.
基于"工厂"的自定义服务的代码如下(与同步和异步版本以及调用http服务一起使用):
var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcFactory',
function($scope, calcFactory) {
$scope.a = 10;
$scope.b = 20;
$scope.doSum = function() {
//$scope.sum = calcFactory.getSum($scope.a, $scope.b); //synchronous
calcFactory.getSum($scope.a, $scope.b, function(r) { //aynchronous
$scope.sum = r;
});
};
}
]);
app.factory('calcFactory', ['$http', '$log',
function($http, $log) {
$log.log("instantiating calcFactory..");
var oCalcService = {};
//oCalcService.getSum = function(a,b){
// return parseInt(a) + parseInt(b);
//};
//oCalcService.getSum = function(a, b, cb){
// var s = parseInt(a) + parseInt(b);
// cb(s);
//};
oCalcService.getSum = function(a, b, cb) { //using http service
$http({
url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
method: 'GET'
}).then(function(resp) {
$log.log(resp.data);
cb(resp.data);
}, function(resp) {
$log.error("ERROR occurred");
});
};
return oCalcService;
}
]);自定义服务的"服务"方法代码(这与"工厂"非常相似,但与语法不同):
var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
$scope.a = 10;
$scope.b = 20;
$scope.doSum = function(){
//$scope.sum = calcService.getSum($scope.a, $scope.b);
calcService.getSum($scope.a, $scope.b, function(r){
$scope.sum = r;
});
};
}]);
app.service('calcService', ['$http', '$log', function($http, $log){
$log.log("instantiating calcService..");
//this.getSum = function(a,b){
// return parseInt(a) + parseInt(b);
//};
//this.getSum = function(a, b, cb){
// var s = parseInt(a) + parseInt(b);
// cb(s);
//};
this.getSum = function(a, b, cb){
$http({
url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
method: 'GET'
}).then(function(resp){
$log.log(resp.data);
cb(resp.data);
},function(resp){
$log.error("ERROR occurred");
});
};
}]);自定义服务的"提供者"方法的代码(如果您想开发可配置的服务,这是必要的):
var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
$scope.a = 10;
$scope.b = 20;
$scope.doSum = function(){
//$scope.sum = calcService.getSum($scope.a, $scope.b);
calcService.getSum($scope.a, $scope.b, function(r){
$scope.sum = r;
});
};
}]);
app.provider('calcService', function(){
var baseUrl = '';
this.config = function(url){
baseUrl = url;
};
this.$get = ['$log', '$http', function($log, $http){
$log.log("instantiating calcService...")
var oCalcService = {};
//oCalcService.getSum = function(a,b){
// return parseInt(a) + parseInt(b);
//};
//oCalcService.getSum = function(a, b, cb){
// var s = parseInt(a) + parseInt(b);
// cb(s);
//};
oCalcService.getSum = function(a, b, cb){
$http({
url: baseUrl + '/Sum?a=' + a + '&b=' + b,
method: 'GET'
}).then(function(resp){
$log.log(resp.data);
cb(resp.data);
},function(resp){
$log.error("ERROR occurred");
});
};
return oCalcService;
}];
});
app.config(['calcServiceProvider', function(calcServiceProvider){
calcServiceProvider.config("http://localhost:4467");
}]);最后,UI与上述任何服务一起使用:
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
<script type="text/javascript" src="t03.js"></script>
</head>
<body ng-app="app">
<div ng-controller="emp">
<div>
Value of a is {{a}},
but you can change
<input type=text ng-model="a" /> <br>
Value of b is {{b}},
but you can change
<input type=text ng-model="b" /> <br>
</div>
Sum = {{sum}}<br>
<button ng-click="doSum()">Calculate</button>
</div>
</body>
</html>小智 10
只是为了澄清一些事情,从AngularJS源代码中,您可以看到服务只调用工厂函数,而工厂函数又调用提供者函数:
function factory(name, factoryFn) {
return provider(name, { $get: factoryFn });
}
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}
让我们以一种简单的方式讨论在AngularJS中处理业务逻辑的三种方式:( 受Yaakov的Coursera AngularJS课程的启发)
服务:
句法:
app.js
var app = angular.module('ServiceExample',[]);
var serviceExampleController =
app.controller('ServiceExampleController', ServiceExampleController);
var serviceExample = app.service('NameOfTheService', NameOfTheService);
ServiceExampleController.$inject = ['NameOfTheService'] //protects from minification of js files
function ServiceExampleController(NameOfTheService){
serviceExampleController = this;
serviceExampleController.data = NameOfTheService.getSomeData();
}
function NameOfTheService(){
nameOfTheService = this;
nameOfTheService.data = "Some Data";
nameOfTheService.getSomeData = function(){
return nameOfTheService.data;
}
}
的index.html
<div ng-controller = "ServiceExampleController as serviceExample">
{{serviceExample.data}}
</div>
服务特色:
- Lazily Instantiated:如果没有注入,它将不会被实例化.因此要使用它必须将其注入模块.
- 单例:如果注入多个模块,则所有模块都只能访问一个特定实例.这就是在不同控制器之间共享数据非常方便的原因.
厂
首先让我们来看看语法:
app.js:
var app = angular.module('FactoryExample',[]);
var factoryController = app.controller('FactoryController', FactoryController);
var factoryExampleOne = app.factory('NameOfTheFactoryOne', NameOfTheFactoryOne);
var factoryExampleTwo = app.factory('NameOfTheFactoryTwo', NameOfTheFactoryTwo);
//first implementation where it returns a function
function NameOfTheFactoryOne(){
var factory = function(){
return new SomeService();
}
return factory;
}
//second implementation where an object literal would be returned
function NameOfTheFactoryTwo(){
var factory = {
getSomeService : function(){
return new SomeService();
}
};
return factory;
}
现在在控制器中使用以上两个:
var factoryOne = NameOfTheFactoryOne() //since it returns a function
factoryOne.someMethod();
var factoryTwo = NameOfTheFactoryTwo.getSomeService(); //accessing the object
factoryTwo.someMethod();
工厂特点:
- 遵循工厂设计模式.工厂是生产新物体或功能的中心位置.
- 不仅可以生产单件,还可以定制服务.
- 该
.service()方法是一个始终生成相同类型服务的工厂,这是一个单例,并且没有任何简单的方法来配置它的行为.该.service()方法通常用作不需要任何配置的快捷方式.
提供商
让我们再次看一下Syntax:
angular.module('ProviderModule', [])
.controller('ProviderModuleController', ProviderModuleController)
.provider('ServiceProvider', ServiceProvider)
.config(Config); //optional
Config.$inject = ['ServiceProvider'];
function Config(ServiceProvider) {
ServiceProvider.defaults.maxItems = 10; //some default value
}
ProviderModuleController.$inject = ['ServiceProvider'];
function ProviderModuleController(ServiceProvider) {
//some methods
}
function ServiceProvider() {
var provider = this;
provider.defaults = {
maxItems: 10
};
provider.$get = function () {
var someList = new someListService(provider.defaults.maxItems);
return someList;
};
}
}
提供者的特点:
- Provider是在Angular中创建服务的最灵活方法.
- 我们不仅可以创建一个可动态配置的工厂,而且在使用工厂时,使用提供程序方法,我们可以在整个应用程序的引导时自定义配置工厂一次.
- 然后,工厂可以在整个应用程序中使用自定义设置.换句话说,我们可以在应用程序启动之前配置此工厂.事实上,在角度文档中,提到了当我们使用其中一个
.service或多个.factory方法配置服务时,提供者方法实际上是在幕后执行的. - 该
$get函数直接附加到提供程序实例.该功能是工厂功能.换句话说,它就像我们用来为.factory方法提供的那个.在该功能中,我们创建自己的服务.该$get属性是一个函数,它使提供者成为提供者.AngularJS希望提供者有一个$ get属性,其值是Angular将其视为工厂函数的函数.但是,整个提供程序设置非常特殊的原因是我们可以config在服务提供程序中提供一些对象,并且通常会带有我们以后可以在步骤中覆盖的默认值,我们可以在其中配置整个应用程序.
工厂:工厂实际上在工厂内创建一个对象并将其返回.
service:您只有一个标准函数的服务,它使用this关键字来定义函数.
provider:提供者有一个你定义的$ get,它可以用来获取返回数据的对象.
从本质上讲,提供商,工厂和服务都是服务.当您需要的是$ get()函数时,Factory是服务的特例,允许您使用较少的代码编写它.
服务,工厂和供应商之间的主要区别在于其复杂性.服务是最简单的形式,工厂更健壮,供应商可在运行时配置.
以下是何时使用每个的摘要:
工厂:您提供的价值需要根据其他数据计算.
服务:您正在使用方法返回一个对象.
提供程序:您希望能够在配置阶段配置将在创建之前创建的对象.在应用程序完全初始化之前,主要在应用程序配置中使用提供程序.
| 归档时间： |
|
| 查看次数： |
760304 次 |
| 最近记录： |