[Angular] Startup process and structural analysis

First, the structure of the Angular project


Open the built project with vscode:


e2e: end-to-end testing

node_modules: third-party module library

src: all files of the project exist here

      -app: components and app.modules.ts definitions and modules; 
      -assets: static resources 
      -environments: contains environment files prepared for the project; 
      -index.html: main page 
      -main.ts: the main entry of the application; 
      -polyfill. ts: populate the library, standardize different points; 
      -styles.css: perform global styles 
      -test.ts: entry point for unit testing; 
      -tsconfig.app.json: Configuration file for the TypeScript editor; 
      -tyconfig.spec. json: same as above;

.angular-cli.json: Configuration file for Angular CLI

.editorconfig: Editor simple configuration file

.gitignore: The configuration file for Git

Karma.conf.js: Karma's unit test configuration

package.json: npm configuration file, which contains many commands

protractor.conf.js: End-to-end test configuration file for Protractor, used when running e2e

tsconfig.json: Configuration for the TypeScript compiler




Second, the startup process of Angular:


1. Find the startup loading page (index.html) and startup loading script (main.ts) according to the .angular-cli.json file


2. According to the main.ts script, find the starting point of the application (AppModule)


3. Find the main component of the module (AppComoinents) according to app.module.ts


4.根据app.component.ts 编写页面内容



5.packge.json里面有启动web服务器等的命令



6.在地址栏输入http://localhost:4200/


启动成功!

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324809096&siteId=291194637