Angular 2（下）
AngularDoc for Visual Studio Code

在開發的期間，我們需要了解網頁應用程式的Router或是此頁面的參數值，也可以透過AngularDoc for Visual Studio Code套件來查看這些資訊，說白了其實就是Visual Studio Code版的Angury Chrome套件。


▲ 《圖十》AngularDoc for Visual Studio Code使用畫面



Angular Augury

Angular Augury套件其實就和AngularDoc for Visual Studio Code的功能很相似，但此套件是在Chrome上的外掛套件；在瀏覽器上Debug時，可以看到和在開發時看到的資訊是一樣的，也可以即時的修改變數的值，即時的看到結果。


▲ 《圖十一》Angular Augury使用畫面


在介紹完Visual Studio Code好用的套件後，回到Angular 2的基礎應用，我們先來看一下利用Angular 2 Cli來產生的Component資料架構。


▲ 《圖十二》Component資料結構


在利用Angular 2 Cli產生出來時，不會有hero.service.ts和app-routing.module.ts這兩個檔案，所以我們最後再介紹hero.service.ts及app-routing.module.ts這兩個檔案的用法及用處，主要介紹系統必要的檔案，我們先看app.component.ts檔案，這個檔案有點類似Java中的Controller，在此可以編輯一些Function供頁面上使用，在此也可以設定對應的Html網頁頁面以及相對應的CSS檔案，如下圖(圖十三)所示。


▲ 《圖十三》app.component.ts檔案內容


在上圖可以看到在@Component中設定了Html的路徑以及CSS檔案的路徑，另外可以看到selector的屬性設定，之前有提到Angular 2最大的改變是元件化，所以將此當作一個元件，所以自然就會有一個主要的頁面來放置這些元件來組成網頁應用程式。



▲ 《圖十四》index.html檔案內容


由上面兩個圖示可以看到在app.component.ts中的selector屬性設定了app-root，所以表示在index.html中設定一個自訂的標籤為app-root，在Angular 2中會自動處理此特殊自訂的標籤，來轉換成app的元件屬性。


▲ 《圖十五》app.module.ts檔案內容


接下來介紹一下app.module.ts檔案的內容設定，declarations屬性是設定在此網頁應用程式會用到的元件(Component)，imports屬性主要是要載入Angular 2的主要Module，因為有使用到Angular 2的主要Module，所以我們要將上述所設定的Component及Module來載入。


▲ 《圖十六》app.module.ts載入Component及Module


我們在圖十五跟圖十六有看到AppRoutingModule的設定元件，顧名思義就是在做網頁的Router，所以接下來看app-routing.module.ts的檔案內容並且簡單的介紹如何設定網頁的路徑及相對應的元件(Component)。


▲ 《圖十七》app-routing.module.ts檔案內容


App-routing.module.ts主要是透過RouterModel來幫我們將設定好的Routes載入至Angular 2框架中，在設定的部分需要先給它判定的網址，接著就是指定導頁的元件，比較特別的是每個網頁應用程式都有首頁的部分，所以在首頁的部分我們將網址導頁至另外一個元件；另外我們也需要在HTML頁面上設定導頁所顯示的區塊，如圖十八。


▲ 《圖十八》Route在HTML頁面顯示的區塊


在圖十七中的Routes的最後一個HeroDetail可以看到如何將參數值帶入Function中使用的設定，在path中參數的寫法是在參數的前面加入’：’，即可讓Angular 2知道此path的值是參數不是網址的路徑；當然在Function中也要加入相對應接的參數，如圖十九。在此的寫法有加入Angular 2的Http元件來取得資料，之後會介紹Service的寫法及如何串聯API來取的資料。


▲ 《圖十九》hero-detail.component.ts的Init Function


在上圖可以看到我們藉由Activatedroute元件來取得參數的資料，取得參數數值的方式是使用+params來取的Router設定path的參數值。接著可以將取的資料放入頁面上所需的變數以及設定如果資料取得有錯誤時的處理；在此我們將會導頁至首頁。在圖十九可以看到取的資料的方式是透過heroService的getHero Function來取的資料，我們來簡單的介紹Service的使用方法及如何取的Web Service API的資料。


▲ 《圖二十》heroService的getHero Function


由上圖可以看到取得Web Service API的資料時也是使用Http元件來做處理，在此我們利用GET來取得所需的資料，接著我們會將取回的Json格式資料轉形成我們所設定的Model Hero。這樣就可以直接在頁面上進行顯示。
在Angular 2裡面想要使用外部API的功能時，會發現在頁面上無法取得遠端API的資料；在此是因為遠端的API並沒有實作CORS協定，所以無法跨網域去取得資料。在此可以藉由Proxy機制來解決此問題。


▲ 《圖二十一》遠端的API並沒有實作CORS協定時的錯誤


我們在專案中新增一個proxy.config.json的檔案，在檔案中設定遠端API的網域及是否檢查SSL憑證，藉由這樣設定就可以在Angular 2中呼叫網址”/rest”時，系統會將此網域轉換成遠端API的網域。

▲ 《圖二十二》proxy.config.json內容及呼叫URL


以上可以看到簡單的介紹在前端使用Angular 2來做頁面顯示並且串聯遠端API來做資料的擷取及處理。當然在表單上的處理也繼承了AngularJS的動態驗證及檢核，只是在Angular 2上不再給予HTML Tag特殊的屬性值，而是使用小括號及中括號來確認資料是單向還是雙向的處理。在屬性繫結中，一個值從Model中傳到View上的目標屬性。我們把名稱放在中括號 [ ] 裡面來標記出目標屬性 。這是一個 從Model到View的單向資料繫結。在事件繫結中，從View上的目標屬性把值傳到Model裡。我們透過小括號 ( ) 把名稱包起來標記出目標屬性。這是一個 從View到Model的反向單向資料繫結 。
在下圖中可以看到最後有兩個屬性是用#符號開頭的，這裡的#spy為臨時Model引用變數，換句話說就是給予這個HTML Tag一個臨時變數，這個變數可以在監測Tag的即時變化，像是ClassName、Value、ID、Name…等等的屬性。


▲ 《圖二十三》Angular 2資料雙向綁定


當然也可以在view呈現的時候可以使用邏輯運算，下圖可以看到在使用時需要使用*字號來使用，*號主要是簡化寫法，如果不使用*號時就會比較冗長。參數值的設定方式和Java寫法一樣，這樣就可以加入下拉式選項。


▲ 《圖二十四》HTML使用ngFor處理顯示資料





▲ 《圖二十六》頁面上使用ngFor的顯示結果



總結

近幾年可以看到很多都會使用Angular來做前端(Front-End)的框架，近期AngularJS已經越來越多人使用，逐漸追上使用Jquery的開發者。此外也用Google Trends來確認目前前端框架的查詢度。當然並不是因為很多人使用跟查詢度很熱絡我們才使用他。原因其實很簡單，就像前面介紹的，Angular2提供了跨平台、速度與效能及生產力提升的優點，另外Angular2吸取了AngularJS的優點以及接收使用者的回報並改善這些讓使用者感到不方便的缺點或是設計。



作者簡歷
目前服務於凌群電腦金融產品研發處，在學時期主要研究領域為社群資料的分析及處理。曾參與國內多家大型金融機構銀行系統開發專案，目前主要負責國內主要銀行之網銀系統開發。主要使用語言為Java，前端框架有Spring MVC Framework及Shiro Security Framework，目前正在研究IOS App及Android App開發；另外有自行研究

...回到 Angular 2（上）