一、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. 几个STL算法:includes,set_difference、set_intersection、set_symmetric_difference、set_union, pre_permutation, next_permutation

    includes: 测试有序序列中是否包含另一个序列的全部元素. template<class inputIterator1, class inputIterator2> bool inc ...

  2. [statsvn]-svn代码量统计

    用statasvn进行代码量统计的时候,第一步需要获取到项目的日志,但是我本机的svn1.4没有安装命令行,重新运行1.4的安装包也没有命令行的选项... 那就升级到最新的svn1.8好了,下载最新的 ...

  3. WPF笔记(1.9 样式和控件模板)——Hello,WPF!

    原文:WPF笔记(1.9 样式和控件模板)--Hello,WPF! 资源的另一个用途是样式设置: <Window >  <Window.Resources>    <St ...

  4. SQLServer XML类型

    SQL Server从2005起开始支持xml类型,这个数据类型对于后期的改变非常有用.一对多的关系在后期变成了多对多的关系,XML类型就是一个不错的选择. 1.创建测试数据 创建表 --创建表,包含 ...

  5. JavaScript为unicode编码转换为中文

    代码laycode - v1.1 关于这样的数据转换为中文问题,常用的以下方法. 1. eval解析或new Function("'+ str +'")()  str = eval ...

  6. 关于ArcGIS Rest API

    ArcGIS Rest API: 9.3版本: http://resources.esri.com/help/9.3/arcgisserver/apis/rest/index.html 10版本:ht ...

  7. 函数fold 或reduce用法

    http://yi-programmer.com/2011-02-24_fold.html http://c2.com/cgi/wiki?FoldFunction http://rwh.readthe ...

  8. web前端设计:JQuery MINI UI

    JQuery MINIUI 个人感觉用起来很爽,所以在此记录之,以后开发过程可能作为备选项.它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验.在线下载地 ...

  9. UESTC_Islands 2015 UESTC Training for Data Structures<Problem J>

    J - Islands Time Limit: 30000/10000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Su ...

  10. Best Time to Buy and Sell Stock III 解答

    Question Say you have an array for which the ith element is the price of a given stock on day i. Des ...