A list,

Project introduction

  • Background management system based on angularV7.2.0, ng.ant. Design V7.2.0
  • 【 Online preview 】
  • [source code]

The directory structure

├─ readme.md # ├─ _Mock # Test Data ├─ Angular. json # Default CLI configuration for all projects in workspace ├─ node_modules package ├─ package-lock.json # Lock the version number of the installation package and upload it to Git to ensure that everyone else has consistent dependencies when installing NPM. ├ ─ ─ package. # json configuration for all the projects in the workspace package dependency ├ ─ ─ proxy. Config. The json # agent ├ ─ ─ the SRC │ ├ ─ ─ app │ │ ├ ─ ─ app. The README. Md # introduction document │ │ ├ ─ ─ App.com ponent. Ts │ │ ├ ─ ─ app. The module. The ts │ │ ├ ─ ─ app. The route. The ts # root routing │ │ ├ ─ ─ components # component │ │ ├ ─ ─ service # service │ │ └ ─ ─ Share. Service. Ts # Singletons │ ├─ Assets # Static Resources Files │ ├─ browser # Browser # │ ├─ doc # Document │ │ ├─ Fonts # │ │ ├─ Ali_iconfont # ali icon library │ │ │ └ ─ ─ antdesign # antdesign local icon │ │ ├ ─ ─ image # image resources │ │ ├ ─ ─ the plugin # third-party plug-in │ │ │ └ ─ ─ spread │ │ ├─ Styles # ├─ Environment # ├─ Environment.dev. Ts # ├─ Environment.dev └─ Environment. ├─ Favicon. Ico # ├─ ├─ FcComponents # Platform Component │ ├─ Fccore # Core Module │ ├─ ├─ FCCore # ├ ─ ─ business │ │ ├ ─ ─ directive # instruction │ │ ├ ─ ─ fccore. The module. The ts # core modules │ │ ├ ─ ─ pipe # pipeline │ │ └ ─ ─ service # service │ │ ├ ─ ─ │ ├── Common.service. Ts # ├── Public method │ ├─ Dao.service Log. Service. Ts # print services │ │ ├ ─ ─ the message. The service. The ts # message service │ │ └ ─ ─ the user. The service. The ts # user service │ ├ ─ ─ feature # business code │ ├ ─ ─ └.html # Main HTML file │ ├── Karmap.conf. Js │ ├─ main. Ts # Application of the main point of the AppModule to guide the application of the root AppModule to run in the browser │ ├─ polyfills │ ├─ Shared # module │ ├─ styles.less # Style file │ ├─ test.ts │ ├─ tsconfig.app.json # │ ├─ ├─ ├─ ├─ ├─ └ tsconfig.json # ├─ ├─ tsconfig.json # default for all applications in workspace The TypeScript configuration. Includes TypeScript options and Angular template compiler options. ├─ tsLint. json # Default TSLint configuration for all applications in workspaces. ├─.gitignore # Specifies non-trace files to be ignored by Git. ├─.EditorConfig # Code Editor Setup ├─ tsLint code Check. Reade.md # Introduction documentationCopy the code

Package. Json is introduced

{
  "name": "fc-angular"."version": "0.0.0"."scripts": {
    "ng": "ng"."start": "ng serve --proxy-config proxy.config.json --host=0.0.0.0 --open --port=4200"."build": "ng build"."test": "ng test"."lint": "ng lint"."e2e": "ng e2e"."aot": "ng build --aot"
  },
  "private": true."dependencies": {
    "@angular/animations": "~ 7.2.0"."@angular/common": "~ 7.2.0"."@angular/compiler": "~ 7.2.0"."@angular/core": "~ 7.2.0"."@angular/forms": "~ 7.2.0"."@angular/platform-browser": "~ 7.2.0"."@angular/platform-browser-dynamic": "~ 7.2.0"."@angular/router": "~ 7.2.0"."@antv/g2": "^ 3.5.3." "."@grapecity/spread-excelio": "^ 12.0.10"."@grapecity/spread-sheets": "^ 12.0.10"."@grapecity/spread-sheets-charts": "^ 12.0.10"."@grapecity/spread-sheets-pdf": "^ 12.0.10"."@grapecity/spread-sheets-print": "^ 12.0.10"."@grapecity/spread-sheets-resources-zh": "^ 12.0.10"."ag-grid-community": "^ 20.2.0"."ag-grid-enterprise": "^ 20.2.0"."core-js": "^ 2.5.4." "."hammerjs": "^ mid-atlantic moved." "."mockjs": "^ -beta3 1.0.1"."ng-zorro-antd": "^ 7.2.0"."rxjs": As per paragraph 6.3.3 of ~."tslib": "^ 1.9.0"."zone.js": "~ 0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~ 0.13.0"."@angular/cli": "~ 7.3.1." "."@angular/compiler-cli": "~ 7.2.0"."@angular/language-service": "~ 7.2.0"."@types/jasmine": "~ 2.8.8"."@types/jasminewd2": "~ 2.0.3"."@types/node": "^ 8.9.5"."codelyzer": "~ 4.5.0." "."jasmine-core": "~ 2.99.1"."jasmine-spec-reporter": "~ 2"."karma": "~ 3.1.1." "."karma-chrome-launcher": "~ 2.2.0." "."karma-coverage-istanbul-reporter": "~ 2.0.1." "."karma-jasmine": "~ 1.1.2"."karma-jasmine-html-reporter": "^ 0.2.2"."less": "^ 2.7.3." "."protractor": "~ 5.4.0"."ts-node": "~ 7.0.0." "."tslint": "~ 5.11.0"."typescript": "~ 3.2.2." "}}Copy the code

Ii. Installation items

  • ingit node npm vscodeConfigure a lot of premises, clone code, command as follows:
git clone https://github.com/luohong123/fc-angular.git
npm install
npm start
Copy the code
  • Enter http://localhost:4200 in your browser

Third, develop code

Code specification

  • Follow the instructions on the Angular websiteStyle guideDevelop code

【 Style Guide 】angular.cn/guide/style…

2. Communication between the front and rear ends

  • [using httpClient] angular.cn/guide/http

3. Interface test

  • The Postman tool is recommended

4. Previewing the route multiplexing policy code

5. Lazy route loading

Iv. Code quality inspection

[Code specification]

  1. Each file, such as the HEADER of HTML, CSS, and TS, must have the author’s name, description, author email address, time, modification time, and modifier.
  2. File naming conventions
  3. Ts has a one-line comment for each variable and a comment for each method
  4. Follow the Style Guide link on the Angular website

Tslint Code Checking

Install vscode plug-in

  • Install tslint in vscode and automatically check the code for specification, as shown:

  • Install koroFileHeader in vscode as shown:

  • Install the automatic code beautification tool in vscode, as shown below:

  • Angular version of antDesign code prompts automatically

  • Install open-in-browser In vscode

  • Install CSS Peek in vscode

  • Install Color Info in vscode

  • Install shortcut key plug-in IntelliJ IDEA Keybindings in vscode

Check code specification through AOT packaging

ng build --aot
Copy the code

5. Aot package deployment

  • throughng build --aotCommand to generate the dist file

6. Help with learning

  • [angular official website] angular.cn/docs

  • The typescript website www.typescriptlang.org/index.html 】

  • 【 ng. Ant. The design’s official website 】 ng. Ant. The design/docs/introd…

Seven, thank you

Thank you for taking the time to read my article. Please point out any mistakes. Thank you!