AngularJS中的服务、提供商和工厂之间有什么区别？
当前回答
JS Fiddle演示
工厂/服务/供应商的“Hello world”示例：
var myApp=角度模块（'myApp'，[]）；//服务风格，可能是最简单的myApp.service（'helloWorldFromService'，函数（）{this.sayHello=函数（）{return“你好，世界！”；};});//工厂风格，更加复杂myApp.factory（'helloWorldFromFactory'，函数（）{返回{sayHello:函数（）{return“你好，世界！”；}};});//提供程序风格、全面、可配置版本myApp.provider（'helloWorld'，函数（）{this.name='默认值'；这一点$get=函数（）{var名称=this.name；返回{sayHello:函数（）{return“您好，”+name+“！”；}}};this.setName=函数（名称）{this.name=名称；};});//嘿，我们可以配置提供者！myApp.config（函数（helloWorldProvider）{helloWorldProvider.setName（'World'）；});函数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>
其他回答
对我来说，理解差异的最佳和最简单的方法是：
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
}
}
最简单的思考方式如下：
服务是一个单例对象实例。如果您想为代码提供单例对象，请使用服务。工厂是一个阶级。如果您想为代码提供自定义类，请使用工厂（无法使用服务完成，因为它们已经实例化）。
工厂“类”示例在周围的注释中提供，以及提供程序差异。
派对有点晚了。但我认为这对那些想学习（或清楚）如何使用工厂、服务和提供者方法开发Angular JS自定义服务的人更有用。
我看到了这段视频，它清楚地解释了开发AngularJS定制服务的工厂、服务和供应商方法：
https://www.youtube.com/watch?v=oUXku28ex-米
源代码：http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service
此处发布的代码直接从上述来源复制，以使读者受益。
基于“工厂”的定制服务的代码如下（它与同步和异步版本一起调用http服务）：
var app=角度模块（“app”，[]）；app.controller（'imp'，['$scope'，'calcFactory'，函数（$scope，calcFactory）{$scope.a=10；$scope.b=20；$scope.doSum=函数（）{//$scope.sum=calcFactory.getSum（$scope.a，$scope.b）//同步的calcFactory.getSum（$scope.a，$scope.b，函数（r）{//aynchronous$scope.sum=r；});};}]);app.factory（'calFactory'，['$http'，'$log'，函数（$http，$log）{$log.log（“实例化calcFactory.”）；var oCalcService=｛｝；//oCalcService.getSum=函数（a，b）{//返回parseInt（a）+parseInt（b）；//};//oCalcService.getSum=函数（a，b，cb）{//var s=parseInt（a）+parseInt（b）；//cb（s）；//};oCalcService.getSum=函数（a，b，cb）｛//使用http服务$http({url:'http://localhost:4467/Sum?a='+a+'和b='+b，方法：'GET'}).然后（函数（resp）{$log.log（对应数据）；cb（相应数据）；}，函数（resp）{$log.error（“出现错误”）；});};return oCalcService；}]);
自定义服务的“服务”方法的代码（这与“工厂”非常相似，但从语法角度来看不同）：
var app=角度模块（“app”，[]）；app.controller（'imp'，['$scope'，'calcService'，函数（$scope，calcService）{$scope.a=10；$scope.b=20；$scope.doSum=函数（）{//$scope.sum=calcService.getSum（$scope.a，$scope.b）；calcService.getSum（$scope.a，$scope.b，函数（r）{$scope.sum=r；}); };}]);app.service（'calService'，['$http'，'$log'，函数（$http，$log）{$log.log（“实例化calcService..”）；//this.getSum=函数（a，b）{//返回parseInt（a）+parseInt（b）；//};//this.getSum=函数（a，b，cb）{//var s=parseInt（a）+parseInt（b）；//cb（s）；//};this.getSum=函数（a，b，cb）{$http({url:'http://localhost:4467/Sum?a='+a+'和b='+b，方法：'GET'}).然后（函数（resp）{$log.log（对应数据）；cb（相应数据）；}，函数（resp）{$log.error（“出现错误”）；});};}]);
自定义服务的“提供者”方法的代码（如果您想开发可配置的服务，这是必要的）：
var app=角度模块（“app”，[]）；app.controller（'imp'，['$scope'，'calcService'，函数（$scope，calcService）{$scope.a=10；$scope.b=20；$scope.doSum=函数（）{//$scope.sum=calcService.getSum（$scope.a，$scope.b）；calcService.getSum（$scope.a，$scope.b，函数（r）{$scope.sum=r；}); };}]);app.provider（'calService'，函数（）{var baseUrl=“”；this.config=函数（url）{baseUrl=url；};这一点$get=['$log'，'$http'，函数（$log，$http）{$log.log（“正在实例化calcService…”）var oCalcService=｛｝；//oCalcService.getSum=函数（a，b）{//返回parseInt（a）+parseInt（b）；//};//oCalcService.getSum=函数（a，b，cb）{//var s=parseInt（a）+parseInt（b）；//cb（s）； //};oCalcService.getSum=函数（a，b，cb）{$http({url:baseUrl+'/Sum？a=‘+a+’&b=‘+b，方法：'GET'}).然后（函数（resp）{$log.log（对应数据）；cb（相应数据）；}，函数（resp）{$log.error（“出现错误”）；});}; return oCalcService；}];});app.config（['calServiceProvider'，函数（calServiceProvider）{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＞a的值为｛｛a｝｝，但你可以改变<input-type=text-ng-model=“a”/><br>b的值是{{b}}，但你可以改变<input-type=text-ng-model=“b”/><br></div>总和＝｛｛Sum｝｝<br><button ng click=“doSum（）”>计算</button></div></body></html>
所有服务均为单人服务；每个应用程序实例化一次。它们可以是任何类型，无论是原语、对象文本、函数，甚至是自定义类型的实例。
值、工厂、服务、常量和提供程序方法都是提供程序。他们教Injector如何实例化服务。
最冗长，但也是最全面的是提供者配方其余四种配方类型-价值、工厂、服务和常量-只是提供程序配方之上的语法糖。
Value Recipe是最简单的例子，您自己实例化服务，并将实例化的值提供给注入器。Factory配方为Injector提供了一个工厂函数，当它需要实例化服务时调用该函数。调用时，工厂函数创建并返回服务实例。服务的依赖项作为函数的参数注入。因此，使用此配方可增加以下功能：能够使用其他服务（具有依赖关系）服务初始化延迟/延迟初始化Service配方与Factory配方几乎相同，但这里Injector调用带有新运算符的构造函数，而不是工厂函数。提供商的配方通常是过度的。它通过允许您配置工厂的创建，增加了一个间接层。
只有当您想要公开API时，才应该使用Provider配方对于必须在应用程序启动。这通常只对可重复使用有用其行为可能需要在应用。常量配方与值配方类似，只是它允许您定义在配置阶段可用的服务。比使用Value配方创建的服务更快。与Values不同，它们不能使用decorator进行装饰。请参阅提供程序文档。
看完所有这些帖子后，这给我带来了更多的困惑……但所有的信息都是有价值的。。最后我找到了下表，它将通过简单的比较提供信息
注射器使用配方创建两种类型的对象：服务和特殊用途物体有五种配方类型定义了如何创建对象：Value，工厂、服务、供应商和常量。工厂和服务是最常用的配方。它们之间的唯一区别是，Service配方对自定义类型的对象更有效，而Factory可以生成JavaScript原语和函数。提供者配方是核心配方类型，所有其他配方都只是其语法上的糖。提供程序是最复杂的配方类型。除非您正在构建一段需要全局配置的可重用代码，否则您不需要它。除控制器外的所有特殊用途对象均通过工厂配方定义。
对于初学者来说：-这可能不正确的用例，但在高级别上，这是这三个用例的用例。
如果要在angular模块中使用，应将配置函数创建为提供程序
angular.module（'myApp'）.config（函数（$testProvider）{$testProvider.someFunction（）；})
Ajax调用或第三方集成需要提供服务。对于数据操作，将其创建为工厂
对于基本场景，工厂和服务的行为相同。
JS Fiddle演示
工厂/服务/供应商的“Hello world”示例：
var myApp=角度模块（'myApp'，[]）；//服务风格，可能是最简单的myApp.service（'helloWorldFromService'，函数（）{this.sayHello=函数（）{return“你好，世界！”；};});//工厂风格，更加复杂myApp.factory（'helloWorldFromFactory'，函数（）{返回{sayHello:函数（）{return“你好，世界！”；}};});//提供程序风格、全面、可配置版本myApp.provider（'helloWorld'，函数（）{this.name='默认值'；这一点$get=函数（）{var名称=this.name；返回{sayHello:函数（）{return“您好，”+name+“！”；}}};this.setName=函数（名称）{this.name=名称；};});//嘿，我们可以配置提供者！myApp.config（函数（helloWorldProvider）{helloWorldProvider.setName（'World'）；});函数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>
推荐文章
- 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禁用了开发机器上的部分缓存
