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