一、service引导

刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别。This is where we'll start the twenty-five days of Angular calendar.

二、service

在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了。

这就是为什么使用controllers在应用里面传递数据不可靠的原因,特别是使用routing的时候。Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application(就是说services在应用的controllers、 方法、数据之前起到了很关键的作用)

现在我们开始看怎么创建service。每个方法我们都会看到下面两个一样的参数:

  • name-我们要定义的service的名字

  • function-service方法

他们都创建了相同的底层对象类型。实例化后,他们都创建了一个service,这些对象没有什么功能上的差别。

1、factory()

Angular里面创建service最简单的方式是使用factory()方法。

factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services,比如 $http 和 $q等。

angular.module('myApp.services')
.factory('User', function($http) { // injectables go here
var backendUrl = "http://localhost:3000"; var service = { // our factory definition
user: {},
setName: function(newName) {
service.user['name'] = newName;
},
setEmail: function(newEmail) {
service.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', {
user: service.user
});
}
}; return service;
});
  • 在应用里面使用factory()方法

在应用里面可以很容易地使用factory ,需要到的时候简单地注入就可以了

angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
$scope.saveUser = User.save;
});
  • 什么时候使用factory()方法

在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候,factory()是一个非常不错的选择。

注意:需要使用.config()来配置service的时候不能使用factory()方法

2、service()

service()通过构造函数的方式让我们创建service,我们可以使用原型模式替代javaScript原始的对象来定义service。

和factory()方法一样我们也可以在函数的定义里面看到服务的注入

angular.module('myApp.services')
.service('User', function($http) { // injectables go here
var self = this; // Save reference
this.user = {};
this.backendUrl = "http://localhost:3000";
this.setName = function(newName) {
self.user['name'] = newName;
}
this.setEmail = function(newEmail) {
self.user['email'] = newEmail;
}
this.save = function() {
return $http.post(self.backendUrl + '/users', {
user: self.user
})
}
});

这里的功能和使用factory()方法的方式一样,service()方法会持有构造函数创建的对象。

  • 在应用里面使用service()方法

    angular.module('myApp')
    .controller('MainCtrl', function($scope, User) {
    $scope.saveUser = User.save;
    });
    • 什么时候适合使用service()方法

    service()方法很适合使用在功能控制比较多的service里面

    注意:需要使用.config()来配置service的时候不能使用service()方法

    3、provider()

    provider()是创建service最底层的方式,这也是唯一一个可以使用.config()方法配置创建service的方法

    不像上面提到的方法那样,我们在定义的this.$get()方法里面进行依赖注入

    angular.module('myApp.services')
    .provider('User', function() {
    this.backendUrl = "http://localhost:3000";
    this.setBackendUrl = function(newUrl) {
    if (url) this.backendUrl = newUrl;
    }
    this.$get = function($http) { // injectables go here
    var self = this;
    var service = {
    user: {},
    setName: function(newName) {
    service.user['name'] = newName;
    },
    setEmail: function(newEmail) {
    service.user['email'] = newEmail;
    },
    save: function() {
    return $http.post(self.backendUrl + '/users', {
    user: service.user
    })
    }
    };
    return service;
    }
    });
    • 在应用里面使用provider()方法

    为了给service进行配置,我们可以将provider注入到.config()方法里面

    angular.module('myApp')
    .config(function(UserProvider) {
    UserProvider.setBackendUrl("http://myApiBackend.com/api");
    })

    这样我们就可以和其他方式一样在应用里面使用这个service了

    angular.module('myApp')
    .controller('MainCtrl', function($scope, User) {
    $scope.saveUser = User.save;
    });
    • 什么时候使用provider()方法

    1. 当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如,我们需要配置services在不同的部署环境里面(开发,演示,生产)使用不同的后端处理的时候就可以使用到了

    2. 当我们打算发布开源provider()也是首选创建service的方法,这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。

    还可以看看这篇翻译:http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make

    点击查看完整的代码:https://gist.github.com/auser/7743235  

  • 原文链接:    http://my.oschina.net/tanweijie/blog/295067

AngularJS中serivce,factory,provider的区别的更多相关文章

  1. AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

    简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...

  2. AngularJS 中的 factory、 service 和 provider区别,简单易懂

    转自:http://blog.csdn.net/ywl570717586/article/details/51306176 初学 AngularJS 时, 肯定会对其提供 factory . serv ...

  3. 简介AngularJS中使用factory和service的方法

    AngularJS支持使用服务的体系结构“关注点分离”的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们即维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服 ...

  4. angularjs 中的$digest和$apply区别

    $digest和$apply 在Angular中,有$apply和$digest两个函数,我们刚才是通过$digest来让这个数据应用到界面上.但这个时候,也可以不用$digest,而是使用$appl ...

  5. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  6. AngularJS中的Provider们:Service和Factory等的区别

    引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别,啥时候该用啥,之前一直傻 ...

  7. 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别,你知道么?

    在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...

  8. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  9. [译]AngularJS中几种Providers(Factory, Service, Provider)的区别

    原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? Angula ...

随机推荐

  1. (原+转)ubuntu16中安装opencv2.4.11

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5638117.html 参考网址: http://www.cnblogs.com/jeakon/arch ...

  2. [转]Cocos2d-x建工程时避免copy文件夹和库

    原文链接:  http://www.cnblogs.com/andyque/archive/2011/09/27/2192920.html 在上一篇教程中,我们演示了如何使用VS2010来新建一个工程 ...

  3. <Programming Collective Intelligence> Chapter2:Making Recommendations

    <Programming Collective Intelligence> Chapter2:Making Recommendations 欧几里得距离评价 皮尔逊相关度评价 它相比于欧几 ...

  4. NET Core的知识

    NET Core的基础知识补遗 阅读目录 前言 在.NET Core之前 在.NET Core起步 .NET Core 1.0 .NET平台 开发环境 FAQ 写在最后 回到目录 前言 .NET Co ...

  5. 如果设置Keil从C代码编译出来的hex文件地址从0x8000开始

    和MON51的设置一样,这样作:1.把Startup.a51拷贝到工程目录加入工程,修改125行的      CSEG    AT      0  为   CSEG    AT      0X8000 ...

  6. qt 多线程之间通讯

    问题描述:界面线程MainApp为主线程,工作线程MyThread为一子线程,从工作线程向主线程传递字符串用于在主线程中显示. Qt的信号与槽机制可以将任何继承自QObject类的对象捆绑在一起,使不 ...

  7. HDU 3308 LCIS(线段树单点更新区间合并)

    LCIS Given n integers. You have two operations: U A B: replace the Ath number by B. (index counting ...

  8. Mac 删除Openfire

    首先,确保你已经关掉了openfire 打开终端 (在应用程序-->实用工具-->) 输入以下命令 sudo rm -rf /Library/PreferencePanes/Openfir ...

  9. 3 x 8 = 23(火了)

    颜回爱学习,德性又好,是孔子的得意门生.一天,颜回去街上办事,见一家布店前围满了人.他上前一问,才知道是买布的跟卖布的发生了纠纷. 只听买布的大嚷大叫:「三八就是二十三,你为啥要我二十四个钱?」颜回走 ...

  10. SQL Server 2000 函数使用---CAST 和 CONVERT

    本文来自:http://www.cnblogs.com/xh831213/category/47654.html 将某种数据类型的表达式显式转换为另一种数据类型.CAST 和 CONVERT 提供相似 ...