第一步：安裝 Angular CLI

你要使用 Angular CLI 來建立專案、建立應用和庫程式碼，並執行多種開發任務，比如測試、打包和釋出。

全域性安裝 Angular CLI。

要想使用 npm 來安裝 CLI，請開啟終端/控制檯視窗，並輸入下列命令：

npm install -g @angular/cli

第二步：建立一個工作區和初始化應用

Angular 工作區 就是你開發應用的上下文環境。 每個工作區包含一些供一個或多個專案使用的檔案。 每個專案都是一組由應用、庫或端到端（e2e）測試構成的檔案。

希望建立工作區和初始化應用專案：

1. 執行 CLI 命令 ng new，並提供一個名字 my-app，如下所示：ng new my-app
2. ng new 會提示你要把哪些特性包含在初始的應用專案中。請按回車鍵接受預設值。

Angular CLI 會安裝必要的 Angular npm 包及其它依賴。這可能要花幾分鐘。

還將建立下列工作區和初始專案檔案：

• 一個新的工作區，根目錄名叫 my-app
• 一個初始的骨架應用專案，也叫 my-app（但位於 src 子目錄下）
• 一個端到端測試專案（位於 e2e 子目錄下）
• 相關的配置檔案

初始的應用專案是一個簡單的 "歡迎" 應用，隨時可以執行它。

第三步：啟動開發伺服器

Angular 包含一個開發伺服器，以便你能輕易地在本地構建應用和啟動開發伺服器。

1. 進入工作區目錄（my-app）。
2. 使用 CLI 命令 ng serve 啟動開發伺服器，並帶上 --open 選項。cd my-app
ng serve --open

ng serve 命令會自動啟動伺服器，並監視你的檔案變化，當你修改這些檔案時，它就會重新構建應用。

--open（或只用 -o）選項會自動開啟瀏覽器，並訪問 

如果因為某些原因，你計算機中的 4200 埠被佔用了，你可能希望你的這個應用在不同的埠上被啟動。

你可以在你的啟動命令上新增一個引數 --port，將上面的 ng serve --open 修改為 ng serve --open --port 4100, 這個命令將會對你的第一個 Angular 專案進行編譯後部署啟動，在啟動完成後將會自動在瀏覽器上開啟連結，你應用伺服器部署的埠為 4100。

看，你的應用正在使用一條訊息歡迎你：

第四步：編輯你的第一個 Angular 元件

元件 是 Angular 應用中的基本構造塊。 它們在螢幕上顯示資料、監聽使用者輸入，並根據這些輸入採取行動。

作為初始應用的一部分，CLI 也會為你建立第一個 Angular 元件。它就是根元件，名叫 app-root。

1. 開啟./src/app/app.component.ts
2. 將 title 屬性從  'my-app' 修改為 'My First Angular App'

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     title = 'My First Angular App!';
   }

    

   瀏覽器將會用修改過的標題自動重新整理。

   很不錯，但還可以更好看。

3. 開啟 ./src/app/app.component.css 檔案，並給這個元件提供一些樣式。 

   h1 {
     color: #369;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 250%;
   }

看起來很不錯！

根據版本的不同，我們在初始化的時候，發現 .css 檔案的字尾名已經使用 styl 字尾名了。

比如說在整理示例的程式碼中，你需要修改的檔名字為 app.component.css，但是在你的檔案系統中，你可能只能知道 app.component.styl 這個檔案。

https://www.cwiki.us/display/AngularZ