2016年9月28日 星期三

[Angular2] 建立專案範本

前言

身為一個全端工程師,除了網站前後端外,在專案上開始也有開發App的需求,在過去我們團隊使用Angular來撰寫前端程式,後端採用ASP.NET Web API,而App我們使用Cordova搭配ionic 。但專案進入維護期,有新人也加入了,但因為Angular學習曲線有點太高,導致會不太好上手,且專案一大,因為是使用JavaScript開發,如果對於JavaScript特性不太熟悉,很容易掉入地獄裡面。在今年評估Angular2後,決定狠下心從將Angular1重構成Angular2專案,因為是搭配TypeScript來開發,搭配編輯器的功能,讓有些錯誤可以在編譯時期,且編輯器自動完成功能讓開發起來更加順手,對於TypeScript有種相間恨晚的感覺,應該在Angular1時間就使用TypeScript來撰寫會比較順手。

Angular2學習曲線我認為也不低,複雜在於"開發環境",他將自己定位成平台,所以整合很多的open source技術進來,但就一個團隊新人來講,開發環境並不是首要去了解的,很多事情都定義成腳本,只要會使用就可以。就程式撰寫上,Angular2的學習曲線我覺得大大的降低,且因為官方就訂了很多程式開發標準.建議,讓使用Agnular2開發的人都有一致的開發風格,這也是後來在github看別人專案也能很快看懂的原因。

目前(2016年)也已經進入正式版,這篇文章算是一個開始,我陸續想將開發上所撰寫的功能及採到的地雷,整理成一篇一篇的小筆記,而不免俗的來Hello Word一下,讓之後demo的Sample Code都以此篇的專案範本來撰寫。

建立Angular2專案範本

使用前請安裝Node.js 會一併安裝NPM

可以用指令確認版本

螢幕快照 2016-10-08 下午9.46.40

透過NPM安裝 Angular-cli

npm install –g angular-cli

ng –v 確認版本

螢幕快照 2016-10-08 下午9.48.16

ng new mydemo 建立專案
cd mydemo 進入資料夾
ng serve 啟動本機localserver

用瀏覽器開啟http://localhost:4200/

如果有出現app work!畫面代表成功。

--

本篇利用Angular-cli很簡單的建立範本讓之後的文章做參考,

建議可以參考 Angular2官網手把手接學  照步驟做完應該就會開發了XD

也可以參考保哥的文章,整理很多Angular2觀念及延伸學習資源

文章索引連結(陸續新增)

Angular 2

[Angular2] 在每個Request加入自訂的Header資訊

[Angular2] 在angular-cli專案加入第三方套件-以jQuery.Bootstrap為例

[Angular2] 在專案加入多國語系

 

Ionic 2