本文转自:http://blog.csdn.net/zcl_love_wx/article/details/51404390

我看过敲过代码之后, 有了很深的理解, 这三个东西其实都是用来返回对象的。 但是应用上有所不同。

下面是讲述不同的主要内容:

1.factory

factory方式创建的服务,作用就是返回一个有属性有方法的对象。相当于:var f = myFactory();

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="myApp" ng-controller="myCtrl">
  9. <p>{{r}}</p>
  10. </div>
  11.  
  12. <script>
  13. //创建模型
  14. var app = angular.module('myApp', []);
  15.  
  16. //通过工厂模式创建自定义服务
  17. app.factory('myFactory', function() {
  18. var service = {};//定义一个Object对象'
  19. service.name = "张三";
  20. var age;//定义一个私有化的变量
  21. //对私有属性写getter和setter方法
  22. service.setAge = function(newAge){
  23. age = newAge;
  24. }
  25. service.getAge = function(){
  26. return age;
  27. }
  28. return service;//返回这个Object对象
  29. });
  30. //创建控制器
  31. app.controller('myCtrl', function($scope, myFactory) {
  32. myFactory.setAge(20);
  33. $scope.r =myFactory.getAge();
  34. alert(myFactory.name);
  35. });
  36. </script>
  37. </body>
  38. </html>

在自定义服务里注入服务示例,但不能注入$scope作用域对象

  1. <script>
  2. var app = angular.module('myApp', []);
  3. app.factory('myFactory', function($http,$q) {
  4. var service = {};
  5. service.name = "张三";
  6. //请求数据
  7. service.getData = function(){
  8. var d = $q.defer();
  9. $http.get("url")//读取数据的函数。
  10. .success(function(response) {
  11. d.resolve(response);
  12. })
  13. .error(function(){
  14. d.reject("error");
  15. });
  16. return d.promise;
  17. }
  18. return service;
  19. });
  20. app.controller('myCtrl', function($scope, myFactory) {
  21. //alert(myFactory.name);
  22. myFactory.getData().then(function(data){
  23. console.log(data);//正确时走这儿
  24. },function(data){
  25. alert(data)//错误时走这儿
  26. });;
  27. });
  28. </script>

2.service

通过service方式创建自定义服务,相当于new的一个对象:var s = new myService();,只要把属性和方法添加到this上才可以在controller里调用。

  1. <div ng-app="myApp" ng-controller="myCtrl">
  2. <h1>{{r}}</h1>
  3. </div>
  4. <script>
  5. var app = angular.module('myApp', []);
  6.  
  7. app.service('myService', function($http,$q) {
  8. this.name = "service";
  9. this.myFunc = function (x) {
  10. return x.toString(16);//转16进制
  11. }
  12. this.getData = function(){
  13. var d = $q.defer();
  14. $http.get("ursl")//读取数据的函数。
  15. .success(function(response) {
  16. d.resolve(response);
  17. })
  18. .error(function(){
  19. alert(0)
  20. d.reject("error");
  21. });
  22. return d.promise;
  23. }
  24. });
  25. app.controller('myCtrl', function($scope, myService) {
  26. $scope.r = myService.myFunc(255);
  27. myService.getData().then(function(data){
  28. console.log(data);//正确时走这儿
  29. },function(data){
  30. alert(data)//错误时走这儿
  31. });
  32. });
  33. </script>

3.provder

只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前,先进行模块范围的配置,那就应该选择 provider。需要注意的是:在config函数里注入provider时,名字应该是:providerName+Provider. 
使用Provider的优点就是,你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。 
当你使用Provider创建一个service时,唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

  1. <body>
  2. <div ng-app="myApp" ng-controller="myCtrl">
  3. </div>
  4.  
  5. <script>
  6. var app = angular.module('myApp', []);
  7.  
  8. //需要注意的是:在注入provider时,名字应该是:providerName+Provider
  9. app.config(function(myProviderProvider){
  10. myProviderProvider.setName("大圣");
  11. });
  12. app.provider('myProvider', function() {
  13. var name="";
  14. var test={"a":1,"b":2};
  15. //注意的是,setter方法必须是(set+变量首字母大写)格式
  16. this.setName = function(newName){
  17. name = newName
  18. }
  19.  
  20. this.$get =function($http,$q){
  21. return {
  22. getData : function(){
  23. var d = $q.defer();
  24. $http.get("url")//读取数据的函数。
  25. .success(function(response) {
  26. d.resolve(response);
  27. })
  28. .error(function(){
  29. d.reject("error");
  30. });
  31. return d.promise;
  32. },
  33. "lastName":name,
  34. "test":test
  35. }
  36. }
  37.  
  38. });
  39. app.controller('myCtrl', function($scope,myProvider) {
  40. alert(myProvider.lastName);
  41. alert(myProvider.test.a)
  42. myProvider.getData().then(function(data){
  43. //alert(data)
  44. },function(data){
  45. //alert(data)
  46. });
  47. });
  48. </script>
  49. </body>

4.在过滤器中注入自定义服务

  1. <body>
  2. <div ng-app="myApp">
  3. 在过滤器中使用服务:
  4. <h1>{{255 | myFormat}}</h1>
  5. </div>
  6.  
  7. <script>
  8. var app = angular.module('myApp', []);
  9. app.service('hexafy', function() {
  10. this.myFunc = function (x) {
  11. return x.toString(16);
  12. }
  13. });
  14. app.filter('myFormat',['hexafy', function(hexafy) {
  15. return function(x) {
  16. return hexafy.myFunc(x);
  17. };
  18. }]);
  19. </script>
  20. </body>

AngularJS系统学习之Factory,Service, Provider(工厂,服务,供应者)的更多相关文章

  1. angularjs factory,service,provider 自定义服务的不同

    angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...

  2. AngularJS 讲解五, Factory ,Service , Provider

    一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层. 1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层 ...

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

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

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

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

  5. AngularJS系统学习之Module(模块)

    本文源自:http://blog.csdn.net/woxueliuyun/article/details/50962645 学习之后略有所得, 来此分享.建议看原文. 模块是提供一些特殊服务的功能块 ...

  6. AngularJS Factory Service Provider

    先看看http://www.cnblogs.com/mbydzyr/p/3460501.html http://www.oschina.net/translate/angularjs-factory- ...

  7. angular factory Services provider 自定义服务 工厂

    转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...

  8. AngularJS中serivce,factory,provider的区别

    一.service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别.This is whe ...

  9. AngularJS系统学习之Scope(作用域)

    本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂,  也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...

随机推荐

  1. mac os PHP 访问MSSQL

    写在前: 项目的数据库是sql server,但是自己的系统是mac os.这样导致了需要一个烦人的系统环境搭建过程.目前要在mac 上的php环境中支持mssql环境访问,经过自己了解,有两种方式: ...

  2. ubuntu环境准备

    一. 桌面方面看起来比较不爽,12的版本用起更不习惯,决定改成命令行登陆 a. vi  /ect/default/grub 文件 b. 修改成第二个红框的情况 c. 执行update-grub命令 d ...

  3. hdu 1081 &amp; poj 1050 To The Max(最大和的子矩阵)

    转载请注明出处:http://blog.csdn.net/u012860063 Description Given a two-dimensional array of positive and ne ...

  4. AngularJs 在控制器中过滤

    <html> <head> <title>Simple app</title> <script src="https://ajax.go ...

  5. php 获取当前页面url路径

    #测试网址: http://localhost/blog/testurl.php?id=5 //获取域名或主机地址 echo $_SERVER['HTTP_HOST'].""; # ...

  6. IP和归属地

    ip: http://www.ip.cn/index.php?ip=10.132.98.143 归属地: http://www.ip138.com:8080/search.asp?action=mob ...

  7. SICP 习题 (1.38)解题总结

    SICP 习题1.38 紧跟着习题1.37的方向,要求我们用习题1.37中定义的cont-frac过程计算数学家欧拉大师在论文De Fractionibus Continuis 中提到的e-2的连分式 ...

  8. 初步探讨WPF的ListView控件(涉及模板、查找子控件) - GavinJun

    本文结合模板的应用初步介绍ListView的应用 一.Xaml中如何建立数据资源 大部分数据都会来自于后台代码,如何Xaml同样的建立数据源呢?比如建立一个学生List: 首先引入命名空间: xmln ...

  9. STL之队列的运用

    卡片游戏:非常好地介绍了队列的特点和应用 桌上有一叠牌,从第一张牌開始从上往下依次编号1~n.当至少还剩两张牌时进行例如以下操作:把第一张牌扔掉,然后把新的第一张牌放到整叠牌的最后. 输入n,输出每次 ...

  10. JVM client模式和Server模式

    我们把jdk安装完成后,在命名行输入java -version 不仅可以看到jdk版本相关信息,还会看到类似与 Java HotSpot(TM) 64-Bit Server VM (build 25. ...