Angular 中间部分 2.2 依赖注入和Http

依赖注入 DI (Dependency Injection) system

依赖：当模块a需要模块b才能运行时，模块b是模块a的依赖。

p192, p169

Dependency Injection Parts

注册一个依赖时，需要绑定到sth识别这个依赖。
识别就是 token。
依赖注入 3个部分
1，provider，把新的实例，注册在这里，就可以提供给注入器
2，injector 注入器 保存之前创造的实例，如果没有请求的实例，会创建一个并添到注入器中，通过provider，
3，dependecy 被注入

注册依赖，在provider中，描述依赖被如何注入，注入
组件与组件之间的运用

p174 标准做法
- 用 NgModule 注册需要注入的 也就是providers
- 用装饰 decorators (通常在 constructor) 定义注入内容

在NgModule注册
user-demo/user-demo.module.ts

import { UserService } from '../services/user.service';@NgModule({  imports: [    CommonModule  ],  providers: [    UserService // <-- added right here  ],  declarations: []})

注入组件 在constructor中导入 p195, p198
user-demo.component.ts

export class UserDemoComponent {  userName: string;  constructor(private userService: UserService) {  }

本质上就是注册 provider:[]，注入（导入）?
正确的注册 provider 很关键

providers: [ UserService ]
就是告诉Angular 当UserService注入时，提供一个单个实体（singleton instance ——
默认class就是UserService
等于：

providers: [  { provide: UserService, useClass: UserService }]

provide 是token用来identify
useClass 是how and what to inject
provide相当于全局开放UserService class 和这个UserServiceg token

当第一个注入时，也就是第一次实体产生时，DI会触发constructor。

当有API的URL是，
注册

providers: [  { provide: 'API_URL', useValue: 'http://my.api.com/v1' }]

注入时，不能直接写

constructor(apiUrl: 'API_URL') {}

import { Inject } from '@angular/core';export class AnalyticsDemoComponent {  constructor(@Inject('API_URL') apiUrl: string) {  }}

p178 p201 配置服务
记录事件

useFactory p181 p204

HTTP

Angular使用内置HTTP库来请求外部API
HTTP请求需要异步同步，JS通常用以下3中方法：
1, Callbacks
2, Promises
3, Observables
Angular用的是Observables来处理异步同步。

如何导入和启用HttpModule p187 p210

通过注入方式启用

从@angular/http导入HttpModule

在app.module.ts 注册并导入

import { HttpModule } from '@angular/http';...@NgModule({  declarations: [  ...],  imports: [    ...    HttpModule  ],

在组件中注入

import {Http, Response} from '@angular/http';class MyFooComponent {   constructor(public http: Http) {  }  makeRequest(): void {    ...  }}

request API连接 p189 p212

在component导入对应的组件后，
使用一个get API request
组件controller写法如下

import { Component, OnInit } from '@angular/core';import {Http, Response} from '@angular/http'; //导入@Component({  selector: 'app-simple-http',  templateUrl: './simple-http.component.html'})export class SimpleHttpComponent implements OnInit {  data: Object;  loading: boolean;  constructor(private http: Http) { //局部注入  }  ngOnInit() {  }  //api get request  makeRequest(): void {     this.loading = true;    this.http.request('http://jsonplaceholder.typicode.com/posts/1')    .subscribe((res: Response) => {      this.data = res.json();      this.loading = false;    });  }}

this.http.request()发送GET请求
http.request 返回的是 Observable(会在后面数据结构讲)
通过subscribe进行改变
this.data = res.json();
get会返回一个responce对象，通过提取这个对象的body并且转化成json格式。
赋予目标对象this.data
并且把laoding设为false

在html中启用

<h2>Basic Request</h2><button type="button" (click)="makeRequest()">Make Request</button><div *ngIf="loading">loading...</div> //绑定loading<pre>{{data | json}}</pre> //转化json格式？

YouTube 探索组件 p193 p215

探索，出现结果。需要如下组件p216 p194
- searchResult : hold the search date
- YouTubeSearchService: mangage the API request
- SearchBoxComponent: use the Youtube service
- SearchResultComponent: 渲染结果模版
- YouTubeSearchComponent: 父组件，渲染list of results

@angular/http API p212 p235

posy request

RequestOptions

• method
• headers
• body
• mode
• credentials
• cache
• url
• search