使用Angular-cli搭建Angular2開發環境

• Angular2簡介

Angular 2 是Google推出的一個跨平臺全終端的框架，和目前比較火的React和Vue.js相比，有如下優點:

1. 由於Google的目的是推出一個完整解決方案，所以官方預設提供的類庫(比如routing，http，依 賴性注入(DI)等)非常完整，無需自己選擇。React的一大痛點就是選擇太多導致在配置尋找 元件和類庫的過程中消耗太多精力，當然從另一方面看這也是其優勢，選擇眾多且自由。
2. 官方支援TypeScript(微軟出品，是JavaScript的超集，是 JavaScript 的強型別版本)作為首選 程式語言，使得開發指令碼語言的一些問題可以更早更方便的找到。
3. RxJS友好使得響應式程式設計在Augular2中變得極為容易(Google開發的框架依賴這麼多的微軟的產 品，可⻅微軟的轉型還是很成功的)
4. 支援NativeScript甚至ReactNative等進行原生Android/iOS應用開發(React支援ReactNative)
5. 支援伺服器端渲染(React也支援)

• 環境配置要求

 

Angular2需要node.js和npm，安裝方法參照https://blog.csdn.net/watson2017/article/details/89358102

• 安裝Angular-cli

Angular-cli是Angular團隊提供的一個命令列工具，用於快速構建Angular2的應用。它的優點是進一步遮蔽了很多配置的步驟、自動按官方推薦的模式進行程式碼組織、自動生成元件/服務 等模板以及更方便的釋出和測試程式碼。

使用npm命令安裝Angular-cli：

npm install -g @angular/cli

• 使用Angular-cli建立Angular2專案

在專案目錄下使用命令建立Angular2專案

ng new projectName

• 啟動專案

ng serve

根據命令列日誌可以看到專案的訪問路徑是：http://localhost:4200

開啟瀏覽器輸入 http://localhost:4200，即可看到程式執行成功。