Introducción

Angular es un framework de desarrollo de aplicaciones web basado en TypeScript, desarrollado y mantenido por Google. Su arquitectura está diseñada para facilitar la creación de aplicaciones escalables y mantenibles. En esta sección, exploraremos los componentes clave de la arquitectura de Angular y cómo se integran para formar una aplicación completa.

Componentes Clave de la Arquitectura de Angular

Módulos (Modules)
Componentes (Components)
Plantillas (Templates)
Directivas (Directives)
Servicios (Services)
Inyección de Dependencias (Dependency Injection)
Enrutamiento (Routing)

Módulos (Modules)

Los módulos son contenedores que agrupan componentes, directivas, servicios y otros módulos. El módulo principal de una aplicación Angular es el AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

declarations: Lista de componentes, directivas y pipes que pertenecen a este módulo.
imports: Otros módulos cuyas clases exportadas son necesarias para los componentes de este módulo.
providers: Servicios que el módulo proporciona.
bootstrap: Componente raíz que Angular crea e inserta en el index.html.

Componentes (Components)

Los componentes son las unidades básicas de una aplicación Angular. Cada componente tiene una clase, una plantilla y un conjunto de estilos.

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

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

selector: Nombre del componente que se usa en las plantillas HTML.
templateUrl: Ruta al archivo de plantilla HTML.
styleUrls: Ruta a los archivos de estilos CSS.

Plantillas (Templates)

Las plantillas definen la vista de un componente. Utilizan HTML junto con la sintaxis de Angular para enlazar datos y manejar eventos.

<!-- app.component.html -->
<h1>{{ title }}</h1>
<button (click)="changeTitle()">Change Title</button>

Directivas (Directives)

Las directivas son clases que pueden modificar el DOM. Hay directivas estructurales como *ngIf y *ngFor, y directivas de atributo como ngClass.

<!-- Uso de directiva estructural *ngIf -->
<div *ngIf="isVisible">This is visible</div>

Servicios (Services)

Los servicios son clases que contienen lógica de negocio y se utilizan para compartir datos y funcionalidades entre componentes.

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return ['Data1', 'Data2', 'Data3'];
  }
}

Inyección de Dependencias (Dependency Injection)

Angular utiliza la inyección de dependencias para proporcionar instancias de servicios a los componentes y otros servicios.

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: '<ul><li *ngFor="let item of data">{{ item }}</li></ul>',
})
export class DataComponent implements OnInit {
  data: string[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

Enrutamiento (Routing)

El enrutamiento permite la navegación entre diferentes vistas o componentes en una aplicación Angular.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Resumen

En esta sección, hemos cubierto los componentes clave de la arquitectura de Angular, incluyendo módulos, componentes, plantillas, directivas, servicios, inyección de dependencias y enrutamiento. Estos elementos trabajan juntos para formar una aplicación Angular robusta y escalable. En el próximo módulo, profundizaremos en los componentes de Angular, explorando cómo crearlos y utilizarlos eficazmente.

Arquitectura de Angular

Introducción

Componentes Clave de la Arquitectura de Angular

Módulos (Modules)

Componentes (Components)

Plantillas (Templates)

Directivas (Directives)

Servicios (Services)

Inyección de Dependencias (Dependency Injection)

Enrutamiento (Routing)

Resumen

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas