重拾Angular（一）Angular CLI

原文連接

介紹

Angular CLI 是 Angular 提供的一個命令行工具，能夠幫助咱們來快速初始化、開發、測試、打包（可能不只限於此四個方面）Angular應用。

獨立官網地址：https://cli.angular.io/

安裝

npm install -g @angular/cli

更新

若是要把Angular Cli更新的到一個新的版本，須要更新兩個地方：全局、項目

全局

npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

項目

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

我當前的版本

先明確下版本

~ $ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.8
Node: 8.11.1
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.1
typescript                   2.7.2

ng new

做用：建立一個已被初始化的Angular應用

命令選項

參數	說明
--collection -c	指定工程模板屬於高階操做，暫不知道如何使用
--directory	指定新項目建立的目錄名
--dryRun -d	不生成實際文件只是讓你看下哪些文件將會生成
--force -f	強制覆蓋文件默認狀況下若是文件已經存在建立過程爲中斷
--inline-style -s	指定使用行內樣式
--inline-template -t	指定使用行內模板
--new-project-root	指定新項目建立的路徑
--prefix -p	指定selector前綴
--routing	生成時自動包含路由模塊
--skip-git -g	不生成初始化git倉庫
--skip-install	不安裝依賴
--skip-tests -S	不建立測試文件
--style	默認值css,可選值sass、less
--verbose -v	顯示詳細運行日誌試了下彷佛加不加沒什麼區別
--view-encapsulation	指定視圖的封裝模式

默認狀況下組件@Component是這樣的：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

若是，使用了-s、-t後，是這樣子的：

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})

若是，使用了-p zx後，是這樣子的：

@Component({
  selector: 'zx-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

ng generate

代碼生成神器，能會是開發過程當中，使用最頻繁的一個命令

常規用法

ng generate component <name> [options]：生成一個組件
ng generate module <name> [options]：生成一個模塊
ng generate directive <name> [options]：生成一個指令
ng generate class <name> [options]：生成一個類
ng generate guard <name> [options]：生成一個守衛
ng generate interface <name> [options]：生成一個接口
ng generate enum <name> [options]：生成一個枚舉
ng generate pipe <name> [options]：生成一個管道
ng generate service <name> [options]：生成一個服務

快捷用法

ng g c <name> [options]：生成一個組件
ng g m <name> [options]：生成一個模塊
ng g d <name> [options]：生成一個指令
ng g cl <name> [options]：生成一個類
ng g g <name> [options]：生成一個守衛
ng g i <name> [options]：生成一個接口
ng g e <name> [options]：生成一個枚舉
ng g p <name> [options]：生成一個管道
ng g s <name> [options]：生成一個服務

option其餘大同小異，接下來就來羅列一下，備查

component-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--project：項目名稱
--inline-style (alias: -s)：使用行內有樣式
--inline-template (alias: -t)：使用行內模板
--view-encapsulation (alias: -v)：視圖的封裝模式，ViewEncapsulation
--change-detection (alias: -c)：指定變化檢查策略，ChangeDetectionStrategy
--prefix (alias: -p)：指定組件指令選擇器前綴
--styleext：指定組件樣式文件名後綴，暫不清楚意義何在
--spec：是否生成單元測試文件，默認true,可選false
--flat：不生成獨立目錄，直接生成在src/app下
--skip-import：不會自動import到模塊
--selector：指定指令選擇器
--module (alias: -m)：在哪一個module中聲明(import)
--export：組件導入的模塊，是否export組件

module-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--project：項目名稱
--routing：生成的時候包含routing
--routing-scope：routing的組用於
--spec：是否生成單元測試文件，默認true,可選false
--flat：不生成獨立目錄，直接生成在src/app下
--module (alias: -m)：在哪一個module中聲明(import)

directive-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--project：項目名稱
--prefix (alias: -p)：指定指令選擇器前綴
--spec：是否生成單元測試文件，默認true,可選false
--skip-import：不會自動import到模塊
--selector：指定指令選擇器
--flat：不生成獨立目錄，直接生成在src/app下
--module (alias: -m)：在哪一個module中聲明(import)
--export：組件導入的模塊，是否export組件

class-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--project：項目名稱
--spec：是否生成單元測試文件，默認true,可選false
--type：指定class文件類型，name.type.ts

guard-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--spec：是否生成單元測試文件，默認true,可選false
--flat：不生成獨立目錄，直接生成在src/app下
--module (alias: -m)：在哪一個module中聲明(import)
--project：項目名稱

interface-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--project：項目名稱
--prefix：前綴，文件name.ts,直接接口名稱是prefixName

enum-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--project：項目名稱

pipe-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--project：項目名稱
--flat：不生成獨立目錄，直接生成在src/app下
--spec：是否生成單元測試文件，默認true,可選false
--skip-import：不會自動import到模塊
--module (alias: -m)：在哪一個module中聲明(import)
--export：組件導入的模塊，是否export組件

service-選項

--dry-run (alias: -d)：不生成實際文件
--force (alias: -f)：強制覆蓋文件
--project：項目名稱
--flat：不生成獨立目錄，直接生成在src/app下
--spec：是否生成單元測試文件，默認true,可選false

ng serve

做用：構建應用，並本地web開發服務器

ng serve [options]

經常使用的options:

--open (alias: -o)：直接在瀏覽器中打開
--aot：使用AOT編譯
--prod：按照生產環境配置啓動

其餘參見ng serve --help

其餘命令

ng build
ng lint
ng test
ng e2e
ng get/ng set
ng doc
ng xi18n
ng update

總結

因爲精力有限，，得先往下學習Angular的其餘部分了。

在瞭解Angular CLI的過程當中，也有零零碎碎的瞭解到關於Angular相關的一些小知識點。