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