zoukankan      html  css  js  c++  java
  • angular学习(十五)——Provider

    转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/60966263

    Provider简单介绍

    每一个web应用都是由多个对象协作完毕的。这些对象须要初始化并连接在一起为app服务。

    在AngularJS中。app中的大多数对象通过injector服务初始化和连接在一起。

    Injector创建两种类型的对象,service对象和特别对象。

    Service对象由开发人员自己定义api。

    特别对象则遵照AngularJS框架特定的api,这些对象包括:controller, directive, filter or animation。

    Injector须要知道怎么样创建这些对象,你能够通过“配方”告诉它这些,总共同拥有五种“配方”。

    最具体最全面的是Provider“配方”。其它四种(Value, Factory, Service and Constant)仅仅是在Provider“配方”之上包装了一下而已。

    “配方”

    为了使injector知道怎么样创建和链接这些对象,你须要recipe的注冊表。

    每一个recipe都有一个对象的id和怎样创建对象的说明。

    一个“配方”相应angularjs的一个module。module能够包括一个或者多个“配方”,module还会包括依赖于其它模块的信息。

    当AngularJS使用给定的app module启动app时,angularjs会创建一个新的injector实例,injector会依次把核心module的“配方”增加“配方”注冊表。而且创建app module和他的依赖。当须要为app创建对象时,就会去查找“配方”注冊表。

    让我们看下通过各种各样“配方”类型创建和使用service的场景。

    在你的代码中可能多个地方须要訪问一个共享的字符串,我们先用Value“配方”来实现这样的情境。

    Value“配方”

    我们来创建一个非常easy的service,该service提供一个用于远程api鉴权的id字符串,能够这么写:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
        <meta charset="uft-8"/>
        <title></title>
    </head>
    <script src="script/angular.min.js"></script>
    <body ng-controller="DemoController as demo">
    Client ID: {{demo.clientId}}
    </body>
    <script>
        var myApp = angular.module('myApp', []);
        myApp.value('clientId', 'a12345654321x');
    
        myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
            this.clientId = clientId;
        }]);
    </script>
    </html>

    我们创建了一个名字叫myApp的module。而且指定该module的定义包括一个构建clientId服务的recipe,这个样例中service仅仅是一个字符串。

    这个样例中我们使用value“配方”定义了一个值供DemoController须要一个clientId的service时调用。

    factory“配方”

    Value“配方”尽管简单,可是缺少我们创建service时须要的非常多重要的功能,Factory“配方”就强大非常多,有以下功能:

    • 能够通过依赖使用其它service
    • service初始化
    • 延迟初始化

    Factory“配方”能够使用0个或者多个參数创建service,这些參数能够是依赖的其它service。函数的返回值是一个通过“配方”创建的service实例。

    在angularjs中全部的service都是单例的,这意味着injector为了创建对象仅仅使用每一个“配方”一次,然后injector把service的引用缓存起来。以便将来能够调用。

    Factory“配方”是个更加强大的类型,因此Value“配方”能够做的事情Factory“配方”全然能够做,我们把上个样例使用Factory“配方”重写一次:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
        <meta charset="uft-8"/>
        <title></title>
    </head>
    <script src="script/angular.min.js"></script>
    <body ng-controller="DemoController as demo">
    Client ID: {{demo.clientId}}
    </body>
    <script>
        var myApp = angular.module('myApp', []);
        //myApp.value('clientId', 'a12345654321x');
        myApp.factory("clientId",function(){
            return "a12345654321x";
        });
    
        myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
            this.clientId = clientId;
        }]);
    </script>
    </html>

    如果仅仅是返回一个token这么简单,那么value“配方”则更合适,由于写起来简单也容易明确。

    可是我们希望创建一个复杂点的service来计算token做远程api的身份验证,这个token叫做apiToken,通过clientId的值和浏览器本地存储中的secret值计算得出。

    以上代码能够看到怎样依赖clientId服务通过Factory“配方”创建apiToken服务。

    factory的函数名最好使用<serviceId>Factory形式命名,比如apiTokenFactory,当然函数名是能够不要的,可是为了调试方便还是最好写上。

    同Value”配方“一样,Factory”配方“能够创建随意类型的服务。不管是原始类型。对象,函数还是自己定义的类型。

    service“配方”

    javascript开发人员经常喜欢写面向对象的自己定义类型,如今让我们通过unicornLauncher服务把一个unicorn发射到太空,unicornLauncher是一个自己定义类型的实例。

    function UnicornLauncher(apiToken) {
    
      this.launchedCount = 0;
      this.launch = function() {
        // 使用apiToken訪问远程api
        ...
        this.launchedCount++;
      }
    }

    如今我们准备发射独角兽,注意到UnicornLauncher依赖于apiToken,我们通过Factory”配方“来满足这个依赖:

    myApp.factory('unicornLauncher', ["apiToken", function(apiToken) {
      return new UnicornLauncher(apiToken);
    }]);

    然而这个样例使用service“配方”更为合适

    Service”配方“能够像Value”配方“和Factory“配方”一样生产service,可是它能够通过new操作符调用对象的构造函数。

    构造函数的參数能够通过Service“配方中”的依赖项增加。

    Service“配方”的设计模式叫做构造器注入(constructor injection)。

    既然我已经有了UnicornLauncher多多构造器,我们能够把Factory”配方”替换为Service“配方”。

    myApp.service('unicornLauncher', ["apiToken", UnicornLauncher]);

    Provider“配方”

    Provider“配方”是核心“配方”,其它全部的“配方”仅仅是在它里面加了点糖。

    它是最多能力最具体的“配方”,可是对于大多数service来说。不是全部的能力都实用。

    Provider“配方”定义了一个实现了$get方法的自己定义类型。$get方法是一个Factory函数,非常像Factory“配方”定义的Factory函数一样。

    其实。如果你定义了一个Factory“配方”。框架会创建一个空的Provider类型。当中的$get方法就会指向你定义的Factory方法。

    在app启动时。我们须要一些配合时,这个时候才会须要Provider披露的API。一般是一些能够重用的service。

    默认情况下。发射器发射unicorn到太空是没有不论什么防护的。可是有些行星上大气层太厚了,在unicorn開始它的太空旅行之前。我们须要为它包裹tinfoil。否则她没通过大气层时会摩擦燃烧。

    配置代码例如以下:

    myApp.provider('unicornLauncher', function UnicornLauncherProvider() {
        var useTinfoilShielding = false;
    
        this.useTinfoilShielding = function(value) {
            useTinfoilShielding = !!value;
        };
    
        this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {
    
            // 我们如果UnicornLauncher构造函数已更改,能够接收useTinfoilShielding參数
            return new UnicornLauncher(apiToken, useTinfoilShielding);
        }];
    });

    在程序启动时,config函数中调用unicornLauncherProvider的方式例如以下:

    myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) {
      unicornLauncherProvider.useTinfoilShielding(true);
    }]);

    unicornLauncherProvider是被注入到config方法中的,这里的injector和常规的实例injector不同,它仅仅负责provider的初始化和连接。

    在app启动之时,在创建service之前。它会配置和实例化全部的provider,我们把这个叫做app生命周期的配置阶段,在这个阶段,service还不可使用。由于他们还未创建。

    一旦配置阶段完毕,那么全部的provider变为不可用,创建service的进程開始启动,这个阶段被叫做app生命周期的执行阶段。

    Constant“配方”

    我们刚刚了解了怎样区分app生命周期的配置阶段和执行阶段。还有怎么样通过config函数配置app。由于配置函数在配置阶段执行,这时service都是不能够用的,它甚至无法訪问通过Value“配方”创建的简单的值对象。

    有一些简单的值,比方url的前缀,没有不论什么依赖和配置,经常须要配置阶段和执行阶段都能够方便的訪问。
    Constant“配方”的作用就在这了。

    如果我们的unicornLauncher服务须要使用它的所在行星的名字来标记。行星的名字能够在配置阶段提供。

    行星的名字对于每一个app是特定的,执行阶段会在各种各样的controller中使用。我们能够这样这样定义行星的名字作为一个常量:

    myApp.constant('planetName', 'Greasy Giant');

    配置unicornLauncherProvider例如以下:

    myApp.config(['unicornLauncherProvider', 'planetName', function(unicornLauncherProvider, planetName) {
      unicornLauncherProvider.useTinfoilShielding(true);
      unicornLauncherProvider.stampText(planetName);
    }]);

    Constant“配方”和Value“配方”一样在配置阶段是可用的,可用用于controller和模板:

    myApp.controller('DemoController', ["clientId", "planetName", function DemoController(clientId, planetName) {
      this.clientId = clientId;
      this.planetName = planetName;
    }]);
    <html ng-app="myApp">
      <body ng-controller="DemoController as demo">
       Client ID: {{demo.clientId}}
       <br>
       Planet Name: {{demo.planetName}}
      </body>
    </html>

    特殊用途的object

    之前提到有些特殊用途的对象和service是不同的,这些对象作为插件来扩展angularjs框架。须要实现angularjs指定的接口。这些接口是Controller, Directive, Filter 和 Animation。

    这些特殊对象除controller外,其余的在底层其实是由Factory“配方”创建的。

    在以下的样例中,我们演示怎样通过Directive的api创建一个简单的组件。这个组件依赖于我们之前定义的planetName常量,并显示这个常量:“Planet Name: Greasy Giant”

    由于Directive是通过Factory“配方”注冊的,我们採用Factory同样的语法:

    myApp.directive('myPlanet', ['planetName', function myPlanetDirectiveFactory(planetName) {
      // directive definition object
      return {
        restrict: 'E',
        scope: {},
        link: function($scope, $element) { $element.text('Planet: ' + planetName); }
      }
    }]);

    然后使用这个组件:

    <html ng-app="myApp">
      <body>
       <my-planet></my-planet>
      </body>
    </html>

    使用Factory“配方”也能够定义filter和animation,可是controller有点特殊。你能创建controller作为一个自己定义类型,它的依赖能够从它的构造函数中传入,这个构造器又被module用来注冊controller。我们来看下我之前写的DemoController:

    myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
      this.clientId = clientId;
    }]);

    每次app须要DemoController实例的时候。就好调用它的构造器进行初始化。

    因此和service不一样,controller不是单例的。构造器能够注入其它service。

    总结

    让我们来总结一下:

    • injector使用“配方”创建两种对象:service和特殊用途对象
    • 有五种“配方”能够创建对象:Value, Factory, Service, Provider, Constant.
    • Factory和Service是使用最多的“配方”。他们之间唯一的差别是:Service“配方”更适合自己定义类型的对象,而Factory“配方”更适合原生对象和函数。
    • Provider“配方”是最核心的“配方”,其它“配方”仅仅是在它上面加点糖。
    • Provider“配方”是最复杂的“配方”,除非你须要全局配置的代码,而这代码你还想不断复用。
    • 全部的特殊对象除了controller都是使用Factory“配方”创建的
    Features / Recipe type Factory Service Value Constant Provider
    是否能依赖与其它对象 yes yes no no yes
    是否能友好的注入到其它对象 no yes yes* yes* no
    创建的对象配置阶段是否可用 no no no yes yes**
    是否能创建函数 yes yes yes yes yes
    是否能创建原生类型 yes no yes yes yes

    * 须要使用new操作符付出预先初始化的代价

    ** service在配置阶段不可用。可是provider对象在配置阶段可用

  • 相关阅读:
    PHP线程安全和非线程安全有什么区别
    SHOW SLAVE STATUS 详解
    linux 2>&1
    crontab 例行性排程
    clang-format 数组初始化,多行模式
    windows 10 1909 无法启用 .NET Framework 解决
    SysCtlDelay 实现延时
    wpa_supplicant 检测错误密码
    swig python dynamic module does not define init function
    讯飞错误码10116
  • 原文地址:https://www.cnblogs.com/lxjshuju/p/7307120.html
Copyright © 2011-2022 走看看