Desarrollo angular - Introducción al proyecto angular (03)

I. Resumen

• Introducción al directorio de proyectos de Angular
• Cómo se inicia el programa Angular

Introducción al directorio de dos proyectos de Angular

2.1 Directorio de proyectos

2.2 Descripción de la estructura del directorio

archivo de configuración del espacio de trabajo

• node_modules: directorio donde se almacenan los paquetes dependientes de terceros
• src: directorio del código fuente de la aplicación
• angular-cli.json: el archivo de configuración de la herramienta de línea de comandos de Angular, que puede modificarse más adelante para introducir otros paquetes de terceros, como jquery
• package.json: este es un archivo de configuración de la herramienta npm estándar, que enumera los paquetes de dependencia de terceros utilizados por la aplicación. De hecho, cuando estábamos en un nuevo proyecto, esperábamos medio día para descargar paquetes de dependencia de terceros. Una vez completada la descarga, se colocará en el directorio node_modules y podremos modificar este archivo más adelante.
• LÉAME.md: documentación
• tsconfig.app.json: configuración del compilador de TypeScript, este archivo se modificará cuando se agreguen dependencias de terceros
• tsconfig.json: el archivo raíz y las opciones de compilación utilizadas para compilar este proyecto se especifican en el archivo
• tsconfig.spec.json: configuración de TypeScript utilizada al probar la biblioteca

Archivo de proyecto de aplicación (src)

• directorio de la aplicación: contiene los componentes y módulos de la aplicación, el código que queremos escribir está en este directorio
• directorio de activos: directorio de recursos, almacenamiento de recursos estáticos, como imágenes, css, js, etc.
• index.html: El html raíz de toda la aplicación, el programa comienza a visitar esta página
• main.ts: el punto de entrada de todo el proyecto, Angular inicia el proyecto a través de este archivo
• styles.less: principalmente poner algunos estilos globales

archivo de configuración del componente ( SRC/APP/archivo)

• app/app.component.ts: define la lógica del componente raíz de la aplicación, denominadoAppComponent
• app/app.component.html: define la plantilla HTML AppComponentasociada
• app/app.component.css: define la plantilla HTML AppComponentasociada
• app/app.component.css: AppComponentdefine
• app/app.component.spec.ts: AppComponentdefine
• app/app.module.ts: define el módulo raíz AppModulellamado , que le dice a Angular cómo ensamblar la aplicación
• app/app-routing.module.ts: módulo de enrutamiento angular

Cómo iniciar tres programas Angular

3.1 Diagrama esquemático del proceso de puesta en marcha

3.3 Descripción del proceso de inicio

1-La aplicación angular primero irá al archivo de configuración angular-cli.json para encontrar las páginas y los scripts que se cargarán cuando se inicie

{
  "$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",
          },
  }
}

Descripción: el valor predeterminado es cargar index.html y main.ts

2- Luego vaya a main.ts para encontrar el módulo principal especificado por la declaración, el módulo principal predeterminado es app.module

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

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


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

3- Luego vaya a app.module para encontrar el componente principal especificado, el componente principal predeterminado es 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- Luego, vaya a app.component para encontrar el selector, la plantilla y el estilo especificados, 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- Finalmente, renderice el componente en el selector en index.html

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

Cuatro referencias

• TypeScript-tsconfig.json
• Arreglo de TypeScript angular
• Angular - espacio de trabajo y estructura del proyecto
• El proceso de inicio de CSDN-Angular