[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

可以用指令確認版本

透過NPM安裝 Angular-cli

npm install –g angular-cli

ng –v 確認版本

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