2022-06-08 19:26:25 +00:00
# Tour of Heroes application and tutorial
2017-03-31 23:57:13 +00:00
2019-03-20 15:10:47 +00:00
< div class = "callout is-helpful" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
2020-01-13 18:37:43 +00:00
< header > Getting Started< / header >
2019-03-20 15:10:47 +00:00
2022-06-08 19:26:25 +00:00
In this tutorial, you build your own Angular application from the start.
2022-10-07 16:59:51 +00:00
This is a good way to experience a typical development process as you learn Angular application-design concepts, tools, and terminology.
2019-03-20 15:10:47 +00:00
2022-06-08 19:26:25 +00:00
If you're new to Angular, try the [**Try it now** ](start ) quick-start application first.
**Try it now** is based on a ready-made partially completed project.
You can edit the application in StackBlitz and see the results in real time.
2019-03-20 15:10:47 +00:00
2022-06-08 19:26:25 +00:00
**Try it now** covers the same major topics — components, template syntax, routing, services, and accessing data using HTTP— in a condensed format, following best practices.
2019-03-20 15:10:47 +00:00
2020-01-13 18:37:43 +00:00
< / div >
2019-03-20 15:10:47 +00:00
2022-06-08 19:26:25 +00:00
This *Tour of Heroes* tutorial provides an introduction to the fundamentals of Angular and shows you how to:
* Set up your local Angular development environment.
* Use the [Angular CLI ](cli "CLI command reference" ) to develop an application
2019-04-02 06:12:55 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
The *Tour of Heroes* application that you build helps a staffing agency manage its stable of heroes.
2022-06-08 19:26:25 +00:00
The application has many of the features that you'd expect to find in any data-driven application.
The finished application:
2019-03-20 15:10:47 +00:00
2022-06-08 19:26:25 +00:00
* Gets a list of heroes
* Displays the heroes in a list
* Edits a selected hero's details
* Navigates between different views of heroic data
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
This tutorial helps you gain confidence that Angular can do whatever you need it to do by showing you how to:
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
* Use Angular [directives ](guide/glossary#directive "Directives definition" ) to show and hide elements and display lists of hero data.
* Create Angular [components ](guide/glossary#component "Components definition" ) to display hero details and show an array of heroes.
* Use one-way [data binding ](guide/glossary#data-binding "Data binding definition" ) 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 ](guide/glossary#pipe "Pipe definition" ).
* Create a shared [service ](guide/glossary#service "Service definition" ) to assemble the heroes.
* Use [routing ](guide/glossary#router "Router definition" ) to navigate among different views and their components.
2017-02-22 18:09:39 +00:00
2019-04-02 06:12:55 +00:00
< div class = "callout is-helpful" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
2019-04-02 06:12:55 +00:00
< header > Solution< / header >
2022-06-08 19:26:25 +00:00
After you complete all tutorial steps, the final application looks like this example.
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< live-example name = "toh-pt6" > < / live-example > .
2017-03-31 23:57:13 +00:00
2019-04-02 06:12:55 +00:00
< / div >
2022-06-08 19:26:25 +00:00
## Design your new application
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
Here's an image of where this tutorial leads, showing the Dashboard view and the most heroic heroes:
2017-02-22 18:09:39 +00:00
2019-11-11 22:47:51 +00:00
< div class = "lightbox" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< img alt = "Output of heroes dashboard" src = "generated/images/guide/toh/heroes-dashboard-1.png" >
2019-11-11 22:47:51 +00:00
< / div >
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
You can click the **Dashboard** and **Heroes** links in the dashboard to navigate between the views.
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
If you click the dashboard hero "Magneta," the router opens a "Hero Details" view where you can change the hero's name.
2017-02-22 18:09:39 +00:00
2019-11-11 22:47:51 +00:00
< div class = "lightbox" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
2022-06-08 19:26:25 +00:00
< img alt = "Details of hero in application" src = "generated/images/guide/toh/hero-details-1.png" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
2019-11-11 22:47:51 +00:00
< / div >
2017-02-22 18:09:39 +00:00
2017-03-27 15:08:53 +00:00
Clicking the "Back" button returns you to the Dashboard.
Links at the top take you to either of the main views.
2022-06-08 19:26:25 +00:00
If you click "Heroes," the application displays the "Heroes" list view.
2017-02-22 18:09:39 +00:00
2019-11-11 22:47:51 +00:00
< div class = "lightbox" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
2022-06-08 19:26:25 +00:00
< img alt = "Output of heroes list application" src = "generated/images/guide/toh/heroes-list-2.png" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
2019-11-11 22:47:51 +00:00
< / div >
2017-02-22 18:09:39 +00:00
2017-03-27 15:08:53 +00:00
When you click a different hero name, the read-only mini detail beneath the list reflects the new choice.
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
You can click the "View Details" button to drill into the editable details of the selected hero.
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
The following diagram illustrates the navigation options.
2017-02-22 18:09:39 +00:00
2019-11-11 22:47:51 +00:00
< div class = "lightbox" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< img alt = "View navigations" src = "generated/images/guide/toh/nav-diagram.png" >
2019-11-11 22:47:51 +00:00
< / div >
2017-02-22 18:09:39 +00:00
2021-05-10 16:09:25 +00:00
Here's the application in action:
2017-02-22 18:09:39 +00:00
2019-11-11 22:47:51 +00:00
< div class = "lightbox" >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< img alt = "Tour of Heroes in Action" src = "generated/images/guide/toh/toh-anim.gif" >
2019-11-11 22:47:51 +00:00
< / div >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
2022-05-16 18:12:09 +00:00
@reviewed 2022-05-16
