Resumen de Angular.

Introducción

Angular es un popular framework de JavaScript de código abierto desarrollado y mantenido por Google. Se utiliza para construir aplicaciones web dinámicas y se basa en TypeScript, una extensión de JavaScript. Angular proporciona una forma estructurada y eficiente de desarrollar aplicaciones de una sola página (SPAs) al separar las responsabilidades y promover componentes reutilizables.

Historia

Angular fue lanzado inicialmente como AngularJS en 2010 por Misko Hevery y Adam Abrons. Ganó considerable popularidad debido a su enfoque declarativo, la vinculación bidireccional de datos y la inyección de dependencias. Sin embargo, AngularJS tenía algunas limitaciones, como problemas de rendimiento y una curva de aprendizaje compleja. Para superar estos desafíos, el equipo de Angular decidió reescribir el framework desde cero, lo que resultó en el lanzamiento de Angular 2 en 2016. Desde entonces, Angular ha evolucionado con actualizaciones regulares y se ha convertido en uno de los frameworks web más utilizados.

Características

1. Componentes y Plantillas

Angular sigue una arquitectura basada en componentes, donde las aplicaciones se construyen utilizando componentes reutilizables. Un componente consta de una clase TypeScript que define el comportamiento del componente y una plantilla HTML asociada que define su estructura. Los componentes encapsulan la funcionalidad y pueden comunicarse entre sí a través de entradas y salidas.

// Ejemplo de un componente simple
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
    <h1>Hola, {{ name }}!</h1>
  `
})
export class HelloComponent {
  name = 'Angular';
}

2. Directivas

Angular proporciona diversas directivas integradas para extender HTML con funcionalidades adicionales. Las directivas te permiten manipular el DOM, controlar la representación y agregar comportamiento a los elementos. Dos tipos comunes de directivas son las directivas estructurales (por ejemplo, ngIf y ngFor) y las directivas de atributo (por ejemplo, ngStyle y ngClass).

<!-- Ejemplo de uso de la directiva ngIf -->
<div *ngIf="isVisible">Contenido visible</div>

3. Vinculación de Datos

Angular ofrece potentes capacidades de vinculación de datos que te permiten sincronizar fácilmente los datos entre el componente y la plantilla. Hay cuatro tipos de vinculación de datos en Angular:

• Interpolación ({{ }}) para la vinculación unidireccional desde el componente a la plantilla.
• Vinculación de propiedades ([ ]) para la vinculación unidireccional desde el componente a la plantilla.
• Vinculación de eventos (( )) para la vinculación unidireccional desde la plantilla al componente.
• Vinculación bidireccional ([( )]) para la vinculación bidireccional entre el componente y la plantilla.

<!-- Ejemplo de uso de interpolación y vinculación de eventos -->
<p>{{ message }}</p>
<button (click)="showAlert()">Haz clic</button>

4. Inyección de Dependencias

Angular tiene un sistema de inyección de dependencias (DI) integrado que simplifica la gestión de las dependencias entre los componentes. La DI te permite declarar las dependencias en el constructor de un componente, y Angular instanciará e inyectará automáticamente las instancias requeridas.

// Ejemplo de uso de la inyección de dependencias
import { Component, Injectable } from '@angular/core';

@Injectable()
export class DataService {
  getData(): string {
    return 'Algunos datos';
  }
}

@Component({
  selector: 'app-example',
  template: `
    <p>{{ data }}</p>
  `,
})
export class ExampleComponent {
  constructor(private dataService: DataService) {}
  
  data: string;

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

5. Enrutamiento

Angular proporciona un potente módulo de enrutamiento que te permite manejar la navegación y crear aplicaciones de una sola página. Con el enrutador de Angular, puedes definir rutas, asociarlas con componentes y navegar entre vistas diferentes.

// Ejemplo de configuración de rutas
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

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

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

Ejemplos

Ejemplo 1: Hola Mundo

Aquí tienes un ejemplo sencillo de un componente Angular que muestra un mensaje "¡Hola, Mundo!":

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

@Component({
  selector: 'app-hello',
  template: `
    <h1>¡Hola, Mundo!</h1>
  `
})
export class HelloComponent { }

Ejemplo 2: Lista de Tareas

En este ejemplo, creamos un componente simple de Lista de Tareas con la capacidad de agregar y eliminar elementos:

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

@Component({
  selector: 'app-todo-list',
  template: `
    <h2>Lista de Tareas</h2>
    <input [(ngModel)]="newItem" placeholder="Nuevo elemento">
    <button (click)="addItem()">Agregar</button>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `
})
export class TodoListComponent {
  newItem: string;
  items: string[] = [];

  addItem() {
    if (this.newItem) {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }
}

Para obtener más información sobre Angular y explorar sus amplias capacidades, visita el sitio web oficial de Angular.