angular2笔记--依赖注入

笔记，大神勿喷

------------------------1.app/heroes/hero.service.ts

//angular2中，服务只是一个类，除非把它注册进一个Angular注入器，否则它没有任何特别之处
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService{
   getHeroes(){
       return HEROES;
   }
}

-----------------------2.配置注入器 app/main.ts
plateformBrowerDynamic().bootstrapModule(AppModule);

---------------------3.注册提供商 app/app.module.ts
@NgModule({
   imports:[
       BrowserModule
   ],
   declarations:[
       AppComponent,
       CarComponent,
       HeroesComponent,
       HeroListComponent,
       InjectorComponent,
       TestComponent,
       ProvidersComponent,
       Providers1Component,
       Providers3Component,
       Providers4Component,
       Providers5Component,
       Providers6aComponent,
       Providers6bComponent,
       Providers7Component,
       Providers8Component,
       Providers9Component,
       Providers10Component,
   ],
   providers: [
       UserService,
       {provider:APP_CONFIG,
           useValue:HERO_DI_CONFIG}
   ],
   bootstrap: [ AppComponent,ProvidersComponent]
})
export class AppModule{}

4.在组件中注册提供商 app/heroes/heroes.component.ts
-----------------------------------------------
import { Component } from '@angular/core';
import { HeroService } from './hero.service';

@Component({
   selector: 'my-heroes',
   providers: [HeroService],
   template:`
       <h2>Heroes</h2>
       <hero-list></hero-list>
   `
})

export class HeroesComponent{}

5.service依赖别的服务
--------------------------------------------------
//@Injectable()标志着一个类可以被一个注入器实例化，
//通常，在试图实例化一个没有标注@Injectable()的类时，注入器会报错,
//建议：为每一个服务类都添加@Injectable(),为了一致性，所有的服务都遵循同样的规则，
//并且我们不需要考虑为什么少一个装饰器。
import {Injectable} from '@angular/core';
import {HEROES} from './mock-heroes';
import {Logger} from '../logger.service';

@Injectable()
export calss HeroService{
   constructor(private logger:Logger){}
   getHeroes(){
       this.logger.log('Getting heroes....');
       return HEROES;
   }
}

import {Injectable} from '@angular/core';
import {HEROES} from './mock-heroes';

@Injectable()
export calss HeroService{
   getHeroes(){
       return HEROES;
   }
}

6.创建并注册日志服务app/logger.service.ts
------------------------------------------------
import { Injectable } from '@angular/core';

@Injectable()
export class Logger{
   logs: string[] = [];

   log(message: string){
       this.log.push(message);
       console.log(message);
   }
}
我们很有可能在应用程序的每个角落都需要日志服务，
所以把它放到项目的app目录，并在应用程序模块AppModule的元数据中的providers数组里注册它。
---------app/app.component.ts
providers: [Logger]
必须为注入器注册一个服务的提供商，否则它就不知道该如何创建此服务

应用程序经常为很多很小的因素(比如应用程序的标题，
或者一个网络API终点的地址)定义配置对象，但是这些配置对象不总是类的实例。
它们可能是对象，比如下面这个：
-----------app/app-config.ts
export interface AppConfig {
apiEndpoint: string;
title: string;
}

export const HERO_DI_CONFIG: AppConfig = {
apiEndpoint: 'api.heroes.com',
title: 'Dependency Injection'
};

angular2笔记--依赖注入

猜你喜欢