[功能介紹-1] Angular架構

Angular是一個框架,用來編寫html的應用程式,可以用javascript或typescript去編寫。

下圖是官網上所繪製的Angular架構圖:

首先先看最中間那一塊,是由template、metadata、component所構成的,這三個是一個component必備的元素。
所謂的元件可以看之前創建hero那篇文章,我們可以用下面指令創一個元件

創完一個元件後,可以看見下面這些檔案

Templates

裡面的component.html檔就是template,它看起來像是一個html的檔案,可以在裡面用資料綁定與事件綁定與controller裡的物件做繫結。
下面是一個template的範例:

可以注意到上面有些地方與一般的html不相同,例如像是*ngFor、{{hero.name}}、(click)="selectHero(hero)"等…
這就是架構圖畫面上用來連繫Component以及Template的兩個箭頭,property binding以及event binding。

例如click事件繫結是(click)=’functionName()’,物件繫結可以用{{data}})。
透過這樣的繫結可以讓template將使用者操作的事件傳給component,component也可以將資料的更動即時的反饋到template所顯示的資料上。

下圖是非常清楚的binding類型列圖

其中{{hero.name}}為值繫結,可以綁定component裡的值。
[hero]="selectedHero"為property binding,可以將某個元件裡的變數塞進一個HTML元素的屬性裡。。
(click)="selectHero(hero)" event binding可以呼叫component裡的function

這個則是雙向數據綁定,在雙向綁定中,與屬性綁定一樣,數據屬性值將從組件輸入到輸入框中。用戶的更改也會返回到組件,將屬性重置為最新值,就像事件綁定一樣。

數據綁定在模板及其組件之間的通信中起著重要的作用。

數據綁定對於父組件和子組件之間的通信也很重要。

Component

而component.ts檔則是component內容,裡面會有一些屬性或方法來供template呼叫,下面是一個Component的簡單範例:

當用戶在應用程序中切換畫面時,Angular會創建,更新和銷毀組件。你的應用程序可以通過可選參加這個生命週期的每個時刻動作的lifecycle hooks,像ngOnInit()。

Metadata

metadata則是在component.ts裡由@Component開頭的區塊來宣告,裡面會定義這個Component在要如何在別的元件的template裡被引用,templateUrl則是定義自己這個元件要顯示的html模版位置及styleUrls是css檔案位置。
例如下面這個metadata宣告

就可以用下面的方式來顯示這個元件

Modules

接著來介紹左上方的區塊

Angular應用程序是模組化的,Angular稱自己為NgModules的模組化系統。NgModules是一個很大的議題,在後面會有另一篇文章專門介紹ngModules。
一個小的application至少會有一個模組,稱為root module。雖然有些小的專案可能就只有一個模組,但大多大的專案都會有多個模組,稱為feature modules,一個模組內會是相同工作範疇的一組元件,它們有許多工作流程或功能上緊密相關,彼此協同運作。
當我們執行了這樣的指令來創建一個新的專案時

可以看到src/app資料夾內有app.module.ts這個檔案,這個檔案就是angular預設的根模組。
其內容如下:

一個NgModule,無論是root module還是feature modules,該class裡一定會有@ngModule的宣告區域,在angular裡會有許多@開頭的宣告,這樣的宣告稱為decorator,可以在元件或模組裡設定許多metadata。關於ngModule更多說明可以看@NgModule的說明關於decorators更多的說明則可以看這邊,這兩項之後都會有專門的文章來介紹。

NgModule是一個用來描述這個模組裡有那些component的metadata,是一個decorator function。
在ngModule裡最重要的屬性有下面這五點:

  • declarations:屬於這個模組的成員。Angular有三種成員:components, directives,以及pipes。
  • exports:要將declarations宣告的那一些成員公開。讓其他模組引用此模組時,可以存取該成員的public function。
  • imports:需引用的模組,所有在這個模組內的元件要引用的模組都要在此宣告
  • providers:要引用的Service需在此宣告
  • bootstrap:這個屬性只有根模組需要設定,在此設定在一開始要顯示的application view

註:上面的範例中,因為有設定bootstrap代表其為一個根組件,而根組件是不需要exports出去的,因為不會有任何其他modules需要用到它。

而要啟動整個應用程序可以在main.ts中加上這段

在js裡我們透過export一個class來供其他modules使用。並在其他js檔案利用import來將這個class引入。

NgModules與JavaScript modules是完全不同的兩樣東西,我們可以同時透過ngModule與JS Modules來交互使用以達成我們所需要達成的目的。

詳細了解Web上的JavaScript模組系統

Angular libraries


angular內建了許多可供應用的模組,我們稱為library module。
所有的library module都以@angular為前綴開頭,可以使用npm來安裝管理它們。
例如要使用Component功能要引用@angular/core的Component

或是使用BrowserModule

Directives


在架構圖中的template右邊,可以看到有一個directive指向template。directive是透過Angular使用內建或自訂directive用來自己定義html元素,並簡化dom操作的功能。可以讓template裡去使用。
一個directive會由@Directive來宣告。其實directive與component的本質是相同的,只是component是一個有template的directive,而directive沒有。我們可以視component為directive的擴展,擴展了template的功能。不過因為component在angular是非常重要的,和directive有不同的意義,因此會將component以及directive在架構上分開來。

directives分為架構型的和屬性型的:
下面是兩個內建架構型的directive範例

*ngFor 會讓angular重覆寫許多的 <li>將heroes裡的資料跑過一圈
*ngIf 則會讓angular只有在selectedHero的值為true時才會顯示app-hero-detail元件
而屬性型的directive則例如像是做雙向繫結的ngModel,下面的片段程式會將hero.name的值塞入input的value屬性內,並且監聽使用者修改input的值的事件將修改傳回至hero.name

Services


架構圖的左下區是很多的Service注入至Component裡。幾乎所有功能都可以是service,但是它應該是目的明確且狹義的功能。
例如:記錄服務、數據服務、消息服務、稅計算器、應用程序配置等…

以下是一個範例,在這個例子中可以看到我們可以利用getHeroes()和service取得Hero列表,而Service則負責與Backend溝通由API取得資料並且回傳給component

Dependency injection

依賴注入是一種設計模式,可參考這篇文章了解:理解 Dependency Injection 實作原理
在Angular中,大多數依賴是服務,Angular的元件使用依賴注入為自己提供他們需要的服務,對於元件來說,服務必須是完全依賴的,component會在元件內使用service所提供的方法來取得自己所需的資料。

HeroService依賴注入的過程看起來像這樣:

injector會有一個所有Service的集合。如果所需要的Service不在這個集合中,那麼injector將創建一個Service並加進Service集合裡。當component所需要的Service都已經取得後,只要在constructor設定該服務在此元件內的名稱,就可以在元件裡自由的使用服務了。

下面是一個依賴注入的範例

例如上面的程式碼就會讓該component裡的程式碼可以使用service.getHeroes()來取得英雄列表。

在上圖中,上面要被injector選擇的那些service是怎麼來的呢?我們可在根模組或者自己所在的模組裡去提供所有需用到的服務,這樣在這個模組內的所有元件都可以使用這個服務,如下:
src / app / app.module.ts

或者也可以在該元件的metadata裡用providers來設定這個元件要使用這個服務,如下:

參考資料

[新手教程-7] 使用http來與API溝通

Angular處理http是使用rx(Reactive Programming)來實作的,類別的名稱為rxjs
在閱讀此篇之前,建議可以了解一下何謂Reactive Programming,其核心概念為何,這樣會比較容易理解本篇的內容
推薦閱讀:Reactive Programming 簡介與教學(以 RxJS 為例)官網 ReactiveX
RxJS教學:30 天精通 RxJS

使用http來取得api資料

將src/app/hero.service.ts取得資料的方式改由API取得

上面程式碼註解地方代表有修改過的地方。
所有的HttpClient方法都返回一個Observable的物件。一般來說,Observable物件會傳送多次資料給接收者,但http.get所取得的值為例外,因為http方法是發出要求並收到回應後就不會再有動作,因此它只會傳一次資料給取得這個資料的接收者。並且需要在被subscribe後才會啟動動作
http.get預設接收的格式為json,會自動對照所取得的json轉化成一個對應屬性的物件以方便取得資料。

處理錯誤

如果在取得api時發生網路錯誤或其他問題導致無法順利取得伺服器資料時,可以用下面的方法來偵聽錯誤
首先,導入rxjs/operators類別

接著,使用pipe方法擴展Observable並在裡面下達catchError()來處理錯誤的狀況

下面則是catchError的內容

在上面的T是類型參數,在這個例子中,T代表Hero[]。這可以讓程式在打api失敗時依舊可取得符合應用程式所期望的類型的回傳值。

使用http修改伺服器資料

取得資料時使用get,而修改資料時使用put,其參數意義如下:

其中httpOptions較常設定的是headers,也就是宣告傳去的格式

下面是使用updateHero的範例

在RxJS中,有兩個角色,ObservableSubscription,Observable負責產生資料,創建後不會馬上啟動,而在關注(subscribe)後開始啟動。

使用http新增伺服器資料

新增資料在rxjs裡是使用http.post()

使用addHero方法的範例如下:

使用http刪除伺服器資料

刪除資料我們使用http.delete(),範例如下

而呼叫deleteHero的地方則要這樣寫:

上面我們可以看到在呼叫deleteHero時,即便刪除完成後沒有要多做任何時,仍然需要加上subscribe()
就像上面說過的,所有rxjs的動作都會在有人subscribe後才會呼叫,因此如果忽略subscribe(),http將不會將刪除請求發送到伺服器!
Observable需要等到有東西subscribe它,才會被執行。

使用搜尋功能

於src/app/hero.service.ts增加搜索功能

創建一個HeroSearchComponent的class

修改src/app/hero-search/hero-search.component.html

上面的程式碼中,要注意的是這一行

如果光使用for迴圈去使用heroes$,Observable不會做任何事,async透過|這個pipe來自動做subscribe的動作,我們可以不用再次的透過subscribe()來讓Observable被執行
而heroes$則是告知這個for迴圈操作的對象是一個Observable而不是一般的值。

接著我們修改src/app/hero-search/hero-search.component.ts

上面的程式碼中,heroes也需要寫為heroes$並宣告它是一個Observable

searchTerms在這邊被宣告為RxJS裡的Subject.

一個Subject自己本身是observable,並且接收一個observable為參數。因此我們可以對Subject做許多和Observable相同的動作。
也可以使用next(value)去傳值至searchTerms裡,對任何的Observable物件也都能這樣操作。

在這邊的search()方法與keyup事件綁定,searchTerms會返回一個Observable的觀察結果。

另外searchTerms的寫法

注意:使用switchMap(),每個有資格的鍵事件都可以觸發HttpClient.get()方法調用。即使在請求之間暫停了300毫秒,也可能有多個HTTP請求在運行,並且可能不會按照發送的順序返回。
switchMap()保留最初的請求順序,同時只返回最近的HTTP方法調用的observable。來自先前搜尋的結果被取消並被丟棄。
不過,取消先前的searchHeroes() Observable 並不會中止掛起的HTTP請求。不需要的結果在到達應用程序代碼之前就被丟棄了。

最後成品樣子如下:

完整範例檔請見: live example / download example.

[新手教程-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

參考資料