在網路上已經有許多的環境建置文章，在這裡還是依照慣例來個 Angular 的 Hello World!（提醒：這裡介紹的是 Angular 2 以上的版本，而非 AngularJS）

開發過程的好朋友 Angular CLI

安裝 Angular CLI 可以幫忙我們以下的事情

• 建立應用程式骨架
• 啟動 web server，預覽目前程式 (類似 live-server)
• 執行測試
• 建置與發佈
• 產生 Angular 元素 (component、service、module、directive 等...)

接下來開始建置開發環境吧！安裝 Angular cli 之前，需要確保你的電腦有 Node.js 與 npm 套件管理器。

Node.js

通常在 Node.js 官網直接在下載 LTS 版的就可以。而在 Angular 的官網中，有提供此連結來參考當下的版本需求。

別擔心，我們不需要寫 Node.js

npm

基本上將 Node.js 安裝完後， npm 套件管理工具就一起安裝好了，可以用以下指令來檢查安裝版本。(參考開啟 command-line 方式)

node --version
npm --v

安裝 Anglar CLI

安裝以上兩個工具後，就可以開始安裝 Angular CLI 了。用 npm 指令來安裝最新版本的 Angular CLI

npm install -g @angular/cli

安裝完後，輸入已下指令確認版本

ng --version

使用 Angualr Cli 建立第一個專案

環境安裝好後，開啟新的 cmd ，輸入

ng new project1

接者會詢問你否加入 Angular routing

? Would you like to add Angular routing? (y/N)

這裡可以選就算選擇 N 在開發階段也可以用手動方式加入 Angular routing ，所以選哪個都可以

接著問你想用哪種樣式表，這裡選擇 SCSS，有關這些預處理器的資訊這邊就描述了

Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ]
  Less   [ http://lesscss.org                                                 ]
  Stylus [ http://stylus-lang.com                                             ]

Angular CLI 就會幫你在 project1 目錄下自動產生應用程式的骨架與一些檔案，並安裝一些必要的相依檔案。

啟動程式

在 cmd 輸入

cd project1

npm start

就可以啟動第一個應用程式了！

建議安裝的開發工具

Visual Studio Code

微軟推出的編輯器，非常好用。
為什麼好用?可參考新一代的編輯器 — VSCode這篇文章。

擴充套件

這邊推薦 Will 保哥 整理出來好用的 Angular 相關套件，只要安裝一個套件，就能把其他的套件一起安裝進來。

在編輯器左邊點擊方塊圖示，並搜尋 angular

下載 Angular Extension Pack，有興趣的人可以仔細看看各個套件的功能

Augury

此為 chorme 的擴充功能，可以在 chrome 線上應用程式商店下載到。 Augury 可以幫助開發者分析 Angular 程式頁面中所用元件的狀態與方法。

今日結語

大致說明了一些開發上會需要用到的工具，接下來會介紹 Angular 的世界裡會有哪些角色，這些角色有哪些職責，他們是如何合作建構出一個應用程式的。