Para qué nos sirven los Módulos y Componentes

Domina los módulos y componentes en Angular 4 con una explicación clara y práctica. Entiende cómo estructurar tu app, qué importar y cómo reutilizar funcionalidades entre proyectos. Conoce los elementos clave: ngModule, declarations, imports, providers, bootstrap y el decorador @Component.

¿Qué son los módulos en Angular 4 y por qué importan?

Los módulos son las piezas más grandes en que se divide una aplicación. Toda app de Angular 4 tiene al menos un módulo y puede organizarse en módulos propios según áreas de negocio. Además, Angular ofrece módulos nativos que se importan según necesidad: no se cargan por defecto.

• Módulos nativos disponibles: BrowserModule, HttpModule, FormsModule, ReactiveFormsModule. Se importan solo si se usan.
• Módulos propios: Recursos Humanos, Compras, Soporte. Agrupan vistas y lógica del dominio.
• Módulos de terceros: integración con Google Maps o Firebase cuando se requieran.
• Beneficio clave: reutilización entre proyectos. Con ajustes mínimos (por ejemplo, nombre o divisa), puedes usar el módulo de Compras o Recursos Humanos en otra app y ahorrar meses de trabajo.

¿Cómo ayuda la reutilización de módulos entre empresas?

• Permite clonar funcionalidades probadas con cambios de configuración.
• Mantiene una base común y reduce mantenimiento.
• Acelera el despliegue de nuevas soluciones.

¿Cómo se estructura un ngModule: declarations, imports, providers y bootstrap?

Angular crea por defecto un archivo principal: app.module.ts. Dentro del decorador @NgModule, cuatro arreglos organizan la app.

• declarations: lista de componentes que pertenecen al módulo.
• imports: módulos necesarios para que funcionen los componentes.
• providers: servicios disponibles para inyección de dependencias.
• bootstrap: componente raíz que inicia la app.

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

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

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

¿Qué módulos nativos se importan en imports?

• BrowserModule: funciones básicas para apps en navegador.
• HttpModule: comunicación con servidores remotos.
• FormsModule: formularios basados en template.
• ReactiveFormsModule: formularios reactivos cuando se necesiten.

¿Qué entra en providers y cuándo?

• Servicios compartidos a nivel de módulo.
• Se agregan cuando un servicio debe estar disponible para múltiples componentes.

¿Qué es un componente en Angular 4 y cómo declararlo con @Component?

Un componente representa una vista o sección de la interfaz. Por buena práctica, cada vista es un componente. Debe estar atado a un módulo para funcionar y se compone de un archivo .ts, un template en HTML (preferentemente externo) y estilos en CSS.

• Claves del decorador @Component: selector (etiqueta que Angular reconoce) y templateUrl o template (mejor externo). Opcionalmente styleUrls.
• La clase se exporta para poder declararla en el módulo.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Lógica del componente.
}

¿Cómo organizar vistas: home, contacto, about, redes sociales?

• Crea un componente por vista: Home, Contacto, About Us, Redes sociales.
• Decláralos todos en declarations del módulo correspondiente.
• Mantén responsabilidades claras por vista.

¿Qué buenas prácticas aplicar al template y estilos?

• Usar templateUrl con archivo HTML externo.
• Definir styleUrls para estilos por componente.
• Mantener el componente ligero y enfocado en su vista.

¿Listo para llevarlo a la práctica? Cuéntame qué módulo construirías primero y qué vistas compondrían tu solución.