当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

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

发表于: 2015-01-08   作者:boyitech   来源:转载   浏览:
摘要:   Angular框架提供了强大的依赖注入机制,这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象,例如控制器,指令,过滤器动画等。   那注入器怎么知道如何去创建这些特殊的对象呢? Angular提供了5种方式让注入器创建对象,其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac

  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讲义(16) - 提供者

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
自定义指令 本章我们将详细讲解如何用AngularJS实现自定义指令(directives)来扩充HTML. 指令的基本
本节我们将通过几个具体的例子来讲解Angular表单。 简单的表单 ngModel指令实现了双向的数据绑定,
动画 AngularJS 1.3版本为常用的指令(ngRepeat,ngSwitch,ngView...)提供了动画支持,另外还可以通
Bootstrap 本节我们将分析Angular应用初始化流程以及怎样手动启动Angular应用。 Angular<script&
Angular表达式 Angular表达式类似于JS代码,有双大括号绑定,其格式为{{expression}}. 例如: 1+2 -
Angular过滤器主要用来格式化输出表达式的值。过滤器可以用于视图模板、控制器或者服务组件中。我们
什么是AngularJS ? AngularJS是一款非常优秀的前端MVVM(Model-View-ViewModel)框架,它强大的双向
Angular HTML编译器可以让开发者通过定制标签或者属性来拓展HTML语法。通过Angular HTML编译器,我
基本概念 在使用AngularJS之前,我们有必要梳理一下AngularJS核心概念及实现原理,以便于写出结构良
在AngularJS中数据绑定(Data-binding)意指模型和视图组件之间的数据自动同步。AngularJS应用是基于
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号