2022-06-08 12:26:25 -07:00
# Tour of Heroes application and tutorial
2017-04-01 01:57:13 +02: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 08:48:09 -08:00
2020-01-13 10:37:43 -08:00
<header>Getting Started</header>
2019-03-20 15:10:47 +00:00
2022-06-08 12:26:25 -07:00
In this tutorial, you build your own Angular application from the start.
2022-10-07 11:59:51 -05: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 12:26:25 -07: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 12:26:25 -07: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 10:37:43 -08:00
</div>
2019-03-20 15:10:47 +00:00
2022-06-08 12:26:25 -07: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 00:12:55 -06: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 08:48:09 -08:00
The * Tour of Heroes * application that you build helps a staffing agency manage its stable of heroes.
2022-06-08 12:26:25 -07: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 12:26:25 -07: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 16:08:53 +01:00
2022-06-08 12:26:25 -07: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 12:26:25 -07: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 00:12:55 -06: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 08:48:09 -08:00
2019-04-02 00:12:55 -06:00
<header>Solution</header>
2022-06-08 12:26:25 -07: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 08:48:09 -08:00
<live-example name="toh-pt6"></live-example>.
2017-04-01 01:57:13 +02:00
2019-04-02 00:12:55 -06:00
</div>
2022-06-08 12:26:25 -07:00
## Design your new application
2017-02-22 18:09:39 +00:00
2022-06-08 12:26:25 -07: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 14:47:51 -08: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 08:48:09 -08:00
<img alt="Output of heroes dashboard" src="generated/images/guide/toh/heroes-dashboard-1.png">
2019-11-11 14:47:51 -08:00
</div>
2017-02-22 18:09:39 +00:00
2022-06-08 12:26:25 -07: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 08:48:09 -08: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 14:47:51 -08: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 08:48:09 -08:00
2022-06-08 12:26:25 -07: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 08:48:09 -08:00
2019-11-11 14:47:51 -08:00
</div>
2017-02-22 18:09:39 +00:00
2017-03-27 16:08:53 +01: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 12:26:25 -07:00
If you click "Heroes," the application displays the "Heroes" list view.
2017-02-22 18:09:39 +00:00
2019-11-11 14:47:51 -08: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 08:48:09 -08:00
2022-06-08 12:26:25 -07: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 08:48:09 -08:00
2019-11-11 14:47:51 -08:00
</div>
2017-02-22 18:09:39 +00:00
2017-03-27 16:08:53 +01: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 08:48:09 -08: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 12:26:25 -07:00
The following diagram illustrates the navigation options.
2017-02-22 18:09:39 +00:00
2019-11-11 14:47:51 -08: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 08:48:09 -08:00
<img alt="View navigations" src="generated/images/guide/toh/nav-diagram.png">
2019-11-11 14:47:51 -08: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 14:47:51 -08: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 08:48:09 -08:00
<img alt="Tour of Heroes in Action" src="generated/images/guide/toh/toh-anim.gif">
2019-11-11 14:47:51 -08: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 08:48:09 -08:00
2022-05-16 11:12:09 -07:00
@reviewed 2022-05-16
