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?文件，并給這個組件提供一些樣式。?
   

   h2?{
   ??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