Angular 快速上手

Angular 元件
插值綁定
heroes 新元件
- 建立英雄清單元件
- - 添加 hero 屬性
  - 顯示英雄
- 顯示 HeroesComponent 視圖
- 建立 Hero 類
- 顯示 hero 對象
使用 UppercasePipe 進行格式化
編輯英雄名字
- 雙向綁定
AppModule
- 導入 FormsModule
- 聲明 HeroesComponent
建立模拟（mock）的英雄資料
顯示這些英雄
- 使用 *ngFor 列出這些英雄
主從結構
- 添加 click 事件綁定
- 添加 click 事件處理器
主從元件
- HeroDetailComponent子元件
- - 添加 @Input() hero 屬性
- 顯示 HeroDetailComponent
- - 修改 HeroesComponent 的模闆
為什麼需要服務
建立 HeroService
- @Injectable() 服務
- 擷取英雄資料
提供（provide） HeroService
修改 HeroesComponent
- 注入 HeroService
- 添加 getHeroes()
- 在 ngOnInit 中調用它
可觀察（Observable）的資料
- 可觀察對象版本的 HeroService
- 在 HeroesComponent 中訂閱
顯示消息
- 建立 MessagesComponent
- 建立 MessageService
- 把它注入到 HeroService 中
- 從 HeroService 中發送一條消息
- 從 HeroService 中顯示消息
- 綁定到 MessageService
添加 AppRoutingModule

Angular 元件

元件是 Angular 應用中的基本構造塊。

它們在螢幕上顯示資料、監聽使用者輸入，并根據這些輸入采取行動。

作為初始應用的一部分，CLI 也會為你建立第一個 Angular 元件。它就是根元件，名叫 app-root。

你所看到的這個頁面就是應用的外殼。這個外殼是被一個名叫 AppComponent 的 Angular 元件控制的。

插值綁定

<h1>{{title}}</h1> 這個插值綁定的意思是把元件的 title 屬性的值綁定到 HTML 中的 h1 标記中。

heroes 新元件

建立英雄清單元件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

@Component 是個裝飾器函數，用于為該元件指定 Angular 所需的中繼資料.

CLI 自動生成了三個中繼資料屬性：

selector— 元件的選擇器（CSS 元素選擇器）

templateUrl— 元件模闆檔案的位置。

styleUrls— 元件私有 CSS 樣式表檔案的位置。

ngOnInit 是一個生命周期鈎子，Angular 在建立完元件後很快就會調用 ngOnInit。這裡是放置初始化邏輯的好地方。

始終要 export 這個元件類，以便在其它地方（比如 AppModule）導入它。

添加 hero 屬性

hero = 'Windstorm';

顯示英雄

{{hero}}

顯示 HeroesComponent 視圖

要顯示 HeroesComponent 你必須把它加到殼元件 AppComponent 的模闆中。

app-heroes 就是 HeroesComponent 的元素選擇器。是以，隻要把
<app-heroes> 元素添加到 AppComponent 的模闆檔案中就可以了，就放在标題下方。

建立 Hero 類

真實的英雄當然不止一個名字。在 src/app 檔案夾中為 Hero 類建立一個檔案，并添加 id 和 name 屬性。

export class Hero {
  id: number;
  name: string;
}

把元件的 hero 屬性的類型重構為 Hero。然後以 1 為 id、以 “Windstorm” 為名字初始化它。

hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

顯示 hero 對象

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

使用 UppercasePipe 進行格式化

綁定表達式中的 uppercase 位于管道操作符（ | ）的右邊，用來調用内置管道 UppercasePipe。

==管道 ==是格式化字元串、金額、日期和其它顯示資料的好辦法。 Angular 釋出了一些内置管道，而且你還可以建立自己的管道。

編輯英雄名字

雙向綁定

<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</div>

== [(ngModel)]== 是 Angular 的雙向資料綁定文法。

這裡把 hero.name 屬性綁定到了 HTML 的 textbox 元素上，以便資料流可以雙向流動：從 hero.name 屬性流動到 textbox，并且從 textbox 流回到 hero.name 。

AppModule

Angular 需要知道如何把應用程式的各個部分組合到一起，以及該應用需要哪些其它檔案和庫。這些資訊被稱為中繼資料（metadata）。

有些中繼資料位于 @Component 裝飾器中，你會把它加到元件類上。另一些關鍵性的中繼資料位于 @NgModule 裝飾器中。

最重要的 @NgModule 裝飾器位于頂級類 AppModule 上。

Angular CLI 在建立項目的時候就在 src/app/app.module.ts 中生成了一個 AppModule 類。這裡也就是你要添加 FormsModule 的地方。

導入 FormsModule

聲明 HeroesComponent

每個元件都必須聲明在（且隻能聲明在）一個 NgModule 中。

建立模拟（mock）的英雄資料

在 src/app/ 檔案夾中建立一個名叫 mock-heroes.ts 的檔案。定義一個包含十個英雄的常量數組 HEROES，并導出它

顯示這些英雄

使用 *ngFor 列出這些英雄

主從結構

添加 click 事件綁定

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

添加 click 事件處理器

主從元件

HeroDetailComponent子元件

添加 @Input() hero 屬性

hero 屬性必須是一個帶有 @Input() 裝飾器的輸入屬性，因為外部的 HeroesComponent 元件将會綁定到它。

顯示 HeroDetailComponent

HeroesComponent 仍然是主從視圖。它和HeroDetailComponent 具有父子關系。當使用者從清單中選擇了某個英雄時，父元件 HeroesComponent 将通過把要顯示的新英雄發送給子元件 HeroDetailComponent，來控制子元件。

不用修改 HeroesComponent 類，但是要修改它的模闆。

修改 HeroesComponent 的模闆

HeroDetailComponent 的選擇器是 ‘app-hero-detail’。把添加到 HeroesComponent 模闆的底部，以便把英雄詳情的視圖顯示到那裡。把 HeroesComponent.selectedHero 綁定到該元素的 hero 屬性，就像這樣：

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

[hero]=“selectedHero” 是 Angular 的屬性綁定文法。

這是一種單向資料綁定。從 HeroesComponent 的 selectedHero 屬性綁定到目标元素的 hero 屬性，并映射到了 HeroDetailComponent 的 hero 屬性。

現在，當使用者在清單中點選某個英雄時，selectedHero 就改變了。當 selectedHero 改變時，屬性綁定會修改 HeroDetailComponent 的 hero 屬性，HeroDetailComponent 就會顯示這個新的英雄。

為什麼需要服務

建立 HeroService

@Injectable() 服務

擷取英雄資料

HeroService 可以從任何地方擷取資料：Web 服務、本地存儲（LocalStorage）或一個模拟的資料源。

提供（provide） HeroService

修改 HeroesComponent

注入 HeroService

添加 getHeroes()

在 ngOnInit 中調用它

可觀察（Observable）的資料

可觀察對象版本的 HeroService

在 HeroesComponent 中訂閱

顯示消息

建立 MessagesComponent

建立 MessageService

把它注入到 HeroService 中

從 HeroService 中發送一條消息

從 HeroService 中顯示消息

綁定到 MessageService

添加 AppRoutingModule

添加路由定義

RouterModule.forRoot()

添加路由出口（RouterOutlet）

添加路由連結 (routerLink)

添加儀表盤視圖

添加儀表盤路由

添加預設路由

把儀表盤連結添加到殼元件中

導航到英雄詳情

從 HeroesComponent 中删除英雄詳情

添加英雄詳情視圖

DashboardComponent 中的英雄連結

HeroesComponent 中的英雄連結

支援路由的 HeroDetailComponent

從路由參數中提取 id

添加 HeroService.getHero()

回到原路