Componente vs Módulo en Angular

1. Módulo en Angular
2. Componentes en Angular
3. Conclusión

Este artículo presentará componentes y módulos en Angular y discutirá sus diferencias.

Módulo en Angular

El módulo es una característica completa de nuestra aplicación.

Por ejemplo, la autenticación de usuario es una característica completa que incluye inicio de sesión, registro y autenticación de usuario (olvidar la contraseña y verificar el correo electrónico). Por lo tanto, la autenticación de usuario es un módulo de nuestra aplicación.

Cuando tenemos un grupo de funcionalidades relacionadas entre sí, como la autenticación de usuarios, el módulo contendrá uno o más componentes, servicios y pips.

Por ejemplo, tenemos tres componentes login, register, y forget a password en la autenticación de usuario. Nuestro servicio será una llamada API en la autenticación de usuarios, y los pips serán ayudantes.

Entonces, combinar estas diferentes funcionalidades que están relacionadas entre sí hace un módulo en nuestra aplicación Angular.

Ahora, creemos una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Luego, abriremos el archivo app.module.ts.

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

import { AppComponent } from "./app.component";

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

Como puede ver en el código anterior, hemos importado NgModule y BrowserModule en nuestro módulo de aplicación. También hemos importado un componente, AppComponent.

Sin embargo, si queremos importar más componentes en nuestros módulos, podemos usar declaraciones para registrar nuestros componentes en nuestro módulo. Si vamos a importar otro módulo, podemos usar imports.

Podemos crear fácilmente nuevos módulos en nuestra aplicación Angular usando el siguiente comando.

# angular
ng generate module user-auth

Este comando creará una nueva carpeta dentro de la carpeta de la aplicación y creará un nuevo módulo, como se muestra a continuación.

Producción:

Componentes en Angular

El componente es una pieza de código creada para una tarea específica.

Por ejemplo, si queremos que los usuarios se registren ellos mismos, podemos crear un nuevo componente, registrar, que permitirá a los usuarios registrarse en nuestra aplicación.

Los componentes se pueden reutilizar dependiendo de sus necesidades donde se pueden reutilizar. Por ejemplo, si queremos usar encabezado y pie de página en todas nuestras páginas web en la aplicación Angular, podemos crear header y footer e importar estos componentes donde queramos utilizarlos.

Un componente consta de 4 archivos:

1. Archivo CSS utilizado para escribir estilos para el componente.
2. Archivo HTML utilizado para escribir el frontend o la vista de nuestro componente.
3. Archivo de especificaciones utilizado para escribir casos de prueba.
4. Archivo de componente en el que escribimos parte lógica de nuestro componente que contiene funciones, llamadas API, etc.

Ahora, creemos una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Luego, abriremos el archivo app.component.ts.

# angular
import { Component } from "@angular/core";

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

Como puede ver en el código anterior, hemos importado un método componente de @angular/core. Ahora, podemos definir selector, templateUrl y styleUrls para nuestro componente utilizando el componente que acabamos de importar.

El selector es una etiqueta utilizada para mostrar el contenido de nuestro componente en nuestra aplicación Angular.

A partir del código anterior, si creamos una etiqueta <app-root></app-root> en nuestro archivo index.html, la aplicación Angular detectará la etiqueta y la reemplazará con el contenido de nuestro componente.

templateUrl se usa para definir la plantilla para nuestro componente. Y styleUrls definirá el archivo CSS para nuestro componente en el que se escriben los estilos.

Podemos crear fácilmente nuevos componentes en nuestra aplicación Angular usando el siguiente comando.

# angular
ng generate component login

Este comando creará 4 nuevos archivos con un nuevo selector para nuestro componente.

Producción:

Conclusión

En este tutorial, aprendimos sobre módulos y componentes en Angular, cómo crear nuevos componentes, comprender sus métodos y de qué están hechos.