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
2023-04-22 00:10:50 +00:00
## First App Tutorial - Angular Homes
[First App Tutorial - Angular Homes ](tutorial/first-app ) gets you started with Angular
The First App tutorial guides you through building an Angular app by taking you step by step through the fundamentals of building an application in Angular.
2019-03-20 15:10:47 +00:00
2023-04-22 00:10:50 +00:00
Learn how to use Standalone Components, Inputs, Angular templates, data binding and more.
## Tour of Heroes
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.
