Tour of Heroes: the vision


Our grand plan is to build an app to help a staffing agency manage its stable of heroes. Even heroes need to find work.

Of course we'll only make a little progress in this tutorial. What we do build will have many of the features we expect to find in a full-blown, data-driven application: acquiring and displaying a list of heroes, editing a selected hero's detail, and navigating among different views of heroic data.

The Tour of Heroes covers the core fundamentals of Angular. We’ll use built-in directives to show/hide elements and display lists of hero data. We’ll create a component to display hero details and another to show an array of heroes. We'll use one-way data binding for read-only data. We'll add editable fields to update a model with two-way data binding. We'll bind component methods to user events like key strokes and clicks. We’ll learn to select a hero from a master list and edit that hero in the details view. We'll format data with pipes. We'll create a shared service to assemble our heroes. And we'll use routing to navigate among different views and their components.

We’ll learn enough core Angular to get started and gain confidence that Angular can do whatever we need it to do. We'll be covering a lot of ground at an introductory level but we’ll find plenty of links to chapters with greater depth.


Tutorial extracted from: https://angular.io/docs/ts/latest/tutorial/

Steps of the tutorial (commits):
1) Introduction (not commited)
2) The Hero Editor
3) Master/Detail
4) Multiple components
5) Services
6) Routing
7) HTTP