zoukankan      html  css  js  c++  java
  • AngularJS系统学习之Factory,Service, Provider(工厂,服务,供应者)

    本文转自: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>

     

  • 相关阅读:
    js正则表达式中的问号使用技巧总结
    380. Insert Delete GetRandom O(1)
    34. Find First and Last Position of Element in Sorted Array
    162. Find Peak Element
    220. Contains Duplicate III
    269. Alien Dictionary
    18. 4Sum
    15. 3Sum
    224. Basic Calculator
    227. Basic Calculator II
  • 原文地址:https://www.cnblogs.com/wangnuo/p/6297673.html
Copyright © 2011-2022 走看看