Conceptos básicos de Angular

Repaso de conceptos básicos de Angular para desarrollar aplicaciones web interactivas.

conceptos-basicos-angular

Angular es un framework JavaScript para desarrollar aplicaciones web dinámicas y interactivas. En este artículo veremos rápidamete los conceptos básicos para aprender cómo funciona. Si tienes experiencia con otros frameworks verás rápidamente las diferencias y similitudes con Angular.

Componentes

La aplicación se puede dividir en componentes. Cada componente consiste en:

  • Una plantilla HTML donde se declara la estructura del componente que se muestra.
  • Un selector que indica el nombre de la etiqueta del componente (<app-ejemplo>).
  • Una clase TypeScript que define el comportamiento del componente.
  • Estilos que se aplicarán a la plantilla.
import { Component } from '@angular/core';
@Component({
selector: 'app-ejemplo',
template: `
<div>
<h1>{{ title }}</h1>
</div>
`,
styles: ['h1 { color: gray; }']
})
export class AppComponent {
title = 'Hola mundo!';
}

Data Binding

Data binding es el concepto de sincronizar la página con el estado de la aplicación. Es decir, consiste en aplicar el valor de un objeto o variable a la pantalla y, en sentido opuesto, trasladar los cambios realizados en la pantalla al estado de la aplicación cuando se interactúa con ella. Hay varios tipos:

  • Mostrar el valor de una variable en la plantilla: <h1>{{ title }}</h1>.
  • Eventos: (event)="handleClick()".
  • Usar una variable como atributo de un elemento HTML (one way binding). Al cambiar el texto del input, no se verá el cambio renderizado: <input [value]="login"> {{login}}.
  • Data binding en las dos direcciones (two way binding): <input [(ngModel)]="nombre"><p>{{ nombre }}</p>.

Directivas

Las directivas en Angular es u concepto que permite extennder los elementos HTML con comportamientos personalizables. Son instrucciones en forma de elementos, atributos o classes CSS que Angular interpreta y usa para manipular el DOM (Document Object Model).

Se pueden clasificar en distintos tipos:

Directivas estructurales

Modifica el DOM para añadir o eliminar elementos:

<div *ngIf="isVisible">El texto es visible</div>
<ul>
<li *ngFor="let elemet of elements">{{ element }}</li>
</ul>

Directivas de atributos

Son directivas que se añaden como propiedad de un elemento del DOM:

<div [ngClass]="{main: true}" [ngStyle]="{color: 'blue'}">

Formularios

Los formularios en Angular permiten manejar datos del usuario mediante plantillas dirigidas (Template-Driven Forms) o formularios reactivos (Reactive Forms). Los formularios reactivos son especialmente útiles porque permiten un control completo sobre la validación y la gestión de datos.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-login',
template: `
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<label for="email">Email:</label>
<input id="email" formControlName="email">
<div *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
Email no válido.
</div>
<label for="password">Password:</label>
<input id="password" type="password" formControlName="password">
<div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
La contraseña es requerida.
</div>
<button type="submit" [disabled]="loginForm.invalid">Iniciar sesión</button>
</form>
`
})
export class LoginComponent {
loginForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', Validators.required),
});
onSubmit() {
console.log(this.loginForm.value);
}
}

Pipes

Las Pipes en Angular transforman los datos antes de que se muestren en la vista. Angular incluye pipes integrados como date, uppercase o currency. También puedes crear pipes personalizados.

Ejemplo de directiva que transforma un texto modificando la primera letra a mayúscula.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
}
}
// Uso en el componente:
@Component({
selector: 'app-example',
template: `<p>{{ 'angular me encanta!' | capitalize }}</p>`
})
export class ExampleComponent {}

Salida: Angular me encanta!.

Servicios y inyección de dependencia

Los servicios en Angular son ideales para gestionar la lógica de negocio y compartir datos entre componentes. La inyección de dependencias permite que Angular gestione la creación y entrega de estos servicios donde se necesiten.

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data: string[] = [];
addItem(item: string) {
this.data.push(item);
}
getItems() {
return this.data;
}
}
// Uso del servicio en un componente:
@Component({
selector: 'app-list',
template: `
<button (click)="addItem()">Agregar item</button>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
`
})
export class ListComponent {
items: string[] = [];
constructor(private dataService: DataService) {}
addItem() {
this.dataService.addItem('Nuevo item');
this.items = this.dataService.getItems();
}
}

Rutas

El módulo de rutas en Angular permite navegar entre componentes mediante URLs. Puedes definir rutas en el archivo app-routing.module.ts.

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 {}
// Uso en un componente:
@Component({
selector: 'app-nav',
template: `
<nav>
<a routerLink="/">Inicio</a>
<a routerLink="/about">Acerca de</a>
</nav>
<router-outlet></router-outlet>
`
})
export class NavComponent {}

Módulos

Los módulos organizan y agrupan funcionalidad relacionada. Cada aplicación Angular tiene al menos un módulo raíz (AppModule), pero puedes crear módulos adicionales para dividir la aplicación en partes más gestionables.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CapitalizePipe } from './capitalize.pipe';
@NgModule({
declarations: [CapitalizePipe],
imports: [CommonModule],
exports: [CapitalizePipe, CommonModule, FormsModule]
})
export class SharedModule {}
// Uso en otro módulo:
import { SharedModule } from './shared/shared.module';
@NgModule({
imports: [SharedModule]
})
export class FeatureModule {}

Resumen

Esta ha sido una guía muy breve y a grandes rasgos de algunos de los conceptos básicos de Angular. Si te ha parecido interesante te propongo que sigas este tutorial interactivo para afianzar y ampliar los conocimientos que hemos expuesto.