2022-11-22 00:33:12 +00:00
# Angular tutorials
2017-03-31 23:57:13 +00:00
2022-11-22 00:33:12 +00:00
This section contains tutorials to help you get started developing applications with Angular.
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-11-22 00:33:12 +00:00
## Tour of heroes
2019-03-20 15:10:47 +00:00
2022-11-22 00:33:12 +00:00
[Tour of Heroes ](tutorial/tour-of-heroes ) 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
2022-11-22 00:33:12 +00:00
## Building a template-driven form
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-11-22 00:33:12 +00:00
[Building a template-driven form ](guide/forms ) shows you how to create a template-driven form.
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-11-22 00:33:12 +00:00
The control elements in the form are bound to data properties that have input validation. The input validation helps maintain data integrity and styling to improve the user experience.
Template-driven forms use two-way data binding to update the data model in the component as changes are made in the template and vice versa.
