zoukankan      html  css  js  c++  java
  • AngularJS 中的 factory、 service 和 provider区别,简单易懂

    转自:http://blog.csdn.net/ywl570717586/article/details/51306176

    初学 AngularJS 时, 肯定会对其提供 factory 、 service 和 provider 感到疑惑, 这三种都是提供服务的方式, 他们到底有什么区别呢?

     

    factory

    factory 可以认为是设计模式中的工厂方法, 就是你提供一个方法, 该方法返回一个对象的实例, 对于 AngularJS 的 factory 来说, 就是先定义一个对象, 给这个对象添加属性和方法, 然后返回这个对象, 例如:

    var app = angular.module('MyApp', []);  
      
    app.factory('MyFactory', function() {  
        // define result object of factory.  
        var result = {};  
        // add some property and method to the object  
        result.greeting = 'Hello from factory.';  
        // return the object;  
        return result;  
    }); 

    lain copy

    最后 controller 拿到的就是 result 对象, 相当于下面的代码:

     

     

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. var factoryResult = MyFactory();  

     

    所谓的 factory 就是这么简单

    service

     

    service 通过 new 运算符进行实例化, 可以认为是一个类型, 只要把属性和方法添加到 this 对象上即可, 不用显式返回什么对象, 比如下面的代码:

     

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. app.service('MyService'function() {  
    2.     this.greeting = 'Hello from service';  
    3. });  


    controller 拿到的对象就是上面代码中 this 指向的对象, 相当于下面的代码:

     

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. var serviceObj = new MyService();  

    provider

    与 factory 和 service 稍有不同的是, provider 必须提供一个 $get 方法, $get 方法和 factory 要求是一致的, 即: 先定义一个对象, 给这个对象添加属性和方法, 然后返回这个对象, 例如:

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. app.provider('MyProvider'function() {  
    2.       
    3.     this.$get = function() {  
    4.         var result = {};  
    5.         result.greeting = 'Hello from provider';  
    6.         return result;  
    7.     }  
    8. })  


    最后 controller 拿到的对象就是 provider 的 $get 方法返回的对象, 相当于下面的代码:

     

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. var instance = new MyProvider();  
    2. var provider = instance.$get();  

     

    使用 factory、 service 与 provider

     

    factory、 service 与 provider 使用起来是一样的, 都是通过 AngularJS 的依赖注入使用, 比如:

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. // inject factory, service and provider to a controller  
    2. app.controller('TestController', ['$scope''MyFactory''MyService''MyProvider'function($scope, myFactory, myService, myProvider) {  
    3.     $scope.greetingFromFactory = myFactory.greeting;  
    4.     $scope.greetingFromService = myService.greeting;  
    5.     $scope.greetingFromProvider = myProvider.greeting;  
    6. }]);  


    对应的 HTML 视图为:

     

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <body ng-controller="TestController">  
    2.     <p>greeting from factory: {{greetingFromFactory}} </p>  
    3.     <p>greeting from service: {{greetingFromService}} </p>  
    4.     <p>greeting from provider: {{greetingFromProvider}} </p>  
    5. </body>  

     

    provider 可以在应用启动时进行配置

     

    provider 的特殊之处就是可以在 module 启动时进行配置, 从而达到特殊的用途, 比如在上面的 provider 中可以添加一个 setName 方法, 可以在启动时调用这个方法, 进行一些额外的初始化工作:

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. app.provider('MyProvider'function() {  
    2.     // default name is 'anonymous';  
    3.     var defaultName = 'anonymous';  
    4.     var name = defaultName;  
    5.     // setName can be called duaring module init  
    6.     this.setName = function(newName) {  
    7.         name = newName;  
    8.     }  
    9.       
    10.     this.$get = function() {  
    11.         var result = {};  
    12.         result.greeting = 'Hello from provider';  
    13.   
    14.         result.name = name;  
    15.         result.defaultName = defaultName;  
    16.         return result;  
    17.     }  
    18. })  

    添加了 setName 方法之后, 可以 module 启动时来调用这个方法, 实现对 provider 的配置

     

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. app.config(function(MyProviderProvider) {  
    2.     MyProviderProvider.setName('Angularjs Provider');  
    3. });  

    在 controller 中添加显示 provider 的这些信息:

     

     

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. app.controller('TestController', ['$scope', 'MyFactory', 'MyService', 'MyProvider', function($scope, myFactory, myService, myProvider) {  
    2.     $scope.greetingFromFactory = myFactory.greeting;  
    3.     $scope.greetingFromService = myService.greeting;  
    4.     $scope.greetingFromProvider = myProvider.greeting;  
    5.       
    6.     $scope.defaultName = myProvider.defaultName;  
    7.     $scope.name = myProvider.name  
    8. }]);  


    对应的 HTML 视图也调整一下

     

     

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <body ng-controller="TestController">  
    2.     <p>greeting from factory: {{greetingFromFactory}} </p>  
    3.     <p>greeting from service: {{greetingFromService}}</p>  
    4.     <p>greeting from provider: {{greetingFromProvider}} </p>  
    5.     <p>defaultName: {{defaultName}}, config to: {{name}} </p>  
    6. </body>  

    最后程序运行截图如下:

     

  • 相关阅读:
    Python练习题 016:猴子吃桃
    Date() 及其 如何验证用户输入的日期是合法的
    关于事件触发的一个小tips
    KVO监听导航栏
    使用CoreText动态下载更换字体
    UICollectionView 的使用
    echarts散点图搭配时间轴
    使用百度echarts画图表的步骤
    canvas画图中drawImage使用
    html5canvas简单画图
  • 原文地址:https://www.cnblogs.com/hjbky/p/6581626.html
Copyright © 2011-2022 走看看