Para qué nos sirven los Módulos y Componentes

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:10

Para qué nos sirven los Módulos y Componentes

Curso de Angular 4

Clase 9 de 80

Clase 9 / 80

Recursos

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.
}