Angular CLI 建立你的第一個 Angular 示例程序

第一步：安裝 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）選項會自動打開瀏覽器，並訪問 http://localhost:4200/。

若是由於某些緣由，你計算機中的 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/AngularZH/Getting+started