Angular 2（上）
在之前有介紹過AngularJS的框架介紹及基本使用，可以知道使用AngularJS所帶來的好處以及從習慣的寫法轉換帶來的適應困難，但在經歷兩年的時間，並經由大量的社群開發者參與，確保這個全新的框架都是透過社群的集體智慧孕育出來的，到目前為止，社群開發者的回饋都非常正面，這代表著Angular 2到推出正式版的過程中，都是由不同社群的專家共同認可。在之前的AngularJS中實踐了依賴注入(Dependency Injection)系統，在Angular 2中更是加入了TypeScript，使得Angular 2變得更加靈活與便利。

在AngularJS框架中擁有的特性擁有太多了，例如：資料聯繫(Data Binding)、Model View Controller(MVC)…等等，所以在使用時會給開發者感覺過於瑣碎。所以在Angular 2設計的理念為簡化了整體的概念模型，所以在Angular 2的特性只有一個組件化(Component)，但是一定會有人說在Angular 2中還有Service、Route、Pipe的特性，但這些特性主要也是架構在Component中，所以算是Utils而已。

架構介紹

在Angular 2中還是沿用了AngularJS的特性，所以在此不再重複介紹既有的特性，重點將著重於在Angular 2新的特性、Typescript以及有進行優化的部分。

多國語系化(Internationalization)

簡稱為i18n，在Angular 2擁有多國語系化的能力，其重要觀念之一為地區資訊(Locale Information)，地區資訊可由一個語言編碼(Language Code)及區域編碼(Country Code)來指定，可由ISO-639及ISO-3166來定義，分別定義了小寫及大寫的英文字母來代表各國的語言代碼。

動畫(Animation)

Angular 2提供了一套機制可以幫助開發者簡化套用動畫的過程，並且也可以自行定義CSS來達到開發者所需的動畫效果。

路由(Router)

在AngularJS中也有提供了Router的功能，但是在AngularJS中的Router功能不盡理想，Google也在Angular 2中由於元件化框架的改變，也優化了Router的功能。可以看到在AngularJS中需在每個所設定的範圍中進行Router的功能，反之在Angular 2中可利用Component框架來做更好的Router機制。

Angular CLI(Cli)

Angular CLI提供一組命令列工具(ng)，可以幫助開發者在開發Angular 2應用程式的時候，不用花費太多的時間在撰寫重複的程式碼。例如：在命令提示字元中輸入”ng new [專案名稱] –skip-tests”，接著等待一些時間後，即可產生Angular 2的專案目錄；。就可以減少許多時間產生一些必要的架構程式碼。

Language Service

Angular 2中套用了微軟(Microsoft)的TypeScript團隊開發的一套函式庫，可以用來即時分析TypeScript/JavaScript程式碼內容，透過型別判斷與推導、程式邏輯與命名規則，自動給予開發工具相關建議，幫助我們在開發 Angular 2 的時候更加流暢。

Material

Google在之前推的Google Material網頁框架，用來設計出RWD(Responsive Web Design)網頁，可以幫助開發者在建立網頁應用程式的時候更加順利。

Compile

Angular 2內建了範本編輯器，可以在網頁應用程式發佈之前，可以將HTML靜態網頁編譯成JavaScript來減少執行期間動態編譯的時間。

Mobile

在因應科技的進步，越來越多人在使用手持裝置來使用網頁應用程式，所以Angular 2也更加的著墨此方面，無論是觸控螢幕的操作、跨平台手機應用程式 (App)，在 Angular 2 裡面都已內建解決方案。

Angular Augury

Google提供了Angular 2一個監測工具的Chrome套件，在此套件中可以看到此頁面上所使用的元件(Componemt)、此元件所使用的變數值以及全部路由的結構。提供開發者更能了解網頁應用程式上是否有問題存在。也可以在Properties中直接進行數值的修改，來即時的觀看結果。

Universal

Angular Universal是一個伺服器渲染機制的實作，透過 Node.js就可以將現有程式碼透過計算，直接產生相對應的靜態 HTML 原始碼，大幅縮短SPA(Single Page Application)網頁首次載入頁面的時間。並且也很容易與其他伺服器框架整合再一起，例如ASP.NET MVC 6就有內建TagHelper機制，搭配JavaScriptService即可將伺服器渲染機制透過Node.js產生完 HTML 之後，回傳至ASP.NET MVC並自動輸出網頁內容，套用這個機制時，程式碼不超過10行，整合起來非常方便，其他像是PHP,Java,Python,ASP.NET,… 等語言或框架，都可以用類似的方法進行整合。

Zones

我們都知道在JavaScript執行環境都是單一執行緒，但是再透過Angular 2的Zones技術可以模擬出類似執行緒的感覺，接著感管理該執行緒中執行的非同步作業。Zones技術可以改善許多JavaScript應用程式的開發環境，像是：呈現更清楚的非同步作業執行時的錯誤訊息、更容易測試與設立 Mock 資料…等等。
Zones技術是指 Zone.js函式庫，源自於Dart語言的Zones特性，主要用來攔截(intercepting)目前正在執行中的JavaScript非同步作業，再來用更強大的方式管理這些執行中的非同步作業，就好像這些非同步的JavaScript程式執行在一個虛擬的區域中(Zones)一樣。

IDE(Integrated Development Environment)的選擇

目前較常用來開發Angular 2的IDE如下：
 Visual Studio Code
 Visual Studio 2015
 Atom
 Sublime Text
 Plunker
在以下的範例會用Visual Studio Code來進行解說，並介紹一些好用的套件。

Angular 2環境建置

在開始進行開發前，我們須先設置好我們的開發環境以及我們的IDE；一開始，我們須先安裝Node.js，安裝完成後，我們要驗證是否有安裝成功，可以在命令提示字元輸入”node -v”來確認是否有安裝成功。


▲ 《圖四》查詢Node.js是否安裝完成



接著我們安裝Google提供的Angular Cli，在安裝之前我們須先npm(Node Package Manager)來協助我們安裝Angular Cli(在Node.js 0.6.3版本開始內建npm)；當安裝npm完成後，也可以在命令提示字元輸入”npm -v”來確認是否安裝完成。


▲ 《圖五》查詢npm是否安裝完成


接著來完成剛剛所說的Angular Cli安裝，利用npm來安裝Angular Cli，我們在命令提示字元中輸入” npm install -g @angular/cli”來進行安裝。接著來驗證是否安裝成功，我們在命令提示字元中輸入”ng -v”來驗證是否安裝成功。


▲ 《圖六》查詢Angular Cli是否安裝完成


在使用IDE進行開發前，我們須先確認開發環境是否都正常，所以透過命令提示字元來進行Angular 2專案的建立，我們在命令提示字元中先到專案要放置的位置。接著我們在命令提示字元中輸入”ng new [資料夾名稱]”，在此步驟中，會安裝npm及typing套件。


▲ 《圖七》利用Angular Cli產生新的專案


我們在命令提示字元中輸入”ng serve”或是”npm start”來開啟網頁應用程式；當開啟完成後，我們可以在瀏覽器的網址列輸入”localhost:4200”來測試網頁應用程式是否正常。


▲ 《圖八》在瀏覽器中測試專案是否正常


再接著進行更進一步的介紹之前，我們先來介紹Visual Studio Code的一些好用套件。

Angular 2 TypeScript Snippets

在開發Angular 2的時候經常有需多語法糖，對於剛開始開發的使用者經常會忘記或是打錯，這個套件可以減少開發者的語法或是打錯字的錯誤。

Auto Import

在開發 TypeScript 的時候由於會經常用到 ES2015 的 import 語法匯入另一個模組的型別，透過 Auto Import 可以將許多型別自動化載入，大幅縮短開發時間。

ES2015是ES5(傳統JavaScript程式語言)的「超集合」，具有新穎的JavaScript語言特性，例如：let、const、for-of…等等。

TypeScript Import Assistance

在上一個套件Auto Import可以縮減開發時間，但是有些專案還是有可能會無法透過Auto Import自動解析的時候，所以安裝TypeScript Import Assistance套件幾乎都可以正確的解析；使用方法很簡單，只需要將游標放置在變數上面，接著按下”Ctrl + Shift + P”再輸入” Resolve and import symbol”，套件就會自動地幫忙處理Import的問題。


▲ 《圖九》使用TypeScript Import Assistance套件說明



Path Intellisense
只要是在程式碼中輸入「路徑」或「檔名」時，會自動提供輸入建議，並且有路徑檔名的自動完成功能，可以少打一些字減少開發時間。

Relative Path

有些專案的資料夾結構很深，要Import時會需要輸入很多層的資料夾，會浪費很多的開發時間。所以使用這個套件就可以很快速的產生此檔案的路徑。只需要按下”Ctrl + Shift + H”再輸入檔案名稱就可以產生此檔案所在的路徑，可以節省很多時間在輸入檔案路徑。

繼續閱讀...Angular 2（下）