Angular Development - Angular Project Introduction (03)

I. Overview

• Angular project directory introduction
• How the Angular program starts

Two Angular project directory introduction

2.1 Project directory

2.2 Directory Structure Description

workspace configuration file

• node_modules : directory where third-party dependent packages are stored
• src: application source code directory
• angular-cli.json: The configuration file of the Angular command-line tool, which may be modified later to introduce some other third-party packages, such as jquery
• package.json: This is a standard npm tool configuration file, which lists the third-party dependency packages used by the application. In fact, when we were in a new project, we waited for half a day to download third-party dependency packages. After the download is complete, it will be placed in the node_modules directory, and we may modify this file later
• README.md: documentation
• tsconfig.app.json: TypeScript compiler configuration, this file will be modified when third-party dependencies are added
• tsconfig.json: The root file and compilation options used to compile this project are specified in the file
• tsconfig.spec.json : TypeScript configuration used when testing the library

Application project file (src)

• app directory: Contains the components and modules of the application, the code we want to write is in this directory
• assets directory: resource directory, storing static resources, such as pictures, css, js, etc.
• index.html: The root html of the entire application, the program starts to visit this page
• main.ts: The entry point of the entire project, Angular starts the project through this file
• styles.less: Mainly put some global styles

component configuration file ( SRC/APP/file)

• app/app.component.ts: Defines the logic for the application's root component, namedAppComponent
• app/app.component.html: defines the HTML template AppComponentassociated
• app/app.component.css: defines the HTML template AppComponentassociated
• app/app.component.css: AppComponentdefines
• app/app.component.spec.ts: AppComponentdefines
• app/app.module.ts: defines the root module AppModulenamed , which tells Angular how to assemble the application
• app/app-routing.module.ts: Angular routing module

How to start three Angular programs

3.1 Schematic diagram of the startup process

3.3 Description of the startup process

1-Angular application will first go to the angular-cli.json configuration file to find the pages and scripts to be loaded when it starts

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
          },
  }
}

Description: The default is to load index.html and main.ts

2- Then go to main.ts to find the main module specified by the declaration, the default main module is app.module

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3- Then go to app.module to find the specified main component, the default main component is app.component

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4- Then go to app.component to find the specified selector, template and style, etc.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'my-app';
}

5- Finally, render the component into the selector in index.html

<!doctype html>
<html lang="en">
<body>
  <app-root></app-root>
</body>
</html>

Four references

• TypeScript-tsconfig.json
• Angular-TypeScript Arrangement
• Angular - workspace and project structure
• The startup process of CSDN-Angular