[新手教程-6] 使用Routing來切換頁面

什麼是Routing?

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

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

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

新增AppRoutingModule

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

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

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

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

增加Routes

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

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

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

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

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

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

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

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

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

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

如果要回上一頁則使用

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

參考資料

[新手教程-5] 建立Service

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

創建 HeroService

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

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

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

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

將HeroService提供給app使用

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

這邊有更多NgModule的說明:NgModule

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

修改HeroesComponent去使用HeroService裡的資料

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

讓getHeroes被更動時能夠被通知

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

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

首先要先import下面兩個檔案

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

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

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

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

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

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

[新手教程-4] Angular的主從元件開發

創立hero-detail元件

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

寫入hero-detail的內容

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

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

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

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

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

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

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