angularjs中factory, service和provider

Angularjs 2019-01-14

<p style="border: 0px; font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol",Lato,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 21.14px">


<p style="border: 0px; font-family: "Segoe UI",sans-serif; font-size: 14px; line-height: 21.14px">在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了（因为service的底层机制是通过闭包实现，如果过分使用会导致内存泄露从而导致性能问题）


<p style="border: 0px; font-family: "Segoe UI",sans-serif; font-size: 14px; line-height: 21.14px">如何创建一个service
每个service方法中，我们都会看到两个参数：
1.name------service的名字
2.function------service中包含的代码


<p style="border: 0px; font-family: "Segoe UI",sans-serif; font-size: 14px; line-height: 21.14px">angularjs中有3种创建service的方法：service()，factory()和provider()。


<p style="border: 0px; font-family: "Segoe UI",sans-serif; font-size: 14px; line-height: 21.14px"> (1) factory()
Angular里面创建service最简单的方式是使用factory()方法
factory()让我们通过返回一个包含service方法和数据的对象来定义一个service
在service方法里面我们可以注入services，比如 $http 和 $q等factory()的示例代码：


<div class="cnblogs_code">

angular.module(,function($http) { 方法
    backendUrl =  service = {    方法和数据都放到一个对象中，并且返回这个对象，这就是factory
       user: {},
       setName: function(newName) {  方法
           service.user[] =] = $http.post(backendUrl +

在controller中使用factory()，将factory的名字注入即可

angular.module(,function($scope,User) { $scope.saveUser = User.save; 一个叫做save()的function赋给我们controller中的变量 });

<p style="border: 0px; font-family: "Segoe UI",sans-serif; font-size: 14px; line-height: 21.14px">什么时候使用factory()？
在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择
也就是说，我们可以用factory()来当做一个仓库，存储着我们的function和data注意：需要使用.config()来配置service的时候不能使用factory()方法


<p style="border: 0px; font-family: "Segoe UI",sans-serif; font-size: 14px; line-height: 21.14px">(2) service()
service()通过构造函数的方式让我们创建service，和factory()方法一样我们也可以在函数的定义里面看到服务的注入


<p style="border: 0px; font-family: "Segoe UI",sans-serif; font-size: 14px; line-height: 21.14px">service()示例代码：


<div class="cnblogs_code">

angular.module(,function($http) { 在这里注入我们需要的服务
     self = ;  函数创建的，那么service()中的function和data都要以this.data和this.function的方式进行声明
                           方法会持有构造函数创建的对象
    .user =.backendUrl = .setName =] =.setEmail =] =.save = $http.post(self.backendUrl +

在controller中使用service()，和factory()一样，将service的名字注入到controller中即可

angular.module(,User) { $scope.saveUser = User.save; });

什么时候使用service()？ 与factory()相比，由于service是通过构造函数的方式创造的，且持有创造对象本身，所以当我们在功能比较复杂的情况下，可以 通过service()中的方法和数据对controller中的变量进行赋值，从某种角度来说，service()和factory()的实现方式不同，但是二者在使用场景上却很接近注意：需要使用.config()来配置service的时候不能使用service()方法

(3)provider provider()是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法 provider()不同于service()和factory()，在注入其他的服务的时候不能在function()中注入

angular.module(.backendUrl = .setBackendUrl = (url) .backendUrl =.$ = function($http) { 在这里注入其他服务，不同于factory()与service()中的在 service =] =] = $http.post(self.backendUrl +

provider()是唯一一个可以在config()中进行配置的service

angular.module(fig(function(UserProvider) { fig()中配置provider UserProvider.setBackendUrl(

配置之后，我们才可以在controller中正常使用provider()

angular.module(,User) { $scope.saveUser =

什么时候使用.provider()？ 1.当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如，比如我们开发时要用到多个环境，测试环境，正式环境等，我们在应用初始化时，可以对provider()进行初始化

总结： 1.factory()就像一个仓库一样，存储着我们的方法和数据 2.service()在创建时会持有当前对象，调用了这个service()的对象就会被赋值（方法或者数据） 3.provider()是唯一一个可以在config()中进行配置的service，它在设计上和用处上与以上二者区别明显

转自：https://blog.csdn.net/sourcecode_poet/article/details/53509851

相关文章

AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题，...
AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：h...
AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...