依賴注入 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