Estás viendo la documentación de Angular

El editor de heroes

Toda historia comienza en algun lugar. Nuestra historia comienza donde termina el Inicio rápido

Ejecuta el ejemplo online para esta parte.

Crea una carpeta llamada tour de los heroes y sigue los pasos del QuickStart(todo: Agregar link)

De forma alternativa, puedes empezar con la descarga de los fuentes del QuickStart

Deberíamos tener la siguiente estructura

angular-tour-of-héroes
|-> src
  |-> app
      |-> app.component.ts
      |-> app.module.ts
  |-> main.ts
  |-> index.html
  |-> styles.css
  |-> systemjs.config.js
  |-> tsconfig.json
|-> node_modules ...
|-> package.json

Manten la app transpilando y ejecutando

Vamos a comenzar con el compilador TypeScript, hacer que observe los cambios y arrancar nuestro servidor. Lo hacemos tipeando

npm start

Este comando ejecuta el compilador en modo observador, inicia el servidor, lanza la aplicación en un navegador, y mantiene la app ejecutandose mientras continuamos la construcción del Tour de los Héroes.

Mostrar nuestro héroe

Queremos mostrar datos de nuestro héroe en nuestra app.

Vamos a agregar dos propiedades a nuestro AppComponent, una propiedad title para el nombre de la aplicación y una propiedad para el héroe (hero) llamado “Windstorm”.

app.component.ts (Clase AppComponent)

export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

Ahora actualizamos nuestra plantilla en el decorador @Component con los enlaces de datos para esas nuevas propiedades.

template: '<h1></h1><h2> details!</h2>'

El navegador debería actualizarse y mostrar nuestro título y nuestro heroe.

Las llaves dobles le dicen a nuestra app que lea la propiedad title y hero del componenente y las muestre. Esta es la forma de “interpolación” de enlace de una sola vía.

El objeto Hero

En este momento nuestro heroe es solo un nombre. Nuestro heroe necesita más propiedades. Es hora de convertir a nuestro hero de una cadena literal a una clase.

Crea una clase Hero con las propiedades id y name. Por ahora pon esto cerca de la parte de arriba de nuestro archivo app.component.ts, justo debajo de la sentencia import.

app.component.ts (clase Hero)

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

Ahora que tenemos nuestra clase Hero, vamos a refactorizar nuestra propiedad hero para que sea de tipo Hero. Luego la inicializamos con un id de 1 y un nombre: “Windstorm”

app.component.ts (propiedad hero)

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

Porque hemos cambiado nuestro heroe de un string a un objeto, debemos actualizar el enlace de datos en el template para referirnos a la propiedad name.

template: '<h1></h1><h2> details!</h2>'

El navegador se actualiza y continua mostrando el nombre de nuestro heroe.

Agregando más html

Mostrar el nombre es bueno, pero queremos ver todas las propiedades de nuestro heroe. Vamos a agregar un <div> para la propiedad id de nuestro heroe, y otro <div> para la propiedad name.

template: '<h1></h1><h2> details!</h2><div><label>id: </label></div><div><label>name: </label></div>'

¡Oh no! nuestro template se está quedando un poco largo. Mejor que nos ocupemos de eso para evitar cometer futuros errores en el template.

Templates con string multilinea

Podríamos usar concatenación de cadenas para hacer el template más leible, pero se pone feo rápido, es más dificil de leer, y es facil cometer errores de escritura. En lugar de eso, aprovechemos la caracteristica de strings de template de ES2015 y TypeScript para ayudarnos a mantener las cosas limpias.

Cambia las comillas en el template por acentos invertidos, y coloca los elementos <h1>, <h2>, y <div> en sus propias líneas.

app.component.ts (template de AppComponent)

template:`
  <h1></h1>
  <h2> details!</h2>
  <div><label>id: </label></div>
  <div><label>name: </label></div>
  `

Editando nuestro heroe

Queremos poder editar el nombre del heroe con un textbox.

Refactoriza el <label> del nombre del heroe, con <label> y <input> como se muestra a continuación

app.component.ts (elemento input)

template:`
  <h1></h1>
  <h2> details!</h2>
  <div><label>id: </label></div>
  <div>
    <label>name: </label>
    <input value="" placeholder="name">
  </div>
  `

Vemos en el navegador que el nombre del heroe aparece en la textbox <input>. Pero algo no se ve bien. Cuando cambiamos el nombre, notamos que nuestro cambio no se ve reflejado en el <h2>. No vamos a obtener el comportamiento deseado con un enlace de datos de un solo sentido al <input>,

Enlace de datos de dos vías

Queremos mostrar el nombre del heroe en el <input>, cambiarlo, y ver esos cambios dondesea que enlacemos al nombre del heroe. En pocas palabras, queremos un enlace de datos de ambos sentidos.

Antes de que podamos usar enlace de datos de ambos sentidos para los controles de formulario, necesitamos importar el paquete FormsModule en nuestro modulo de Angular. Lo agregamos a nuestro decorador NgModule en el array de imports. Este arreglo contiene la lista de los módulos externos usados por nuestra aplicación. Ahora hemos incluido el módulo de forms que incluye ngModel.

app.module.ts (importar FormsModule)

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Vamos a actualizar el template para usar la directiva ngModel que usa enlace de datos de ambos sentidos.

Cambiamos el <input> por el siguiente HTML:

<input [(ngModel)]="hero.name" placeholder="name">

El navegador se actualiza. Volvemos a ver a nuestro heroe. Podemos editar el nombre del heroe y los cambios se reflejan inmediatamente en el <h2>.

El camino que hemos recorrido

Vamos a analizar lo que hemos construido.

Nuestro tour de los heroes usa llaves dobles de interpolación (una forma de enlace de datos de un solo sentido) para mostrar el título de la aplicación y las propiedades del objeto Hero.
Escribimos templates multi linea usando strings de template de ES2015 para hacer nuestro template más leible.
Podemos mostrar y cambiar el nombre del heroe, luego de agregar enlace de datos de ambos sentidos al input>usando la directiva de Angular ngModule.
El ngModel también propaga cambios a todos los enlaces de datos a la propiedad hero.name.

Puedes ejecutar el ejemplo en vivo para esta parte.

Aquí está el app.component.ts completo como debería quedar:

app.component.ts

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template: `
    <h1></h1>
    <h2> details!</h2>
    <div><label>id: </label></div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

El camino hacia adelante

Nuestro tour de los heroes solo muestra un heroe y lo que realmente queremos mostrar es una lista de heroes. También queremos permitir al usuario seleccionar un heroe y mostrar sus detalles. Vamos a aprender más de como obtener listas, enlazarlas al template, y permitir al usuario seleccionar un heroe en el siguiente capítulo del tutorial.

Siguiente cápitulo: Maestro / Detalle

Contenidos

Tutorial