一、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. 13年山东省赛 Mountain Subsequences(dp)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Mountain Subsequences Time Limit: 1 Sec   ...

  2. poj2774 Long Long Message(后缀数组or后缀自动机)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Long Long Message Time Limit: 4000MS   Me ...

  3. (原+转)pycharm中传入命令行参数

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5670821.html 参考网址: http://zhidao.baidu.com/question/5 ...

  4. C++11新特性

    c++语言的扩展和修正,不仅包含了核心语言的新机能,而且扩展了c++标准库(STL),并引入了大部分的C++ technical report 1程序库 C++11还包括大量新特性:包括lambda表 ...

  5. Android方法的传递值及其改变

    MainActivity如下: package cn.testchangevar; import android.os.Bundle; import android.view.View; import ...

  6. 单机/伪分布式Hadoop2.4.1安装文档

    转载自官方文档,最新版请见:http://hadoop.apache.org/docs/r2.4.1/hadoop-project-dist/hadoop-common/SingleCluster.h ...

  7. Fatal error: Undefined class constant 'MYSQL_ATTR_USE_BUFFERED_QUERY' in D:\inetpub\vhosts\zenpty.com\httpdocs\includes\database

    打开php.ini配置文件,找到php_pdo_mysql.dll,如果前面有分号";"则表示该行被注释掉了,将分号去掉,保存,然后重启apache服务,重新访问页面,问题解决了.

  8. 搜索打表大找规律 (hdu2045)

    不容易系列之(3)—— LELE的RPG难题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  9. C语言中的宏定义

    目录(?)[-] 简单宏定义 带参数的宏 运算符 运算符 宏的通用属性 宏定义中圆括号 创建较长的宏 较长的宏中的逗号运算符 宏定义中的do-while循环do 空操作的定义 预定义宏 C语言中常用的 ...

  10. 遇到的Fragment中使用setAdapter()设置ListView报空指针解决方案

    场景是这样,底部4个tab导航栏.用的fragment. 但其中一个fragmentActivity1中使用ListVIew的setAdapter()方法时,总是报NullPointerExcepti ...