第242期 / December 5, 2017

研發新視界

分享到臉書!分享到維特!分享到噗浪!分享到Google+!分享到微博!轉寄友人友善列印

Angular 2(上)

作者/陳昱宏

[發表日期:2017/12/5]

前言

在之前有介紹過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”再輸入檔案名稱就可以產生此檔案所在的路徑,可以節省很多時間在輸入檔案路徑。

內文待續...

本文轉載自RUN!PC