Tour of Heroes Angular 2 — Parte 1
En el artículo anterior, hablé de cómo iniciar Angular 2 con TypeScript mediante un ejemplo sencillo, en este artículo mostraré los fundamentos básicos de Angular mediante este proyecto que se basa en gestionar una agencia de empleo de Héroes, lo que vamos a construir tendrá muchas de las características que se espera encontrar en una aplicación estándar, impulsado por los datos mediante la adquisición, lista de héroes, edición de los detalles de un héroe seleccionado y también navegar sobre las diferentes vistas de los datos que tiene cada héroe entre otros.
Vamos a aprender lo suficiente sobre el núcleo de Angular para empezar y ganar la confianza necesaria de que Angular puede hacer lo que nosotros deseamos que haga. Estaremos cubriendo mucho terreno a un nivel introductorio, y veremos varios capítulos para poder investigarlos con mayor profundidad.
Para iniciar esta proyecto necesitamos este artículo Primeros pasos en Angular 2 usando TypeScript ya que usaremos toda esta base para poder construir nuestro proyecto.
Una ves que tengamos esta estructura.
Iniciamos nuestro proyecto con npm start en nuestro terminal para ver los cambios y observar nuestro servidor en un navegador, para mantener nuestra aplicación en ejecución.
Mostrar nuestro héroe
Queremos mostrar datos de nuestro héroe en la aplicación. Vamos a añadir dos propiedades a nuestra AppComponent de app.component.ts, una propiedad title para el nombre de la aplicación y una propiedad hero para el nombre del héroe .
export class AppComponent {
title ='Tour of Heroes';
hero ='Windstorm';
}También actualizamos la plantilla @Component con enlace de datos con nuevas propiedades.
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'Vamos a nuestro navegador y se actualiza automáticamente el título y el héroe.
Objeto héroe
Hasta el momento nuestro héroe es solo un nombre, necesitamos más propiedades para nuestro héroe. Creamos una clase Hero con id y name como propiedades debajo de import.
export class Hero {
id: number;
name: string;
}Ahora que tenemos nuestra clase Hero, tenemos que refactorizar nuestros componente hero en AppComponent.
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'indstorm'
};Luego actualizamos nuestra plantilla para hacer referencia al héroe de la propiedad name.
template: 'h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'Cadenas de la plantilla multilínea
Queremos ver todas las propiedades de nuestro héroe. Vamos a añadir un<div>para la propiedad id y otro <div>para la propiedad name.
Edición de nuestro héroe
Queremos ser capaces de editar el nombre del héroe en un cuadro de texto y ver los cambios en nuestro <h2> del navegador , para eso usamos ngModel.
Al unir todo esto no quedaría de la siguiente manera.
La unión de dos vías
Tenemos la intención de mostrar el nombre del héroe en el <input>, cambiarlo, y ver esos cambios dondequiera que se unen a nombre del héroe. En resumen, queremos que el enlace de datos bidireccionales.
Antes de poder utilizar el enlace de datos bidireccionales como entradas de formulario , necesitamos importar el paquete FormsModule en nuestro módulo de angular. Añadimos NgModule del decorador de matriz imports . Esta matriz contiene la lista de módulos externos utilizados por nuestra aplicación. Ahora hemos incluido el paquete que incluye formas de ngModel.
para ello utilizamos ngModel en nuestro template.
<input [(ngModel)]="hero.name" placeholder="name">Creación de héroes
Vamos a crear una serie de diez héroes en la parte inferior de la clase Hero.
Luego creamos una propiedad pública en Appcomponent para exponer los héroes en la unión.
Viendo los héroes en una plantilla
Nuestro componente tiene héroes. Vamos a crear una lista desordenada en nuestra plantilla para mostrarlos. Insertaremos el siguiente fragmento de HTML, el título y los detalles de héroe en template.
Listado héroes con ngFor
Queremos enlazar la matriz de héroes a nuestro componente de la plantilla, iterar sobre ellos, y mostrarlos de forma individual. Vamos a necesitar algo de ayuda de Angular para hacer esto.
En primer lugar modificar la <li>etiqueta mediante la adición de la directiva integrada *ngFor.
<li *ngFor=”let hero of heroes”>El ( *) prefijo que ngFor indica que el elemento <li> y sus hijos constituyen una plantilla maestra.
Ahora insertamos algunos contenidos entre las etiquetas <li> que utiliza la variable hero de la plantilla para mostrar las propiedades del héroe.
<li *ngFor=”let hero of heroes”>
<span class=”badge”>{{hero.id}}</span> {{hero.name}}
</li>El estilo de nuestros héroes
Agregamos lo siguiente en styles.css para la lista de héroes.
Eso es un montón de estilos! Podemos ponerlos en línea, como se muestra aquí. Cuando asignamos estilos a un componente que están en el ámbito de ese componente específico. Nuestros estilos sólo se aplicarán a nuestra AppComponent y no “fuga” al exterior del HTML.
Selección de un héroe
Tenemos una lista de héroes y tenemos un solo héroe que aparece en nuestra aplicación. La lista y el único héroe no están conectados de ninguna manera. Queremos que al seleccionar un héroe de nuestra lista, el héroe seleccionado aparecerá en la vista de detalles. Este patrón de interfaz de usuario es ampliamente conocido como “maestro-detalle”. En nuestro caso, el maestro es la lista de héroes y el detalle es el héroe seleccionado.
Vamos a conectar el maestro al detalle a través de un selectedHero propiedad del componente unido a un evento click con un estilo de selección.
Modificamos el <li>insertando un evento de unión de angular, a su evento clic.
Ahora agregamos un método onSelect en AppComponent que establece la propiedad selectedHero a hero donde el usuario ha hecho clic.
selectedHero: Hero;onSelect(hero: Hero) { this.selectedHero = hero; }
Por consiguiente arreglamos la plantilla para unir la nueva propiedad selectedHero.
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]=”selectedHero.name” placeholder=”name”/>
</div>Ocultar el vacío con detalle ngIf
Cuando cargamos nuestra aplicación para ver lista de héroes, si un héroe no está seleccionado. El selectedHeroes aparece como indefinido. Es por eso que vemos el siguiente error en la consola de nuestro navegador:
EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]Recordemos que estamos mostrando selectedHero.name en la plantilla. Esta propiedad nombre no existe, porque selectedHero en sí no está definido.
Vamos a abordar este problema, manteniendo el detalle héroe del DOM hasta que haya un héroe seleccionado.
Hemos terminado el contenido HTML a partir del detalle héroe de nuestra plantilla con un <div>. A continuación, añadimos la Directiva ngIf para incorporar y establecer en la propiedad selectedHero de nuestro componente. Y con esto solucionamos dicho problema.
Al juntar todo el código, nos quedaría de la siguiente manera:
A continuación vamos a nuestro navegador para ver dichos cambios.
Y bueno, hasta aquí llegamos con este artículo que espero les sea de utilidad. En el próximo artículo continuaremos con la finalización de nuestro proyecto :) . Puedes revisar mis otros post
Si te gustó el post, puedes recomendarlo y compartir.
