程序博客网 > 阿里云服务器ecs备份

AngularJs基础——自定义服务的三种方法以及provider供应商

来源：互联网 发布：阿里云服务器ecs备份 编辑：程序博客网 时间：2024/05/21 00:19

版权声明：本文为博主原创文章，未经博主允许不得转载。

AngularJS提供了三种方法可以自定义服务，分别是provider、factory、service.请注意三者之间的区别。

有三种方式可以自定义服务：

第一种方式，在module中以回调函数的形式作为参数引入：

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="zh_CN">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Angular基础</title>  
  6. </head>  
  7. <body>  
  8. <div ng-app="myApp">  
  9.     <div ng-controller="firstCtrl">  
  10.         {{name}}  
  11.     </div>  
  12.   
  13. </div>  
  14. <script src="angular.min.js"></script>  
  15. <script type="application/javascript">  
  16.     var myApp=angular.module('myApp',[],function($provide){  
  17.         $provide.provider('providerService01',function(){  
  18.             this.$get=function(){  
  19.                 return {message:'this is providerService01'};  
  20.             }  
  21.         });  
  22.         $provide.provider('providerService02',function(){  
  23.             this.$get=function(){  
  24.                 return 'this is providerService02';  
  25.             }  
  26.         });  
  27.         $provide.factory('factoryService01',function(){  
  28.             return {message:'this is factoryService01'};  
  29.         });  
  30.         $provide.factory('factoryService02',function(){  
  31.             return 'this is factoryService02';  
  32.         });  
  33.         $provide.service('serviceService01',function(){  
  34.             return {message:'this is serviceService01'};  
  35.         });  
  36.     });  
  37.     myApp.controller('firstCtrl',['$scope','providerService01','providerService02','factoryService01','factoryService02','serviceService01',function(  
  38.             $scope,providerService01,providerService02,factoryService01,factoryService02,serviceService01){  
  39.         console.log(providerService01);  
  40.         console.log(providerService02);  
  41.         console.log(factoryService01);  
  42.         console.log(factoryService02);  
  43.         console.log(serviceService01);  
  44.         $scope.name="张三";  
  45.     }]);  
  46.   
  47.   
  48. </script>  
  49. </body>  
  50. </html>  
第二种方式,用config方法引入:

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="zh_CN">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Angular基础</title>  
  6. </head>  
  7. <body>  
  8. <div ng-app="myApp">  
  9.     <div ng-controller="firstCtrl">  
  10.         {{name}}  
  11.     </div>  
  12.   
  13. </div>  
  14. <script src="angular.min.js"></script>  
  15. <script type="application/javascript">  
  16.     var myApp=angular.module('myApp',[]);  
  17.   
  18.     myApp.config(function($provide){  
  19.         $provide.provider('providerService01',function(){  
  20.             this.$get=function(){  
  21.                 return {message:'this is providerService01'};  
  22.             }  
  23.         });  
  24.   
  25.         $provide.provider('providerService02',function(){  
  26.             this.$get=function(){  
  27.                 var _name="";  
  28.                 var service={};  
  29.                 service.setName=function(name){  
  30.                     _name=name;  
  31.                 }  
  32.                 service.getName=function(){  
  33.                     return _name;  
  34.                 }  
  35.                 return service;  
  36.             }  
  37.         });  
  38.     });  
  39.   
  40.     myApp.controller('firstCtrl',['$scope','providerService01','providerService02',function($scope,providerService01,providerService02){  
  41.         console.log(providerService01);  
  42.         providerService02.setName("服务二");  
  43.         $scope.name=providerService02.getName();  
  44.     }]);  
  45.   
  46.   
  47. </script>  
  48. </body>  
  49. </html>  
第三种方式，module调用各自的方法：

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="zh_CN">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Angular基础</title>  
  6. </head>  
  7. <body>  
  8. <div ng-app="myApp">  
  9.     <div ng-controller="firstCtrl">  
  10.         {{name}}  
  11.     </div>  
  12.   
  13. </div>  
  14. <script src="angular.min.js"></script>  
  15. <script type="application/javascript">  
  16.     var myApp=angular.module('myApp',[]);  
  17.   
  18.     myApp.provider('providerService01',function(){  
  19.         this.$get=function(){  
  20.             return {message:'this is providerService01'};  
  21.         }  
  22.     });  
  23.     myApp.factory('factoryService01',function(){  
  24.             return {message:'this is factoryService01'};  
  25.     });  
  26.     myApp.service('serviceService01',function(){  
  27.             return {message:'this is serviceService01'};  
  28.     });  
  29.     myApp.controller('firstCtrl',['$scope','providerService01','factoryService01','serviceService01',function(  
  30.             $scope,providerService01,factoryService01,serviceService01){  
  31.         console.log(providerService01);  
  32.         console.log(factoryService01);  
  33.         console.log(serviceService01);  
  34.         $scope.name="张三";  
  35.     }]);  
  36.   
  37.   
  38. </script>  
  39. </body>  
  40. </html>  

Provider、Factory、Service三者之间的区别是：

Provider是唯一一种可以传进.config()函数的service.当你想要在service对象启用之前，先进行模块范围的配置，那就应该用provider。

Factory是直接把一个函数当成一个对象的$get方法，可以直接返回字符串。用factory就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把service传进controller之后，在controller里这个对象里的属性就可以通过factory使用了。

Service是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后service返回"this"。你把service传进controller之后，在controller里"this"上的属性就可以通过service来使用了。

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="zh_CN">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Angular基础</title>  
  6. </head>  
  7. <body>  
  8. <div ng-app="myApp">  
  9.     <div ng-controller="firstCtrl">  
  10.         {{name}}<br/>  
  11.         ##name##  
  12.     </div>  
  13.   
  14. </div>  
  15. <script src="angular.min.js"></script>  
  16. <script type="application/javascript">  
  17.     var myApp=angular.module('myApp',[]);  
  18.     myApp.config(['providerService01Provider','$interpolateProvider',function(providerService01Provider,$interpolateProvider){  
  19.         providerService01Provider.name="李四";  
  20.         providerService01Provider.age=25;  
  21.   
  22.         //用$interpolateProvider改变数据绑定的方式  
  23.         $interpolateProvider.startSymbol('##');  
  24.         $interpolateProvider.endSymbol('##');  
  25.     }]);  
  26.   
  27.     myApp.provider('providerService01',function(){  
  28.         //可以在config里配置的属性  
  29.             this.name="";  
  30.             this.age="";  
  31.             this.$get=function(){  
  32.                 var that=this;  
  33.                 var _name="";  
  34.                 var service={};  
  35.                 service.setName=function(name){  
  36.                     _name=name;  
  37.                 };  
  38.                 service.getName=function(){  
  39.                     return _name;  
  40.                 };  
  41.                 service.getConfigName=function(){  
  42.                     return that.name+',age:'+that.age;  
  43.                 }  
  44.                 return service;  
  45.             }  
  46.     });  
  47.     myApp.factory('factoryService01',function(){  
  48.         var _name="";  
  49.         var service={};  
  50.         service.setName=function(name){  
  51.             _name=name;  
  52.         };  
  53.         service.getName=function(){  
  54.             return _name;  
  55.         };  
  56.         return service;  
  57.     });  
  58.     myApp.service('serviceService01',function(){  
  59.         var _name="";  
  60.         this.setName=function(name){  
  61.             _name=name;  
  62.         };  
  63.         this.getName=function(){  
  64.             return _name;  
  65.         }  
  66.     });  
  67.     myApp.controller('firstCtrl',['$scope','providerService01','factoryService01','serviceService01',function(  
  68.             $scope,providerService01,factoryService01,serviceService01){  
  69.         console.log(providerService01);  
  70.         console.log(providerService01.getConfigName());  
  71.         console.log(factoryService01);  
  72.         console.log(serviceService01);  
  73.         $scope.name="张三";  
  74.     }]);  
  75.       
  76. </script>  
  77. </body>  
  78. </html>  
0 0
阿里云服务器ecs备份 阿里云服务器ecs备份
原创粉丝点击
热门IT博客
都选c歌词知乎都选c歌词知乎
上海闵行区网络新村上海闵行区网络新村
知乎图标
ubuntu安装qq2015
淘宝商家社区
insert 添加多条数据
域名vip和com的区别
圆形沉井计算软件
js清除window.history
mac air 双系统 win10
程序员接私活怎么收费
java语言和静态页面
手游传奇源码完整版
手机微信数据恢复
淘宝智诚数码商店电池
怎样提高淘宝买家信用
网络课件下载的网站有
apache url重写规则
益邦控股集团 知乎
淘宝买家秀怎么做
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 点击广告 中国广告 广告导演 广告联盟广告 广告分析 广告招牌 大型广告 大广告 道旗广告 怎么打广告 精准广告 广告门 招商广告 广告的 广告收费 广告图文 广告公司广告 什么叫广告 广告宣传语 广告主 广告点击 汽车广告 小区广告 楼宇广告 手机广告 图文广告店 数字广告 广告广告 免费广告 个广告 体育广告 有广告 的广告 广告宣传片 广告的广告 广告位 系列广告 广告论坛 石家庄广告 免费广告网 上海广告

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里