Header Ads Widget

Ticker

6/recent/ticker-posts

Módulos angulares 10

 Aprendamos ahora sobre los módulos de Angular 10 con un ejemplo.

Los proyectos angulares se adhieren a una arquitectura modular y basada en componentes .

Según Wikipedia :

La programación modular es una técnica de diseño de software que enfatiza la separación de la funcionalidad de un programa en módulos independientes e intercambiables , de modo que cada uno contiene todo lo necesario para ejecutar solo un aspecto de la funcionalidad deseada.

Cómo crear módulos angulares

Angular facilita la creación de módulos al proporcionar * [ NgModules **] (https://angular.io/guide/ngmodules) : *

Un NgModule es una clase de TypeScript decorada con el decorador @NgModule que toma algunos metadatos que hacen lo siguiente:

  • Declara qué componentes, directivas y canalizaciones pertenecen al módulo.
  • Hace que algunos de esos componentes, directivas y canalizaciones sean públicos para que las plantillas de componentes de otros módulos puedan usarlos.
  • Importa otros módulos con los componentes, directivas y tuberías que necesitan los componentes del módulo actual.
  • Proporciona servicios que pueden utilizar los demás componentes de la aplicación.

Tenga en cuenta que los módulos angulares no son módulos de JavaScript .

Cada aplicación Angular tiene al menos un módulo, llamado convencionalmente módulo raíz . Este es el módulo que se inicia para ejecutar la aplicación.

Módulos angulares 10 por ejemplo

Dirígete a tu proyecto Angular 10 en el IDE de Stackblitz. Abra el src/app/app.module.tsarchivo, debería ver el siguiente código:

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

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

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

En la parte superior, tenemos algunas declaraciones de importación. NgModulepertenece al @angular/corepaquete.

Después de las importaciones, configuramos el módulo decorando la AppModuleclase con @[NgModule](https://angular.io/api/core/NgModule)e indicando qué componentes y directivas le pertenecen (en la declarationsmatriz), así como qué otros módulos utiliza (en la importsmatriz). Para obtener más información sobre la estructura de un @[NgModule](https://angular.io/api/core/NgModule), puede leer Bootstrapping en la guía oficial de Angular.

Conclusión

Hay más cosas que debería saber sobre los módulos, pero dejémoslo para después de crear su primera aplicación.

Publicar un comentario

0 Comentarios