Tutorial-Tour-of-Heroes

In this tutorial I build an app that helps a staffing agency manage its stable of heroes.

This basic app has many of the features you'd expect to find in a data-driven application. It acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.

In this tutorial I practiced the following:

1. Use built-in Angular directives to show and hide elements and display lists of hero data.
2. Create Angular components to display hero details and show an array of heroes.
3. Use one-way data binding for read-only data.
4. Add editable fields to update a model with two-way data binding.
5. Bind component methods to user events, like keystrokes and clicks.
6. Enable users to select a hero from a master list and edit that hero in the details view.
7. Format data with pipes.
8. Create a shared service to assemble the heroes.
9. Use routing to navigate among different views and their components.

The following diagram captures all of the navigation options.