AngularJS中的服务、提供商和工厂之间有什么区别？
当前回答
让我们以简单的方式讨论AngularJS中处理业务逻辑的三种方法：（灵感来自Yaakov的Coursera AngularJS课程）
服务：
语法：
应用程序.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;
}
}
索引html
<div ng-controller = "ServiceExampleController as serviceExample">
{{serviceExample.data}}
</div>
服务特点：
懒惰实例化：如果它没有被注入，就永远不会被实例化。因此，要使用它，必须将其注入到模块中。Singleton：如果注入到多个模块，所有模块都只能访问一个特定的实例。这就是为什么在不同控制器之间共享数据非常方便的原因。
工厂
首先让我们看看语法：
应用.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（）方法通常用作不需要任何配置的快捷方式。
供应商
让我们先来看看语法：
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中创建服务的最灵活的方法。我们不仅可以创建一个可动态配置的工厂，而且在使用工厂时，通过提供程序方法，我们可以在整个应用程序启动时自定义配置工厂一次。然后，工厂可以在整个应用程序中使用自定义设置。换句话说，我们可以在应用程序启动之前配置此工厂。事实上，在angular文档中提到，当我们使用.service或.factory方法配置服务时，提供者方法实际上是在幕后执行的。$get是一个直接附加到提供程序实例的函数。该函数是工厂函数。换句话说，它就像我们用来提供给.factory方法的一样。在该函数中，我们创建自己的服务。这个$get属性是一个函数，它使提供者成为提供者。AngularJS希望提供程序具有$get属性，该属性的值是Angular将作为工厂函数处理的函数。但使整个提供程序设置非常特殊的是，我们可以在服务提供程序内部提供一些配置对象，这通常带有默认值，我们可以稍后在步骤中覆盖这些默认值，在该步骤中我们可以配置整个应用程序。
其他回答
句法糖是区别。只需要提供程序。或者换句话说，只有提供者才是真正的角度，所有其他提供者都是派生的（以减少代码）。还有一个简单的版本，叫做Value（），它只返回值，不返回计算或函数。偶数值是从提供程序派生的！
那么，为什么会出现这样的并发症，为什么我们不能只使用提供者而忘记其他一切呢？它应该可以帮助我们轻松编写代码，更好地进行沟通。开玩笑的回答是，它越复杂，框架的销售就越好。
可以返回value=value的提供程序一个可以实例化并返回=工厂（+值）提供程序可以实例化+做某事=服务（+工厂，+值）提供者=必须包含名为$get（+Factory，+Service，+Value）的属性
角注入为我们得出这一结论提供了第一个线索。
$injector用于检索提供者“不是服务，不是工厂，而是提供者”定义的对象实例。
更好的答案是：Angular服务由服务工厂创建。这些服务工厂是由服务提供程序创建的函数。服务提供程序是构造函数。实例化时，它们必须包含名为$get的属性，该属性保存服务工厂函数
因此，主供应器和注入器都将就位：）。当$get可以通过从IServiceProvider继承而在提供程序中实现时，Typescript就变得有趣了。
对我来说，理解差异的最佳和最简单的方法是：
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中处理业务逻辑的三种方法：（灵感来自Yaakov的Coursera AngularJS课程）
服务：
语法：
应用程序.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;
}
}
索引html
<div ng-controller = "ServiceExampleController as serviceExample">
{{serviceExample.data}}
</div>
服务特点：
懒惰实例化：如果它没有被注入，就永远不会被实例化。因此，要使用它，必须将其注入到模块中。Singleton：如果注入到多个模块，所有模块都只能访问一个特定的实例。这就是为什么在不同控制器之间共享数据非常方便的原因。
工厂
首先让我们看看语法：
应用.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（）方法通常用作不需要任何配置的快捷方式。
供应商
让我们先来看看语法：
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中创建服务的最灵活的方法。我们不仅可以创建一个可动态配置的工厂，而且在使用工厂时，通过提供程序方法，我们可以在整个应用程序启动时自定义配置工厂一次。然后，工厂可以在整个应用程序中使用自定义设置。换句话说，我们可以在应用程序启动之前配置此工厂。事实上，在angular文档中提到，当我们使用.service或.factory方法配置服务时，提供者方法实际上是在幕后执行的。$get是一个直接附加到提供程序实例的函数。该函数是工厂函数。换句话说，它就像我们用来提供给.factory方法的一样。在该函数中，我们创建自己的服务。这个$get属性是一个函数，它使提供者成为提供者。AngularJS希望提供程序具有$get属性，该属性的值是Angular将作为工厂函数处理的函数。但使整个提供程序设置非常特殊的是，我们可以在服务提供程序内部提供一些配置对象，这通常带有默认值，我们可以稍后在步骤中覆盖这些默认值，在该步骤中我们可以配置整个应用程序。
从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;
});
};
我的理解很简单。
工厂：您只需在工厂内部创建一个对象并返回它。
服务：
您只需要一个使用此关键字定义函数的标准函数。
供应商：
您定义了一个$get对象，它可以用于获取返回数据的对象。
推荐文章
- 如何突出显示当前菜单项?
- 如何使用AngularJS获取url参数
- angularjs中的compile函数和link函数有什么区别
- 如何向一个5岁的孩子解释依赖注入?
- Ng-repeat结束事件
- 缓存一个HTTP 'Get'服务响应在AngularJS?
- 从ng-click获取原始元素
- Angular JS:当我们已经有了具有作用域的指令控制器时，指令的link函数还需要什么?
- Angularjs的ng-model不能在ng-if中工作
- AngularJS禁用了开发机器上的部分缓存
- 如何在AngularJS中动态添加指令?
- 如何在AngularJS中观察路由变化?
- 实例化模块失败[$injector:unpr]未知提供者:$routeProvider
- 在AngularJS中集成jQuery插件的正确方法
- 如何设置一个iframe src属性从一个变量在AngularJS
