Over 10 years we help companies reach their financial and branding goals. Engitech is a values-driven technology agency dedicated.

Gallery

Contacts

411 University St, Seattle, USA

engitech@oceanthemes.net

+1 -800-456-478-23

Desarrollo Web Tecnología

Diferencias entre NgModules y componentes independientes

Angular, un poderoso y popular framework de JavaScript, es conocido por su modularidad y arquitectura basada en componentes. En este blog exploraremos las diferencias entre NgModules y los componentes independientes, para entender cuándo utilizar cada uno y cómo se complementan.

¿Qué son los NgModules?

En Angular, un @NgModule es un decorador que representa un bloque de código enfocado en una funcionalidad o característica específica. Actúa como contenedor de componentes, directivas, servicios y otros elementos, organizando claramente el código de la aplicación. Los módulos también pueden cargarse de forma diferida para mejorar el rendimiento de la aplicación.

Esquema estructura Angular

Lista de metadatos de @NgModule:

  • Declarations: componentes, directivas y pipes.
  • Imports: otros módulos necesarios.
  • Exports: declaraciones reutilizables en otros NgModules.
  • Providers: servicios globales.
  • Bootstrap: el componente raíz de la aplicación.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeComponent } from './home.component';
import { HostDirective } from './host.directive';
import { customPipe } from './custom.pipe';
import { AppService } from './shared/some.service';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [HomeComponent, HostDirective, customPipe],
  imports:[AppRoutingModule, CommonModule],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule {}

En general, los NgModules administran múltiples elementos, aumentando el tamaño de la aplicación y disminuyendo el rendimiento. Además, los componentes declarados son de ámbito local, mientras que los servicios tienden a ser globales.

¿Qué es un Componente Independiente? 🌌

Los componentes independientes, introducidos en Angular 14, ofrecen una manera simplificada de construir aplicaciones. Permiten desarrollar componentes sin depender de NgModules, lo que hace que el desarrollo sea más modular y organizado.

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

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor() { }
  ngOnInit(): void {
  }
}

Para convertir un componente en independiente:

  1. Establecer standalone: true.
  2. Eliminarlo de las declaraciones del módulo.
  3. Usar imports para agregar dependencias.

Los componentes independientes son más ligeros y flexibles que los NgModules, ya que no requieren de un NgModule para ser usados, y pueden cargarse más rápido.

Diferencias Clave entre NgModules y Componentes Independientes 🎌

  • NgModules organizan y administran dependencias, agrupando componentes, directivas y pipes relacionados.
  • Componentes independientes son más flexibles y reutilizables sin necesidad de un NgModule. Son más ligeros y rápidos de cargar en comparación con los NgModules.

En resumen, los componentes independientes son una forma más flexible y ligera de construir aplicaciones Angular.

Estructura del Código 📝

  1. Con NgModules: Al usar @NgModules, la aplicación se inicia haciendo bootstrap del AppModule en el archivo main.ts y se agrega el AppRoutingModule en AppModule para configurar el enrutamiento.
    • Este enfoque incrementa el tamaño del paquete, haciendo que la app cargue más lento.
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular app';
}
  1. Con Componentes Independientes: Con un enfoque independiente, se puede hacer bootstrap directamente del AppComponent en main.ts, y las rutas se añaden mediante provideRoutes(), reduciendo significativamente el tamaño del bundle y el código.
import { Component } from '@angular/core';
import { NgIf } from '@angular/common';
@Component({
  selector: 'my-app',
  standalone:true,
  imports:[NgIf]
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular app';
}

Guards e Interceptores 🛡️

  • Guards: En @NgModules, los guards siguen una arquitectura basada en clases y requieren más código. Desde Angular 14.2 se introdujeron los guards funcionales, más modernos y fáciles de combinar. El guard CanMatch es una excelente alternativa a CanActivate y CanLoad.
  • Interceptors: Los interceptores basados en clases implementan la interfaz HttpInterceptor y se registran en el módulo. Los interceptores funcionales, por otro lado, ofrecen un enfoque más declarativo, permitiendo tareas específicas en solicitudes y respuestas.

Rendering del Lado del Servidor (SSR) 🚀

Angular ha mejorado el SSR desde la versión 4 con Angular Universal. En Angular 16, se introdujo la «hidratación de cliente», un proceso que reutiliza el DOM del servidor en el cliente, mejorando el rendimiento, la experiencia de usuario y el SEO.

  • Versiones 13 a 16: Hasta Angular 15, el SSR se importaba a través del AppModule. En la versión 16, el método provideServerRendering() permite habilitar el SSR, y provideClientHydration() permite habilitar la hidratación de cliente para optimizar el rendimiento reutilizando el DOM.

Conclusión

Angular ha evolucionado con nuevas características y mejoras que facilitan la creación de aplicaciones web poderosas y eficientes.

Si quieres más información sobre los nuevos componentes independientes, echa un vistazo a este blog: Angular University

Si tienes una idea y necesitas ayuda a llevarla a cabo, contacta con nosotros: Sedix

Author

alex

Leave a comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *