AngularJS中的服务、提供商和工厂之间有什么区别？
当前回答
服务与供应商与工厂：
我试图保持简单。这都是关于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（）；
其他回答
我知道很多很好的答案，但我必须分享我的使用经验1.大多数违约情况下的服务2.用于创建特定实例的服务的工厂
// 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;
...
了解AngularJS工厂、服务和提供商
所有这些都用于共享可重用的单例对象。它有助于在应用程序/各种组件/模块之间共享可重用代码。
来自文档服务/工厂：延迟实例化–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:
};
});
用法
当您需要在整个应用程序中共享单个对象时，请使用它。例如，经过验证的用户详细信息、可共享的方法/数据、实用程序功能等。
供应商
提供程序用于创建可配置的服务对象。您可以通过config函数配置服务设置。它使用$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.
};
};
});
用法
当您需要在服务对象可用之前为其提供模块化配置时，例如，假设您希望根据环境（如dev、stage或prod）设置API URL
注释只有提供程序在angular的配置阶段可用，而服务和工厂不是。
希望这能澄清您对工厂、服务和供应商的理解。
为了澄清这一点，从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邮件列表中，我得到了一个令人惊叹的线程，它解释了服务与工厂与供应商以及它们的注入用法。编写答案：
服务
语法：module.service（'serviceName'，function）；结果：当将serviceName声明为可注入参数时，将为您提供函数的实例。换句话说，新的FunctionYouPassedToService（）。
工厂
语法：module.factory（'factoryName'，function）；结果：当将factoryName声明为可注入参数时，将提供通过调用传递给module.factory的函数引用返回的值。
提供商
语法：module.provider（'providerName'，function）；结果：当将providerName声明为可注入参数时，将提供（newProviderFunction（））$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);
}
因此，工厂是一个负责创造价值的职能部门。注意，工厂函数可以要求其他依赖项。
但是，如果你想成为更多的OO，并拥有一个名为Greeter的类呢？
function Greeter(a) {
this.greet = function() {
return 'Hello ' + a;
}
}
然后，要实例化，必须编写
provide.factory('greeter', function(a) {
return new Greeter(a);
});
然后我们可以像这样在控制器中请求“问候者”
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');
}
顺便说一句，服务、工厂和价值都来自提供者。
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;
});
};
我注意到了一些有趣的事情，当我和提供者一起玩的时候。
与服务和工厂相比，供应商对注射剂的可见性有所不同。如果您声明AngularJS“常量”（例如，myApp.constant（'a'，'Robert'）；），您可以将其注入服务、工厂和提供商。
但是如果您声明一个AngularJS“value”（例如，myApp.value（'b'，{name:'Jones‘}）；），您可以将其注入服务和工厂，但不能注入提供程序创建函数。但是，您可以将其注入为提供者定义的$get函数中。AngularJS文档中提到了这一点，但很容易错过。您可以在%provide页面的value和constant方法部分找到它。
http://jsfiddle.net/R2Frv/1/
<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>
推荐文章
- 如何/何时使用ng-click调用路由?
- 在Angular JS中的控制器之间传递数据?
- 在ng-repeat结束时调用函数
- 我怎样才能获得承诺的价值?
- 我应该使用' this '还是' $scope ' ?
- Angular IE缓存$http的问题
- 删除数组的第一项(比如从堆栈中弹出)
- 从AngularJS的url中删除片段标识符(# symbol)
- AngularJS For循环与数字和范围
- 如何在AngularJS中进行分页?
- AngularJS $http和$resource
- 如何在AngularJS控制器上运行函数文档准备好了吗?
- 考虑将事件处理程序标记为“被动”以使页面响应更快
- AngularJS ng-class if-else表达式
- 在AngularJS中编写指令时，我如何决定不需要新的作用域、新的子作用域还是新的隔离作用域?
