Estás viendo la documentación de Angular
El tour de los héroes: Visión
Nuestro gran plan es construir una aplicación para ayudar a una consultora de empleos a administrar sus héroes. Incluso los héroes necesitan buscar trabajo.
Claro que solo haremos pequeños progresos en este tutorial. Lo que vamos a construir esperamos que tenga muchas de las características que esperamos encontrar en una aplicación completa y orientada a datos: obtener y mostrar una lista de héroes, editar el detalle de los héroes seleccionados y navegar entre diferentes vistas de los datos heroicos.
El Tour de los héroes cubre los fundamentales esenciales de Angular. Usaremos directivas incorporadas para mostrar/ocultar elementos y mostrar listas con los datos de los héroes. Vamos a crear un componente para mostrar los detalles del heroe, y otro para mostrar una lista de héroes. Usaremos enlace de datos (data binding) de un solo sentido para datos de solo lectura. Agregaremos campos editables para actualizar un modelo con enlace de datos de dós sentidos. Enlaceremos métodos de un componente a eventos de usuario como presiones de teclas y clicks. Vamos a aprender a seleccionar un heroe de una lista maestra y editar ese heroe en nuestra vista de detalles. Formateareamos los datos usando pipes. Crearemos un servicio compartido para armar nuestros héroes. Y usaremos enrutamiento para navegar entre las distintas vistas y sus componentes.
Aprenderemos lo suficiente de los esenciales de Angular para comenzar y ganar confianza en que Angular puede hacer lo que sea que necesitemos que haga. Estaremos cubriendo mucho terreno en un nivel introductorio pero encontraremos muchos enlaces a capitulos con mayor profundidad en los temas.
El objetivo final
Aquí hay una idea visual de lo que vamos a construir en este tour, empezando con la vista “Dashboard” y nuestros héroes más heróicos.
En la parte superior del dashboard hay dos enlaces (“Dashboard” y “Heroes”). Podemos hacer click en ellos para navegar entre el Dashboard y la vista de Heroes.
Si hacemos click en el nombre del héroe llamado “Magneta”, el router nos lleva a la vista “Detalles del heroe” donde pdoemos cambiar su nombre.
Hacer click en el botón “Back” nos va a retornar al “Dashboard”. Los enlaces en la partesuperior nos pueden llevar a cualquiera de las vistas principales. Hacemos click en “Heroes”. La aplicación nos lleva hasta la lista maestra de “Heroes”
Hacemos click en un héroe diferente y el detalle de solo lectura debajo de la lista refleja nuestra nueva elección.
Hacemos click en el botón “Ver detalles” para entrar en los detalles editables de nuestros héroe seleccionado.
El siguiente diagrama captura todas nuestras opciones de navegación.
Acá está nuestra app en acción
¿Qué sigue?
Construiremos este Tour de los héroes juntos, paso por paso. Cada paso va a estar motivado por requerimientos que vamos a encontrar en incontables aplicaciones. Todo tiene una razón.
Y encontraremos muchos fundamentales de Angular a lo largo del camino.
Siguiente paso: El editor de heroes