The premise condition

Angular-cli

Develop prerequisites, initialize, develop, build, and maintain command-line interface tools for Angular applications.

The installation

 npm install -g @angular/cli 
Copy the code

Create a project

ng new my-first-project
cd my-first-project
ng serve or ng serve --open 
Copy the code

Add the service

Ng generate service hero // Generate service heroCopy the code

Add the routing

Ng generate module app-routing --flat --module=appCopy the code

Creating multiple modules

ng new my-workspace --createApplication="false"
cdmy-workspace ng generate application my-first-app ng generate application my-second-app ng generate library my-lib // Developers can create generic solutions for specific domains that can be reused across different applications. // Such a solution can be built as Angular libraries that can be distributed and shared as NPM packages.Copy the code
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)
Copy the code

Necessary plug-in

1 Nx Console

The interactive UI uses the Angular CLI indirectly

2.Angular Language Service

The editor automatically detects that you are opening an Angular file.

3.Angular Follow Selector

Component labels locate component files. Or style, locate the file in which the style is located

4. dev-tool — Augury

introduce

Augury is the most commonly used developer tool extension for debugging and analyzing Angular applications in Google Chrome and Mozilla Firefox browsers.

function

Augury helps Angular developers visualize applications through component trees and visual debugging tools. Developers can gain immediate insight into their application architecture, change detection, and performance characteristics.

The tutorial

There is a detailed tutorial on Angury’s website below.

Angury website

5. TSLint

Angular file validation

6. Auto Import

Code association, automatically prompt import

7.Angular Snippets (Version 9)

written by the John Papa

NGRX code generates shortcut keys to improve coding efficiency

8.Angular 8 and TypeScript/HTML VS Code Snippets

Quick generation of Angular HTML and service directives

Windows: Select Ctrl+P and then type: ext install angular2-snippets

Mac: Select ⌘+P and then type: ext install angular2-snippets

9. Angular2 Files

ext install vscode-angular2-files

Angular component, Service UI interface generation

10. angular2-inline

HTML highlight in template form

11.angular2-switcher

Ts, CSS, HTML and other files with the same name switch quickly

ext install angular2-switcher

reference

Angular cli