Professional Documents
Culture Documents
1.1 Angular - Tour of Heroes Application and Tutorial
1.1 Angular - Tour of Heroes Application and Tutorial
mode_edit
Tour of Heroes application
and tutorial link
GETTING STARTED
In this tutorial, you build your own Angular application from the start. This is a
If you're new to Angular, try the Try it now quick-start application first. Try it
now is based on a ready-made partially completed project. You can edit the
Try it now covers the same major topics —components, template syntax,
The Tour of Heroes application that you build helps a staffing agency
manage its stable of heroes. The application has many of the features that
https://angular.io/tutorial/tour-of-heroes 1/5
05/07/2023, 15:57 Angular - Tour of Heroes application and tutorial
This tutorial helps you gain confidence that Angular can do whatever you
need it to do by showing you how to:
Use Angular directives to show and hide elements and display lists
of hero data.
Create Angular components to display hero details and show an
array of heroes.
Use one-way data binding for read-only data.
Add editable fields to update a model with two-way data binding.
Bind component methods to user events, like keystrokes and clicks.
Enable users to select a hero from a list and edit that hero in the
details view.
Format data with pipes.
SOLUTION
After you complete all tutorial steps, the final application looks like this
example.
https://angular.io/tutorial/tour-of-heroes 2/5
05/07/2023, 15:57 Angular - Tour of Heroes application and tutorial
You can click the Dashboard and Heroes links in the dashboard to
navigate between the views.
If you click the dashboard hero "Magneta," the router opens a "Hero
Details" view where you can change the hero's name.
Clicking the "Back" button returns you to the Dashboard. Links at the top
take you to either of the main views. If you click "Heroes," the application
displays the "Heroes" list view.
https://angular.io/tutorial/tour-of-heroes 3/5
05/07/2023, 15:57 Angular - Tour of Heroes application and tutorial
When you click a different hero name, the read-only mini detail beneath the
You can click the "View Details" button to drill into the editable details of
https://angular.io/tutorial/tour-of-heroes 4/5
05/07/2023, 15:57 Angular - Tour of Heroes application and tutorial
https://angular.io/tutorial/tour-of-heroes 5/5