Angular開發必備插件一覽表

1. Angular-cli

初始化，開發，構建和維護Angular應用程序的命令行界面工具。

安裝

npm install -g @angular/cli 
複製代碼

命令列表

命令	別名	描述
add		將對外部庫的支持添加到您的項目中。
analytics		配置Angular CLI使用狀況度量的收集。參見https://v8.angular.io/cli/usage-analytics-gathering。
build	b	build
config		在工做空間的angular.json文件中檢索或設置Angular配置值。
deploy	d	爲工做區中的指定項目或默認項目調用部署生成器。
doc	d	在瀏覽器中打開官方的Angular文檔（angular.io），並搜索給定的關鍵字。
e2e	e	生成並提供Angular應用，而後使用Protractor運行端到端測試。
generate	g	根據原理圖生成和/或修改文件。
help		列出可用的命令及其簡短描述。
lint	l	在給定項目文件夾中的Angular應用代碼上運行整理工具。
new	n	建立一個新的工做區和一個初始Angular應用程序。
run		使用項目中定義的可選自定義構建器配置來運行Architect目標。
serve	s	構建並提供您的應用，並根據文件更改進行重建。
test	t	在項目中運行單元測試。
update		更新您的應用程序及其依賴項。參見https://update.angular.io/
version	v	輸出Angular CLI版本。
xi18n		從源代碼中提取i18n消息。

使用

格式 ng commandNameOrAlias requiredArg [ optionalArg ][options]

ng help
ng add --help 
複製代碼

ng new my-first-project
cd my-first-project
ng serve or ng serve --open 
複製代碼

模塊建立

默認建立單模塊

ng new my-first-project
cd my-first-project
ng serve or ng serve --open 
複製代碼

ng generate component heroes  // 建立組件
複製代碼

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component'; //建立的組件，自動導入

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
複製代碼

ng generate service hero //建立service
複製代碼

import { Injectable } from '@angular/core';  //自動產生，並添加spec.ts文件，

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

//service返回mock 
import { Observable, of } from 'rxjs';
getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}
複製代碼

//模塊添加路由
 ng generate module app-routing --flat --module=app
複製代碼

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
複製代碼

建立多模塊

ng new my-workspace --createApplication="false"
cd my-workspace
ng generate application my-first-app
ng generate application my-second-app
ng generate library my-lib  
// 開發人員能夠爲特定領域建立通用解決方案，以適合在不一樣應用程序中重複使用。
// 這樣的解決方案能夠做爲Angular 庫構建，而且這些庫能夠做爲npm軟件包發佈和共享。
複製代碼

my-workspace/
  ...             (workspace-wide config files)
  projects/       (generated applications and libraries)
    my-first-app/ --(an explicitly generated application)
      ...         --(application-specific config)
      e2e/        ----(corresponding e2e tests)
         src/     ----(e2e tests source)
         ...      ----(e2e-specific config)
      src/        --(source and support files for application)
    my-lib/       --(a generated library)
      ...         --(library-specific config)
      src/        --source and support files for library)
複製代碼

2 Angular Console

交互式UI 間接使用Angular cli .

3.Angular Language Service

編輯器會自動檢測到您正在打開Angular文件。而後，它使用Angular Language Service來讀取tsconfig.json文件，查找應用程序中具備的全部模板，而後爲您打開的任何模板提供主要如下服務：

自動補全功能

• 能夠在您鍵入內容時爲您提供上下文可能性和提示，從而能夠縮短開發時間。此示例顯示了插值中的自動完成功能。輸入時，您能夠點擊選項卡完成

錯誤檢查

• 警告您代碼中的錯誤

查看定義和快速定位

• 能夠將鼠標懸停以查看組件，指令，模塊等的來源。而後，您能夠單擊「轉到定義」或按F12鍵直接轉到定義

安裝

• vscoe 左側菜單窗格中的擴展程序圖標從編輯器中打開市場 ,輸入Angular Language Service 搜索，安裝便可。
• webstorm, package.json 中輸入如下代碼，運行npm install or yarn install 便可

devDependencies {
  "@angular/language-service": "^6.0.0"
}
複製代碼

4.Angular Follow Selector

組件標籤訂位組件文件；或者樣式，定位樣式所在文件

5. Angular Files

生成Angular的文件模板（Component、Module、Pipe等等）

6. Angular 8 Snippets

html 、ts 代碼提示功能

7. dev-tool -- Augury

介紹

Augury是最經常使用的開發人員工具擴展，用於調試和分析Google Chrome和Mozilla Firefox瀏覽器中的Angular應用程序。

功能

Augury經過組件樹和可視化調試工具幫助Angular開發人員可視化應用程序。開發人員能夠當即洞悉其應用程序結構，變動檢測和性能特徵。

教程

下方Angury官網有詳細教程，這裏就不班門弄斧了。

Angury官網

參考文獻

Angular cli