¿Cómo comenzar con Angular?

Angular es un framework poderoso ideal para aplicaciones grandes gracias a su arquitectura avanzada. Aunque ahora trabajaremos con un demo pequeño, es útil imaginar que Angular será la opción predilecta para escalar nuestra aplicación. Vamos a replicar una pequeña demo similar a la realizada con React en Sandbox, ahora implementada con Angular.

¿Cómo configurar un nuevo proyecto?

• Crear un nuevo Sandbox Angular: Volvemos a Home & Code Sandbox y seleccionamos Angular para un nuevo entorno de desarrollo.
• Explorar dependencias: Al abrir el package.json, notamos múltiples dependencias que comienzan con Angular, junto con herramientas como RxJS. Estas hacen parte del mismo framework pese a estar divididas para manejos individuales.
• Interfaz y componentes: En index.html, encontramos la etiqueta <ap-root>, específica de Angular. Este marcador integra los componentes compilados con técnicas como Angular ID y el DOM incremental, al tiempo que evita que los usuarios vean etiquetas inexistentes en HTML al compilar.

Configuración del componente principal

En Angular, los módulos encapsulan componentes y servicios. Nos concentraremos inicialmente en el componente o el módulo de aplicación (app.module.ts). A través de main.ts, proyectamos nuestro primer módulo utilizando platformBrowserDynamic.

¿Cómo manejar selectores y plantillas?

• Manipulación del selector: En el app.component, el selector app-root inserta el componente en nuestros templates Angular.
• Plantillas en Angular: Las plantillas HTML pueden escribirse directamente en el atributo template o referidas a un archivo HTML externo usando templateUrl.

fullscreen
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

¿Cómo iniciar el marcado de nuestra aplicación de películas?

Vamos a diseñar un componente básico que incluya la plantilla directamente. Definiremos un título y un formulario que exhibe las películas. Aunque al inicio usemos un formulario estático, más adelante emplearemos estructuras dinámicas.

• HTML para componente inicial:

fullscreen
<h2>{{ title }}</h2>
<form>
  <h3>Avengers</h3>
  <button type="button">-</button>
  <span>0</span>
  <button type="button">+</button>
</form>

¿Cómo hacer dinámico nuestro template?

Gestión de datos en TypeScript

Debemos modificar app.component.ts para que variables y estructuras reflejen nuestros datos dinámicamente. Esto implica tipeo de datos gracias a TypeScript.

• Título dinámico: Cambiaremos el title de estático a variable referenciada.
• Array de películas: Definimos un array movies con objetos que contienen name y available.

fullscreen
export class AppComponent {
  title: string = 'Películas';
  movies: { name: string; available: number; }[] = [
    { name: 'Avengers', available: 5 },
    { name: 'Terminator', available: 3 }
  ];
}

Incorporando TypeScript para validaciones estrictas

Para aprovechar las características de TypeScript, definimos un tipo personalizado Movie para manejar las propiedades de nuestros objetos de película de manera clara y tipada.

fullscreen
type Movie = {
  name: string;
  available: number;
  quantity: number;
};

export class AppComponent {
  movies: Movie[] = [
    { name: 'Avengers', available: 5, quantity: 0 },
    { name: 'Terminator', available: 3, quantity: 0 }
  ];
}

¿Cómo iterar componentes de películas?

Utilizamos un atributo especial en Angular, ngFor, para iterar dentro de nuestros elementos array, creando plantillas de películas dinámicamente.

fullscreen
<div *ngFor="let movie of movies">
  <h3>{{ movie.name }}</h3>
  <button type="button" (click)="removeMovieQuantity(movie)">-</button>
  <span>{{ movie.quantity }}</span>
  <button type="button" (click)="addMovieQuantity(movie)">+</button>
</div>

Métodos para manipulación de cantidad

Desarrollaremos métodos específicos en app.component.ts permitiendo gestionar dinámicamente la propiedad quantity al interactuar con botones.

fullscreen
addMovieQuantity(movie: Movie): void {
  const movieIndex = this.movies.findIndex(m => m.name === movie.name);
  this.movies[movieIndex].quantity += 1;
}

removeMovieQuantity(movie: Movie): void {
  const movieIndex = this.movies.findIndex(m => m.name === movie.name);
  this.movies[movieIndex].quantity -= 1;
}

Desafío: Habilitar y deshabilitar botones

Te retamos a añadir atributos dinámicos que deshabiliten:

• El botón de “menos” si movie.quantity es igual a cero.
• El botón de “más” si movie.quantity es igual a movie.available.

Para lograrlo, sería beneficioso aplicar atributos envueltos entre corchetes angulares para indicar dependencias lógicas en los botones.

¡Ánimo! Continúa explorando y dominando Angular, preparando el camino para tu éxito como desarrollador web. Con cada desafío, te acercas más a ser un experto en la creación de aplicaciones escalables y dinámicas.