Claire's Blog

什麼是Routing?

Routing意指路由器，也就是由一個路由器來決定現在要顯示的頁面是什麼
在套用Routing時，會有下列的實踐流程
1. 套用轉址設定（讓伺服器不去真正網址所在的位置去讀取資料，而改由Routing來決定現在要顯示什麼畫面）
2. 由url分析要顯示的狀態是什麼
3. 由狀態去獲得真正要取得那些資訊
4. 從這些資訊組成實體
5. 套用導覽動作，由這個畫面切換至另一個畫面

在Angular裡，最佳做法是將載入和設定Routing放在一個top-level的模組內，並於AppModule內來import所有的路由資訊。
按照慣例，模組AppRoutingModule和app-routing.module.ts會放在src/app裡

Angular的Routing 產生的虛擬 URL，並不是真的存在於檔案系統裡，因此需要伺服器能夠支援，否則重新整理時會出現404 not found。

新增AppRoutingModule

透過下列CLI的指令來新增一個Routing

ng generate module app-routing --flat --module=app

--flat 的意思是將產出文件放在src/app裡，而非自己一個資料夾
--module=app 則是告知CLI註冊這個Routing在AppModule的imports裡

新產生的src/app/app-routing.module.ts檔案內容如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

一般我們不會在Routing裡宣告元件，因此可以將@NgModule.declarations及CommonModule的宣告刪除
通常我們會使用Routes與RouterModule來實做Routing，修改後的檔案如下：

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

增加Routes

此時我們來設定不同路徑要導向的位置，如下面的程式碼

import { HeroesComponent }      from './heroes/heroes.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'heroes', component: HeroesComponent },
  { path: 'detail/:id', component: HeroDetailComponent }
];

上述程式碼代表在網址為http://localhost/heroes時，會在標籤內顯示HeroesComponent這元件的內容。
另外，也要設定當伺服器剛運行時(http://localhost/)，要顯示的模組。

設定完Router的map後，將之設定進RouterModule.forRoot()裡
然後再將這整個Router功能設定為可以被export，之後便可以在app.module裡import這個Router

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent }   from './dashboard/dashboard.component';
import { HeroesComponent }      from './heroes/heroes.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

而detail/:id裡的:id可於HeroDetailComponent裡去取得，來做進一步更詳細的資料顯示
取得方法如下：

ngOnInit(): void {
  this.getHero();
}

getHero(): void {
  const id = +this.route.snapshot.paramMap.get('id');//用route.snapshot.paramMap.get取得Routing時傳入的變數
  this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);
}

我們可以發現，例子中不同的path為所傳入的參數不同，它們代表不同的意義，可以更多元化的設定Routing的功能。Routes可傳入的參數有下面這些

interface Route {
  path?: string //瀏覽器上方的網址列的字串
  pathMatch?: string //當導航至此網址時要顯示的元件
  matcher?: UrlMatcher //網址列過濾器
  component?: Type<any>
  redirectTo?: string //要轉址到那邊
  outlet?: string
  canActivate?: any[]
  canActivateChild?: any[]
  canDeactivate?: any[]
  canLoad?: any[]
  data?: Data //要傳入元件裡的資料
  resolve?: ResolveData
  children?: Routes
  loadChildren?: LoadChildren
  runGuardsAndResolvers?: RunGuardsAndResolvers
}

在這邊可看一下APP_BASE_HREF的設定方式
如果沒有設定，會跑出錯誤訊息如下：

另一個簡單的方式則是在index.html增加下面這行，也可以解決這個錯誤

<base href="/">

在src/app/app.component.html中增加這個導航功能

<h1>{{title}}</h1>

<router-outlet></router-outlet>

利用routerLink來增加導航用超連結

修改src/app/app.component.html如下：

<h1>{{title}}</h1>


<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>

<router-outlet></router-outlet>

如果要回上一頁則使用

goBack(): void {
  this.location.back();
}

這篇文章的範例檔案可由此觀看： live example / download example。

參考資料

• • Angular-Routing
  • 使用 Angular 2 Router 快速建構 SPA 網站

  ASP.NET Core + Angular 4 教學 – Routing

這邊是上一篇Angular的主從元件開發的範例檔案：按此下載

創建 HeroService

使用Angular CLI創建一個名為hero的服務

ng generate service hero

我們會看到在src/app下多出了兩個檔案：hero.service.spec.ts和hero.service.ts

打開src/app/hero.service.ts可以看到下面內容

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {

  constructor() { }

}

注意到我們用@Injectable() 來宣告HeroService這個類別，代表這個類別可能本身有依賴注入，對Service來說是強烈建議要加上這個宣告

將HeroService提供給app使用

Service可以供appModule、或任何Component使用，如果要給appModule使用，
則需在src/app/app.module.ts的@NgModule裡加入

providers: [ HeroService ],

這邊有更多NgModule的說明：NgModule

另外，若要使用CLI來自動完成providers的設定，則可以用下面的指令

ng generate service hero --module=app

修改HeroesComponent去使用HeroService裡的資料

打開src/app/heroes/heroes.component.ts，修改成以下的內容

import { Component, OnInit } from ‘@angular/core’;
import { HeroService } from ‘../hero.service’;//1. 增加HeroService並移除HEROES
import { Hero } from ‘../hero’;

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

heroes: Hero[];//2. 在這邊先不設定內容

selectedHero: Hero;

constructor(private heroService: HeroService) { }//3. 宣告注入的service

getHeroes(): void {
this.heroes = this.heroService.getHeroes();//4. 取service內的資料放進變數內
}

ngOnInit() {
this.getHeroes();//5. ngOnInit會在初始化元件時被呼叫，在此時去取得heroes的值
}

onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}

讓getHeroes被更動時能夠被通知

Observable是RxJS library中很重要的一個功能。

當我們在src/app/hero.service.ts的getHeroes方法回傳值前面加上Observable宣告，當service內的資料變動時，其他注入的內容也會同步被異動

首先要先import下面兩個檔案

import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';

然後在getHeroes的回傳直類型前加上Observable宣告

getHeroes(): Observable<hero&#91;&#93;> {
  return of(HEROES);
}

注：若使用HttpClient.get<Hero[]>()亦會傳回Observable<Hero[]>，只是內容是由http傳來

在接收Observable物件時的方法也與非Observable物件的方式不同，過去若非Observable物件時，在hero.component.ts裡的getHeroes函數如下

getHeroes(): void {
  this.heroes = this.heroService.getHeroes();
}

若要使用Observable宣告則須改為：

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
}

Observable.subscribe()是最關鍵的相異之處
最大的差異在於我們送出修改到伺服器傳回回應之間，未使用Observable.subscribe()方法時，它不會先凍結UI不讓使用者修改，而有可能會造成資料的不一致。而使用Observable.subscribe()可以避免這個問題。

本日範例下載： live example / download example

創立hero-detail元件

在前一篇新手教程3-使用angular的迴圈及判斷式等功能裡，我們在顯示selectedHero的資訊時是與列表寫在同一個頁面
但如果顯示詳細資訊的地方有需要額外拆分出來，可以在創立一個元件，並將selectedHero傳入元件

ng generate component hero-detail

寫入hero-detail的內容

開啟檔案src/app/hero-detail/hero-detail.component.html，這邊會將selectedHero的名稱改為hero

<div *ngIf="hero">

<h2>{{ hero.name | uppercase }} Details</h2>


<div><span>id: </span>{{hero.id}}</div>


<div>
    <label>name:
      <input &#91;(ngModel)&#93;="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

讓元件能接受外部傳送物件進來

開啟src/app/hero-detail/hero-detail.component.ts

import { Hero } from '../hero';

在hero-detail.component.ts裡面，hero一定要以@Input來宣告這個物件

@Input() hero: Hero;

而在HeroesComponent裡，則會以下面的宣告來將hero的值傳入

<app-hero-detail &#91;hero&#93;="selectedHero"></app-hero-detail>

現在我們打開heroes.component.html，修改後的網頁內容會如下

<h2>My Heroes</h2>



<ul class="heroes">

<li *ngFor="let hero of heroes" &#91;class.selected&#93;="hero === selectedHero" (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>

</ul>


<app-hero-detail &#91;hero&#93;="selectedHero"></app-hero-detail>

今日練習的範例連結：live example / download example

延續上一篇的範例: 請按此下載.

利用*ngFor來做迴圈顯示完整列表

首先開啟src/app/heroes/heroes.component.ts
設定一個變數heroes

    heroes: Hero[] = [
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'Narco' },
    { id: 13, name: 'Bombasto' },
    { id: 14, name: 'Celeritas' },
    { id: 15, name: 'Magneta' },
    { id: 16, name: 'RubberMan' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }
  ];

接著開啟app.component.html，利用*ngFor來迴圈式的顯示列表內容

<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

這時網頁上就可以看到成果如下圖:

更多資訊有關於ngFor

使用(click)來設定觸發事件

開啟src/app/heroes/heroes.component.ts，在li裡面增加click的事件

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

在src/app/heroes/heroes.component.ts增加處理的函數

selectedHero: Hero;

onSelect(hero: Hero): void {
  this.selectedHero = hero;
}

更多資訊有關於event-binding

以條件式去增加元件的類別

打開heroes.component.html，在li內增加 [class.要增加的類別名稱]=”條件式為true時增加”

<li *ngFor="let hero of heroes"
  &#91;class.selected&#93;="hero === selectedHero"
  (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

這樣當hero === selectedHero為真時，這個li就會被加上selected這個類別
接下來再到src/app/heroes/heroes.component.css設定該類別的CSS，就能突顯現在所選擇的是那一個了
.selected{
color:red;
}

使用CLI來為專案建立一個元件

ng generate component heroes

用這個指令，CLI會為我們初始化一個新的元件樣版
這時我們開啟app/heroes/heroes.component.ts

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() {
  }

}

只要創建元件，都必需從Angular去import Component。
而@Component則是用來定義這一個元件的相關資訊，有三個metadata

1. selector: the components CSS element selector以及在HTML裡要宣告的TAG名稱
2. templateUrl: 要使用的HTML樣版位置
3. styleUrls: 專為這個元件設定的CSS

要注意的是，我們通常會使用export class，以方便在其他的模組裡可以import來使用

修改元件內容

打開heroes.component.ts

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class HeroesComponent implements OnInit {
  hero = 'heroes works!';//增加一個變數
  constructor() { }

  ngOnInit() {
  }

}

修改heroes.component.html，使用{{hero}}來顯示剛剛在TS檔裡定義的變數

<h1>{{hero}}</h1>

將元件放進頁面裡

打開src/app/app.component.html

<app-heroes></app-heroes>

這時候就可以在頁面中看到剛剛我們所增加的內容

使用物件

創建一個Hero物件
src/app/hero.ts

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

打開src/app/heroes/heroes.component.ts，給予物件正確的值

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

@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit
{
//在這邊設定物件內容
hero: Hero = {
id: 1,
name: 'Windstorm'
};

constructor() { }

ngOnInit() {
}

}

顯示在heroes.component.ts所設定的值

<h2>{{ hero.name }} Details</h2>




<div><span>id: </span>{{hero.id}}</div>




<div><span>name: </span>{{hero.name}}</div>

如果希望將變數格式化
則可以使用

<h2>{{ hero.name | uppercase }} Details</h2>

這個格式化的功能叫做Pipes，更多的說明請見Pipes說明

雙向繫結

Angular一個很方便的功能就是可以支持雙向繫結，使用[(ngModel)]能做到當欄位的值改變時，TS裡變數的值也同時被更改。
這個功能在做表單驗證時非常方便
詳細使用說明請見：NgModules
使用方法: 在src/app/heroes/heroes.component.html加上下面這段

<div>
    <label>name:
      <input &#91;(ngModel)&#93;="hero.name" placeholder="name">
    </label>
</div>

接著要去app.module.ts去加上import資訊讓專案能夠使用ngModel標籤
要注意是在app.module.ts裡喔!
先import並且將FormsModule加進@ngModule的imports列表內，讓下面所有的元件都可以使用FormsModule的功能
import { FormsModule } from ‘@angular/forms’; // <-- NgModel lives here[/code] [code lang="js"]imports: [ BrowserModule, FormsModule ],[/code] 接著，要把剛剛我們所建立的元件HeroesComponent放進@NgModule.declarations裡 [code lang="js"]import { HeroesComponent } from './heroes/heroes.component';[/code] 在app.module.ts的@NgModule增加 [code lang="js"] declarations: [ AppComponent, HeroesComponent ], [/code] 這時，我們會發現我們更動input裡的文字時，model的值也會被更改 今日練習成果下載:live example / download example.

這系列的文章為我在官網學習Angular 5時所紀錄下來的學習筆記。
原文的原始教程都可在Angular的Docs看到。

這三十天的筆記大綱預計分為新手教程、功能介紹、技術支援三個部份：

• 新手教程：一個最簡單的專案，用step by step的方式引導大家去做
• 功能介紹：一個個介紹Angular裡面各別的功能和特性
• 技術支援：涵蓋如何佈署、設定以及angular所使用的npm、typescript等的設定

建立專案

確認電腦已有安裝NodeJS(6.9.x以上版本)以及NPM(3.x.x以上版本)

創建專案

ng new my-app

開啟專案

cd my-app
ng serve --open

編輯第一個自己的頁面

打開src/app/app.component.ts，改為

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = '我的第一個網頁';
}

打開src/app/app.component.html，將內容改為

這是 {{title}}!

src資料夾內的檔案架構

檔案	目的
app/app.component. {ts,html,css,spec.ts}	所有的 Componet、Service、Pipe、Unit test 等等..程式碼都是放在這個資料夾，而 app.component 則是 Angular CLI 預設建立的 root component
app/app.module.ts	預設的 root module ， 告訴 Angular 有哪些 Components 、Modules、 Services，讓 Angular 知道如何 assemble the application
assets/*	放圖片或者是建立 application 需要用的到材料
environments/*	設定 Angular 程式碼會用到的參數，很像 Web.config 的東西。 預設為 environment.ts ， 要產生不同的 environment 的話，參考命名規則為 environment.xxx.ts，在執行或者 build Angular application 的時候加入 xxx 的參數，則可以指定到該 environmnet ，例如 : ng build -xxx、 ng serve -xxx
favicon.ico	網頁頁籤的 icon
index.html	網頁進入點，當使用者拜訪網站的時候，是執行到這個頁面。 在大部分的情況，是不需用編輯的， Angular CLI 在 build application 的時候會自動加入 js 和 css
main.ts	若使用JIT，這個文件為JIT compiler和bootstraps的root module，也就是編譯的起始點。也可以用ng serve –aot，改為AOT編譯而不用修改任何的code
polyfills.ts	因為不同的瀏覽器會支援不同的 web standards， polyfills 就像補丁的概念，補足些沒有支援的部分。Browser Support guide for more information.
styles.css	放置 global styles 的 CSS
test.ts	unit tests 的進入點，有些 unit tests 的設定也寫在這邊
tsconfig.{app|spec}.json	TypeScript 編譯設定檔(tsconfig.app.json) and for the unit tests (tsconfig.spec.json).

 

根目錄資料夾檔案列表

檔案	目的
e2e/	負責放 End-to-End 測試程式碼的資料夾
node_modules/	Node.js 建立的資料夾，負責放 third party modules 的資料夾，其 thrid party modules 清單則放在 package.json裡面
.angular-cli.json	放 Angular CLI 的設定檔 Angular CLI Config Schema
.editorconfig	幫助開發者使用不同的 IDEs 保持檔案格式一致性的設定檔。更多資訊請見此
.gitignore	Git 的設定檔，讓指定檔案不會 commit 到 Source control
karma.conf.js	Karma test 的 unit tests 設定
package.json	npm 設定檔， third party 清單與版本資訊
protractor.conf.js	Angular end-to-end test framework Protractor 設定檔
README.md	專案基本說明文件
tsconfig.json	TypeScript 編譯器設定檔案
tslint.json	Codelyzer（用以保持code style的一致性）和TSLint的設定檔。