AngularJS中serivce,factory,provider的区别




AngularJS实现注入服务的方法有6种方式：

  1. decorator
  2. constant 
  3. value
  4. service
  5. factory
  6. provider
其中provider是一切方法的基础，有点类似于XMLHttpObject，在这个基础之上建立起来的，像jquery的$.ajax等等。

  • 第一种方式：decorator
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. </pre><pre code_snippet_id="92094" snippet_file_name="blog_20131202_1_2266593" name="code" class="javascript"><div ng-controller="appCtrl">{{ content }}</div>  
  2.   
  3. <script type="text/javascript">  
  4.     var app = angular.module('myApp', []);  
  5.     app.value('profile', 'I\'am a angular developer.');  
  6.     app.config(function ($provide) {  
  7.         $provide.decorator('profile', function ($delegate) {  
  8.             return $delegate + ' I like angularJS. So sorry, you are hacked!';  
  9.         });  
  10.     });  
  11.   
  12.     app.controller('appCtrl', ['$scope', 'profile', function ($scope, profile) {  
  13.         $scope.content = profile;  
  14.     }]);  
  15. </script>  

  • 第二种方式：constant 
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <div ng-controller="UsingConstantServiceCtrl">{{ magicNumber }},{{ bookTitle }}</div>  
  2. <div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>  
  3.   
  4. <script type="text/javascript">  
  5.     var app = angular.module('myApp', []);  
  6.   
  7.     app.constant('magicNumber', 42);//常量直接接作为服务  
  8.     app.constant('magicNumber', 422);//TODO 重新赋值是无效的  
  9.     app.constant('bookTitle', "Hitchhiker's Guide");  
  10.   
  11.     function UsingConstantServiceCtrl($scope, magicNumber, bookTitle) {  
  12.         $scope.magicNumber = magicNumber;  
  13.         $scope.bookTitle = bookTitle;  
  14.     }  
  15.   
  16.     (function () {  
  17.         var existingServiceInstance = {  
  18.             getMagicNumber: function () {  
  19.                 return 42; // Note that we are using an "hard-coded" magic number  
  20.             }  
  21.         };  
  22.         app.value('magicNumberService', existingServiceInstance);  
  23.     }());  
  24.   
  25.     function UsingValueServiceCtrl($scope, magicNumberService) {  
  26.         $scope.magicNumberFromService = magicNumberService.getMagicNumber();  
  27.     }  
  28. </script>  



  • 第三种方式：value
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <pre code_snippet_id="92094" snippet_file_name="blog_20131202_3_1841481" name="code" class="javascript"><div ng-controller="appCtrl">{{ title }}</div>  
  2.   
  3. <script type="text/javascript">  
  4.     var app = angular.module('myApp', []);  
  5.     app.config(function ($provide) {  
  6.         $provide.value('title', 'my Title')  
  7.     });  
  8.     app.controller('appCtrl', ['$scope', 'title', function ($scope, title) {  
  9.         $scope.title = title;  
  10.     }]);  
  11. </script>  


  • 第四种方式：service
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <pre code_snippet_id="92094" snippet_file_name="blog_20131202_4_2538810" name="code" class="javascript"><div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>  
  2.   
  3. <script type="text/javascript">  
  4.     var app = angular.module('myApp', []);  
  5.   
  6.     app.constant('magicNumber', 42);//常量直接接作为服务  
  7.   
  8.     (function() {  
  9.         var MyService = function(magicNumber) { // "magicNumber" is injected  
  10.             this.getMagicNumber = function() {  
  11.                 return magicNumber;  
  12.             };  
  13.         };  
  14.   
  15.         app.service('magicNumberService', MyService);  
  16.     }());  
  17.   
  18.     function UsingValueServiceCtrl($scope, magicNumberService) {  
  19.         $scope.magicNumberFromService = magicNumberService.getMagicNumber();  
  20.     }  
  21. </script>  


  • 第五种方式：factory
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>  
  2.   
  3.   
  4. <script type="text/javascript">  
  5.     var app = angular.module('myApp', []);  
  6.   
  7.   
  8.     app.constant('magicNumber', 42);//常量直接接作为服务  
  9.   
  10.   
  11.     (function () {  
  12.         // registers a service factory with "magicNumber" injected  
  13.         app.factory('magicNumberService', function (magicNumber) {  
  14.             return {  
  15.                 getMagicNumber: function () {  
  16.                     return magicNumber;  
  17.                 }  
  18.             };  
  19.         });  
  20.     }());  
  21.   
  22.   
  23.     function UsingValueServiceCtrl($scope, magicNumberService) {  
  24.         $scope.magicNumberFromService = magicNumberService.getMagicNumber();  
  25.     }  
  26. </script>  


  • 第六种方式：provider
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>  
  2.   
  3. <script type="text/javascript">  
  4.     var app = angular.module('myApp', []);  
  5.   
  6.     app.constant('magicNumber', 42);//常量直接接作为服务  
  7.   
  8.     (function() {  
  9.         var MyService = function(magicNumber) { // "magicNumber" is injected  
  10.             this.getMagicNumber = function() {  
  11.                 return magicNumber;  
  12.             };  
  13.         };  
  14.   
  15.         app.service('magicNumberService', MyService);  
  16.     }());  
  17.   
  18.     function UsingValueServiceCtrl($scope, magicNumberService) {  
  19.         $scope.magicNumberFromService = magicNumberService.getMagicNumber();  
  20.     }  
  21. </script>  







posted @ 2014-11-20 11:09  阳光小屋  阅读(140)  评论(0)  编辑  收藏  举报