`
boyitech
  • 浏览: 85997 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论

博弈AngularJS讲义(16) - 提供者

AngularAngularJSJSProviderAPI 
阅读更多

  Angular框架提供了强大的依赖注入机制，这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象，例如控制器，指令，过滤器动画等。

  那注入器怎么知道如何去创建这些特殊的对象呢？ Angular提供了5种方式让注入器创建对象，其中最基础的方式就是提供者(provider), 其余四种方式(Value, Factory, Service, Constant)都是基于Provider的语法糖。一个模块(module)就是一种配置注入器实例工厂的方式，我们也称为提供者(provider)。当Angular应用从一个模块开始启动时，Angular会为该模块创建注入器，注册在该模块以及所依赖的模块中定义的提供者，注入器会用提供者来创建app的对象。

  让我们通过如下几个例子来进一步了解上述五种方式的用法：

  例一： Value

   

var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');

 

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

   

<html ng-app="myApp">
  <body ng-controller="DemoController as demo">
    Client ID: {{demo.clientId}}
  </body>
</html>

 

    在myApp模块中通过Value的方式定义了clientId值, 在后面的代码中就可以通过注入的方式在控制器中注入clientId的值。

 

    例二：Factory

    Value的方式有其局限性，只适合定义简单类型， 工厂方式则有更多的灵活性：

    - 可以注入使用其他服务

    - 服务初始化

    - 惰性初始化

    工厂方法返回service实例，注意Angular的服务是单例的。 让我们看如下代码：

   

myApp.factory('apiToken', ['clientId', function apiTokenFactory(clientId) {
  var encrypt = function(data1, data2) {
    // NSA-proof encryption algorithm:
    return (data1 + ':' + data2).toUpperCase();
  };

  var secret = window.localStorage.getItem('myApp.secret');
  var apiToken = encrypt(clientId, secret);

  return apiToken;
}]);

   我们通过工厂方法返回了一个加密过的token, 在第二个参数中我们注入了例一中的clientId. 

 

  例三：Service

   在面向对象过程中我们通常使用自定义类型。该例中我们定义了UnicornLauncher构造方法，并通过service方法实例化unicornLauncher:

   

function UnicornLauncher(apiToken) {

  this.launchedCount = 0;
  this.launch = function() {
    // Make a request to the remote API and include the apiToken
    ...
    this.launchedCount++;
  }
}

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

 

  例四： 提供者

  提供者（Provider）为构造Angular应用的组件对象提供了最强大的支持。从语法层面讲Provider是$get方法的具体实现，是一个工厂方法类似例二的Factory. 对于构造service组件，使用上例中的Service方法就可以了，如果我们想给组件加上更多的启动配置项，增加组件的重用性，则考虑使用provider. 基于上面的例子我们给UnicornLauncher添加了“useTinfoilShielding”配置项：

  

myApp.provider('unicornLauncher', function UnicornLauncherProvider() {
  var useTinfoilShielding = false;

  this.useTinfoilShielding = function(value) {
    useTinfoilShielding = !!value;
  };

  this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {

    // let's assume that the UnicornLauncher constructor was also changed to
    // accept and use the useTinfoilShielding argument
    return new UnicornLauncher(apiToken, useTinfoilShielding);
  }];
});

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

 

   通过provider api,定义了UnicornLauncherProvider，其中$get方法中定义了实例化UnicornLauncher的工厂方法，实例化方法参数中包含了useTinfoilShielding参数，该值由myApp.config配置。即Angular通过UnicornLauncherProvider实例化UnicornLauncher service. 注意在config方法中通常只能注入Provider，在应用启动时，Angular首先会配置并实例化所有的Provider实例，然后根据Provider来创建其他组件，在config阶段，service还未被实例化，所以不能在config方法中访问service组件。在config阶段结束后便进入run阶段，就不能再访问provider了，angular会根据provider的定义来初始化组件。

 

  例五：常量(Constant)

  上述例子中可见Angular应用启动分为两个阶段： config和run. 在config阶段services是不可用的，也不能访问通过Value初始的值类。 对于应用级别的常量，在config和run阶段皆可见，我们可以通过Constant来定义，参考如下示例代码：

  

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

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

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

   我们定义了planetName常量，在config和controller中都可以访问。

   

<html ng-app="myApp">
  <body ng-controller="DemoController as demo">
   Client ID: {{demo.clientId}}
   <br>
   Planet Name: {{demo.planetName}}
  </body>
</html>

 

   特殊组件

   前文中我们提到过，除了service组件，我们可以实现一些特殊组件，例如控制器，指令，过滤器和动画。这些组件可作为Angular框架的插件，实现了Angular框架特定的接口。这些接口也是基于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>

  

   上面例子中，我们通过directive来注册了myPlanet组件，和Factory一样，定义了myPlanetDirectiveFactory工厂方法，返回一个指令对象。同样我们也可通过工厂方法自定义指令和动画。

   相当于其他类型的组件，控制器没有使用工厂方法，而是构造器，因而控制器不是单例的。

   

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

 

    让我们总结一些上面例子中的要点：

    - 注入器会通过提供者创建两种类型的组件： 服务组件(services)和特殊组件(controllers, directives, filters, animations).

    - Angular框架提供了5类提供者来创建对象： Value, Factory, Provider, Constant 和 Service, 其中Provider是最基础也是最强大的，另外四种都是基于Provider的封装。

    - Factory和Service是最常用的， 两者的区别是Service方法只返回某类型的对象，而Factory支持Javascript原始类型和函数。

    - Provider的用法相对复杂，除非需要为可重用组件提供全局的配置项，我们一般考虑使用其他的方式来构建组件。

    - 除了控制器使用构造器，其余特殊组件都使用工厂方式，控制器可以有多个实例，而其余特殊组件都是单例的。

    具体总结可参考如下表格（摘自官方文档）：

   

Features / Recipe type Factory Service Value Constant Provider
can have dependencies yes yes no no yes
uses type friendly injection no yes yes* yes* no
object available in config phase no no no yes yes**
can create functions yes yes yes yes yes
can create primitives yes no yes yes yes
分享到：
| 博弈AngularJS讲义(15) - HTML Compiler
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics