由于具有實作更高性能的浏覽器和智能電話應用程式的潛力，單頁應用程式 (SPA) 技術在軟體行業引起了廣泛的興趣。在過去 5 年多的時間裡，開發人員對 Angular（一個開源 SPA 架構）的興趣遠超他們對其他 Web 架構（React、Backbone、Meteor 和 Ember）的興趣，這從 StackOverflow 網站上針對每種 Web 架構的問題數量上可以判斷出：
Web 和移動開發人員非常喜歡 Angular 2（2016 年 9 月釋出）。Angular 2 不是 Angular 1 的一次更新，而是一個全新的、不同的、更進階的架構。精通 Angular 2 已成為建構高性能、可擴充、穩健、現代的跨平台應用程式的一種很吃香的技能。
準備工作
安裝 Node.js
- 從 Node.js 下載下傳穩定版本，選擇預設選項來完成安裝。
- 安裝完成後在指令行運作 node -v 确認是否安裝正确。輸出資訊如下，
v6.9.4
安裝 Angular CLI
- 運作 npm install -g angular-cli 來安裝angular cli。
- 安裝完成後在指令行運作 ng -v 确認是否安裝正确。輸出可能如下，
angular-cli: 1.0.0-beta.25.5
node: 6.9.4
os: darwin x64
示例項目概述
項目包含一個開箱即用的 Angular 應用程式，以及基于此開發的一個自定義應用程式。當完成項目時，您将擁有一個包含 3 個微型應用程式的 Angular 應用程式，這些應用程式使用了 3 個 Web 服務 API：
來自雅虎的天氣元件
貨币兌換
電影細節
所有應用程式邏輯都将在您的浏覽器中運作。僅在浏覽器需要新資料時，才需要伺服器。事實上，您可以關閉伺服器程序，它仍會在您的應用程式中工作，因為它是一個 SPA。
下圖顯示了應用程式拓撲結構：
建立基礎應用程式和子產品
建立一個 Angular 項目
運作下面的指令來生成一個新 Angular 項目（其中 dw-ng2-app 是項目名稱）：
注意不同版本的angular-cli對項目名稱有不同的限制，比如
1.0.0-beta.21 允許使用 dw_ng2_app 的名稱
1.0.0-beta.25 不再允許 dw_ng2_app 名稱，需要用 dw-ng2-app
安裝所有需要的包和 Angular 基礎應用程式（這将花費大約 10 分鐘時間）後，在 /dw-ng2-app 目錄可以看到項目結構：
|— e2e
|— node_modules
|— src
angular-cli.json
karma.conf.js
package.json
protractor.conf.js
README.md
tslint.json
運作開箱即用的 Angular 應用程式
- 在項目目錄，運作 ng serve 來啟動應用。預設情況下，該程序在端口 4200 上啟動。
- 打開您的浏覽器并輸入 URL http://localhost:4200/。您的 Angular 應用程式會顯示 app works!，這表明應用程式已啟動、運作并準備就緒：
使用 Angular 2 開發單頁應用程式之一準備工作示例項目概述建立基礎應用程式和子產品進一步的學習 - 如果在應用程式運作過程中更改代碼，Angular 會非常智能地監視并自動重新啟動應用程式。嘗試編輯 src/app/app.component.ts 檔案，更改 title 的值。如下，
使用 Angular 2 開發單頁應用程式之一準備工作示例項目概述建立基礎應用程式和子產品進一步的學習
後續文章中将繼續基于此開發的一個包含了 3 個微型應用程式的應用程式。
進一步的學習
更多技術提供服務，您可以，
- 直接擷取文章源代碼，咨詢老師進行答疑問指導，請關注報名我們的實戰課程：http://www.dabllo.com/course/207
- 與更多學員進行技術交流請加 QQ 群，
- Web前端技術交流群：610334712
- Bootstrap技術讨論組：392639498