Tutorial: Tour of Heroes

El tutorial oficial de la Web de Angular Tour of Heroes repasa los conceptos básicos del funcionamiento de Angular.

La aplicación tiene como fin gestionar una serie de "Heroes" con las siguientes funcionalidades: Mostrar una lista de héroes, editar los datos de un héroe, etc,.

Al finalizar este tutorial deberíamos saber: Usar las directivas de Angular para esconder elementos o mostrar una lista de datos de héroes, usar componentes Web de Angular para mostrar los detalles de un héroe, data binding unidireccional para datos de solo lectura, añadir campos de edición modificables para poner en practica el data binding bidireccional, formatear datos con tuberías (pipes)...

Diseño y funcionamiento de la aplicación

Esta es una animación de como debe quedar nuestra aplicación:

Dashboard

Los dos elementos de arriba son enlaces para ver el dashboard de la imagen o una lista de heroes.

Hero Details

Lista de heroes

Crear entorno de trabajo inicial

ng new angular-tour-of-heroes
cd angular-tour-of-heroes
ng serve --open

Cambiando el título

Editamos el fichero con la clase componente "app.component.ts" y modificamos el valor de la propiedad title:

title = 'Tour of Heroes';

En la plantilla del componente "app.component.html" borramos todo el contenido y lo sustituimos por:

<h1>{{title}}</h1>

Estilos

Para modificar los estilos CSS globales que afectan a toda nuestra aplicación Angular ha generado para el proyecto el fichero "src/styles.css" pero su contenido está vacío, añadimos las siguientes líneas:

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

¿Ahora el título se ve más elegante no?

Nuevo componente editor de heroes

Vamos a crear un componente para trabajar con un héroe concreto.

ng generate component heroes

Hemos creado una ruta para un nuevo componente "src/app/heroes/" y sus ficheros asociados.

Inicialmente el nuevo componente "app/heroes/heroes.component.ts" tendrá el siguiente contenido:

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

@Component define los metadatos del componente con tres propiedades:

  • selector: _ the component's CSS element selector_.
  • templateUrl: Localización de la plantilla HTML del componente.
  • styleUrls: Localización del CSS del componente.

ngOnInit es un hook del ciclo de vida del componente, Angular invoca la función después de crear el componente, es el sitio adecuado para introducir cualquier código o lógica de inicio.

La palabra clave export permite que pueda ser usada en cualquier parte del proyecto.

Añadiendo una propiedad al héroe

Añadimos un atributo a la clase:

hero = "Windstorm";

Borramos el contenido de la plantilla y añadimos:

{{hero}}

Visualizar el nuevo componente HeroesComponent

Añadimos a "src/app/app.component.html":

<h1>{{title}}</h1>
<app-heroes></app-heroes>

Nueva clase "Hero"

Creamos un fichero "src/app/hero.ts":

export class Hero {
  id: number;
  name: string;
}

Importamos la nueva clase en "src/app/heroes/heroes.component.ts":

import { Component, OnInit } from "@angular/core";
import { Hero } from "../hero";

@Component({
  selector: "app-heroes",
  templateUrl: "./heroes.component.html",
  styleUrls: ["./heroes.component.css"]
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: "Windstorm"
  };

  constructor() {}

  ngOnInit() {}
}

La página se visualiza mal porque hemos cambiado la definición de una cadena inicial por un objeto:

Modificamos "heroes.component.html":

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

Enlaces externos