angular2学习笔记（8）

依赖注入

依赖注入的意思是：对象在被创建的时候，由一个调控系统内所有对象的外界实体将其所依赖的对象的引用传递给它。通过这种设计模式，降低代码耦合度，实现依赖类的外部修改（在不改变原代码的基础上通过xml配置文件修改）

class Engine {}class Tires {}class Car {  private engine: Engine;  private tires: Tires;  constructor(engine: Engine, tires: Tires) {     this.engine = engine;     this.tires = tires;}  drive() {}}class SuperFactory {  createEngine = () => new Engine();  createTires =  () => new Tires();  createCar = () => new Car(this.createEngine(), this.createTires());}function main() {  var injector = new Injector([Car, Engine, Tires, Logger]);  var car = injector.get(Car);  car.drive();}

上面就是一个简单依赖注入的例子。

Angular中的依赖注入

Angular 有自己的依赖注入框架，这个框架也可以作为一个独立的模块，由其他应用程序和框架。

写一个HeroesComponent 组件

import {Component} from '@angular/angular';import {Hero} from './hero';import {HEROES} from './mock-heroes';@Component({  selector: 'my-heroes'  templateUrl: 'app/heroes.component.html'})export class HeroesComponent {  heroes: Hero[] = HEROES;}

一个提供数据的HeroService 组件

import {Hero} from './hero';import {HEROES} from './mock-heroes';class HeroService {  heroes: Hero[];  constructor() {    this.heroes = HEROES;  }  getHeroes() {    return this.heroes;  }}

依赖注入配置

配置应用程序范围的依赖注入：bootstrap(HeroesComponent);

配置数据访问服务组件，在第二个参数以数组的形式配置：bootstrap(AppComponent, [HeroService]);

在构造HeroesComponent时，注入HeroService 组件

constructor(heroService: HeroService) {  this.heroes = heroService.getHeroes();}

当创建一个新的HeroesComponent组件时，依赖注入HeroService组件。

Angular在使用模板的时候，通过依赖注入返回HeroesComponent组件的一个实例

我们可能会想，当我们把heroservice注入到其他组件。我们每次都得到同一个例子吗？是的，得到的是同一个实例。依赖是单例的。

需要强调的是设计一个依赖注入的组件使得它更容易测试。

Service组件调用其他Service组件

下面是HeroService 组件中调用了Logger Service组件

import {Injectable} from '@angular/angular';import {Hero} from './hero';import {HEROES} from './mock-heroes';import {Logger} from './logger';@Injectable()class HeroService {  heroes: Hero[];  constructor(private logger: Logger) {    this.heroes = HEROES;  }  getHeroes() {    this.logger.log('Getting heroes ...')    return this.heroes;  }}

对于需要依赖注入的组件，需要在组件上添加 @Injectable() 例如HeroService 组件，对于标记为@Component的组件，那么不需要再特别添加@Injectable()，@Component是包含依赖注入的。

用Providers方式注入。

bootstrap(AppComponent, [HeroService]);