Notas de aprendizaje angular 1: construcción de proyectos y creación de módulos

1. Introducción

Angular es uno de los tres marcos principales y es el marco más antiguo y popular. Es un marco pesado escrito con HTML, CSS y TypeScript, y está diseñado para el desarrollo de aplicaciones a gran escala. Las aplicaciones cliente desarrolladas con Angular son altamente modulares. Angular proporciona la herramienta cli. Los componentes y módulos se pueden crear utilizando la línea de comando proporcionada por la herramienta cli. Angular es bastante bueno en la gestión del estado y puede compartir datos fácilmente entre componentes.

2. Arquitectura angular

(1) Módulo

Las aplicaciones angulares se componen de módulos. El módulo aquí es ngModel, que es una forma de organizar la estructura del código en Angular. Una aplicación Angular tiene al menos un ngModel, llamado módulo raíz. El módulo raíz se utiliza durante el inicio de la aplicación Angular. En Angular, ESModel y ngModel se utilizan al mismo tiempo. ESModel se basa en archivos y un ngModel puede estar compuesto por varios archivos. ngModel es una clase decorada por NgModel.

(2) Componentes

Los componentes se utilizan para describir interfaces de usuario e incluyen tres partes: clase de componente (lógica de interfaz), plantilla de componente (HTML) y estilo de componente (estilo: css menos scss).
Hay al menos un componente raíz en Angular que se utiliza para iniciar el proyecto. Una clase de componente es una clase decorada con el decorador de componentes. Los componentes deben pertenecer a un ngModel, y ngModel proporciona el contexto de tiempo de compilación para el componente. Un mismo componente no puede pertenecer a dos módulos. Si otros módulos quieren utilizar este componente, deben importar el módulo actual.

(3) Servicio

Los servicios se utilizan para colocar datos o lógica que se pueden compartir entre múltiples componentes. Los servicios se utilizan para desacoplar el código de las clases de componentes. Los servicios son clases decoradas con el decorador Injectable.
Los servicios en Angular están diseñados como singletons, que también es la base para compartir datos entre componentes.
Un servicio es una clase. Cuando se utiliza una clase de servicio, de acuerdo con la lógica anterior, es necesario crear new Service()un objeto de instancia de la clase para usar la clase. Sin embargo, los servicios y los componentes están muy separados y los parámetros del servicio pueden ser modificado, por lo que cuando se usan clases de servicio, newlas palabras clave no se pueden usar para crear instancias de clases de servicio.
De hecho, el sistema de inyección de dependencia integrado de Angular creará automáticamente objetos de instancia de servicio para nosotros.
Para usar un servicio en un componente, solo necesita pasar parámetros formales en el constructor y decirle a Angular qué servicio necesita introducir a través del tipo.

import {
    
     AppService } from "./AppService"

export class AppComponent {
    
    
  constructor (
  	private appService: AppService
  ) {
    
    }
}

privatesignificado:

appService se utiliza como propiedad del componente actual;
appService solo se puede utilizar en clases de componentes, no en plantillas de componentes.

3. Utilice AngularCLI para crear un proyecto Angular

Haga clic para ir al sitio web oficial de AngularCLI

(1) Crear

Comando de instalación:cnpm i @angular/cli
Crear proyecto:ng new angular-base --minimal --inline-template false
Lista de sufijos de ng nuevo

sufijo	abreviatura	significado	tipo de datos	valor por defecto
–skip-git		Saltar la inicialización del repositorio de git	booleano	FALSO
-mínimo		Cree un proyecto simplificado sin pruebas unitarias	booleano	FALSO
–saltar-instalar		Saltar instalación del módulo	booleano	FALSO
–plantilla en línea	-t	En el estado mínimo, los archivos html y ts están en un solo archivo. Este comando puede extraer el archivo html del archivo ts.	booleano
–estilo en línea	-s	Extraer archivos de estilo de archivos de clase	booleano
-prefijo	-pag	Modificar el prefijo de los componentes creados por angular-cli	cadena	aplicación

(2) Proyecto de construcción

Después de inicializar el proyecto, el comando para ejecutar el proyecto se inicializa en package.json, es decir, ng servido
Insertar descripción de la imagen aquí
ng servido tiene varios nombres de sufijo.

sufijo	significado
-abierto	Una vez creada la aplicación, ábrala en el navegador.
–hmr	Habilitar actualización en caliente
–opr.	Cambiar el puerto de ejecución de la aplicación

(3) Análisis del archivo de inicialización al construir el proyecto.

principal.ts

// Angular应用程序的启动在不同平台上是不一样的
// 在浏览器中启动需要引入platformBrowserDynamic，该方法返回平台实例对象
import {
    
     platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 引入根模块 用于启动应用程序
import {
    
     AppModule } from './app/app.module';

// 启动应用程序
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));

aplicación/app.module.ts

// ngModule是Angular的模块装饰器
import {
    
     NgModule } from '@angular/core';
// BrowserModule是浏览器解析的模块
// CommonModule提供各种服务和指令，比如NgIf、NgFor等,它是一个通用模块，可以在任何平台上使用
// BrowserModule导入了CommonModule，又重新导出了CommonModule，所以在浏览器中使用CommonModule时，只需要导入BrowserModule
import {
    
     BrowserModule } from '@angular/platform-browser';
// 引入根组件
import {
    
     AppComponent } from './app.component';

// 使用@ngModule装饰器来定义一个模块，
// @ngModule装饰器接受一个元数据对象
@NgModule({
    
    
    // 声明当前模块拥有哪些组件
  declarations: [
    AppComponent
  ],
    // 声明当前模块依赖哪些模块
  imports: [
    BrowserModule
  ],
    // 声明当前模块拥有哪些服务，这些服务只能在当前组件中使用
  providers: [],
    // 可引导组件，Angular会在引导过程中把它加载到DOM中
  bootstrap: [AppComponent]
})

export class AppModule {
    
     }

aplicación/app.component.ts

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

@Component({
    
    
  // 指定组件的使用方法
    // app-root => <app-root></app-root>
    // [app-root] => <div app-root></div>
    // .app-root => <div class="app-root"></div>
  selector: 'app-root',
  // 当前组件对应模版
  // tempalte/templateUrl
  templateUrl: './app.component.html',
  // 组件样式文件
  // styles/styleUrls
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
    
  title = 'angular-base';
}

4.index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularBase</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <!-- 通过标记的形式调用了app-root-->
  <!--启动模块下边的启动组件的名字-->
  <app-root></app-root>
</body>
</html>

4. Módulos compartidos

Los módulos compartidos son componentes o lógica que deben compartirse a nivel de módulo en aplicaciones Angular.

Crear módulo compartido ng g m sharedg->generar m->módulo
La ventaja de crear un componente de módulo compartido ng g c shared/components/Layoutc->componente
y agregar la ruta es que el componente se introducirá automáticamente en el módulo.
Exportar archivos compartidos. Los componentes compartidos deben exportarse en el módulo para que los módulos que dependen del módulo puedan utilizar los componentes compartidos.

Usar módulos compartidos en el componente raíz

Introduzca el módulo en app.module.ts y declare el módulo

import {
      
       SharedModule } from './shared/shared.module';
//--------------------------------------------------------------
// ngModule内：
imports: [BrowserModule, SharedModule],

Utilice el diseño de la aplicación en app.component.html usando el formulario de marcado

<div>app-root</div>
<app-layout></app-layout>