一.安裝Node.js

官方網址：https://nodejs.org/en/download/

• 在命令列中輸入：node -v 和 npm -v 驗證版本

二.全域性安裝Angular CLI 腳手架工具

• 使用npm命令安裝

 npm install -g @angular/cli 

• 安裝cnpm

• 國內直接裝經常會出問題，所以設定為淘寶映象地址會更好。

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安裝angular/cli失敗的方法

npm uninstall -g @angular/cli  //解除安裝angular/cli /

npm cache clean  //清除快取

cnpm install -g @angular/cli //重新安裝

• 檢測 Angular CLI 是否安裝成功

ng -v  //檢視版本能否正常顯示

三.建立專案

先到cmd裡進入專案所在的目錄，用cd命令進入。

• 新建專案名

ng new angular01  //

• 進入所建目錄啟動服務

cd angular01

cnpm install     //安裝依賴 

ng serve --open  //啟動服務

   也可以進入指定檔案目錄，win7下shift右鍵選擇如圖所示啟動：

四.專案的基本目錄結構

. 
├── README.md 
├── e2e 
│ ├── app.e2e-spec.ts 
│ ├── app.po.ts 
│ └── tsconfig.e2e.json 
├── karma.conf.js 
├── package.json 
├── protractor.conf.js 
├── src //主目錄 
│ ├── app 
│ │ ├── app.component.css 
│ │ ├── app.component.html 
│ │ ├── app.component.spec.ts 
│ │ ├── app.component.ts //元件 
│ │ └── app.module.ts //根模組 
│ ├── assets 
│ ├── environments 
│ │ ├── environment.prod.ts 
│ │ └── environment.ts 
│ ├── favicon.ico 
│ ├── index.html 
│ ├── main.ts 
│ ├── polyfills.ts 
│ ├── styles.css 
│ ├── test.ts 
│ ├── tsconfig.app.json 
│ ├── tsconfig.spec.json 
│ └── typings.d.ts 
├── tsconfig.json 
└── tslint.json

五.補充命令

Angualr CLI提供了許多常用命令供我們選擇：

全寫法比較麻煩，記住簡寫的首字母也可以的，唯一需要記憶的只有cl和c的區別

ng generate class my-new-class              // 新建 class
ng generate component my-new-component      // 新建元件
ng generate directive my-new-directive      // 新建指令
ng generate enum my-new-enum                // 新建列舉
ng generate module my-new-module            // 新建模組
ng generate pipe my-new-pipe                // 新建管道
ng generate service my-new-service          // 新建服務

ng g cl my-new-class        // 新建 class
ng g c my-new-component     // 新建元件
ng g d my-new-directive     // 新建指令
ng g e my-new-enum          // 新建列舉
ng g m my-new-module        // 新建模組
ng g p my-new-pipe          // 新建管道
ng g s my-new-service       // 新建服務