mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
42289f25c6
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
55 lines
2.5 KiB
Markdown
55 lines
2.5 KiB
Markdown
# Angular Routing
|
|
|
|
In a single-page app, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page.
|
|
As users perform application tasks, they need to move between the different [views](guide/glossary#view "Definition of view") that you have defined.
|
|
|
|
To handle the navigation from one [view](guide/glossary#view) to the next, you use the Angular **`Router`**.
|
|
The **`Router`** enables navigation by interpreting a browser URL as an instruction to change the view.
|
|
|
|
To explore a sample app featuring the router's primary features, see the <live-example name="router"></live-example>.
|
|
|
|
## Prerequisites
|
|
|
|
Before creating a route, you should be familiar with the following:
|
|
|
|
* [Basics of components](guide/architecture-components)
|
|
* [Basics of templates](guide/glossary#template)
|
|
* An Angular app —you can generate a basic Angular application using the [Angular CLI](cli).
|
|
|
|
## Learn about Angular routing
|
|
|
|
<div class="card-container">
|
|
<a href="guide/router" class="docs-card" title="Common routing tasks">
|
|
<section>Common routing tasks</section>
|
|
<p>Learn how to implement many of the common tasks associated with Angular routing.</p>
|
|
<p class="card-footer">Common routing tasks</p>
|
|
</a>
|
|
<a href="guide/router-tutorial" class="docs-card" title="Routing SPA tutorial">
|
|
<section>Single-page applications (SPAs) routing tutorial</section>
|
|
<p>A tutorial that covers patterns associated with Angular routing.</p>
|
|
<p class="card-footer">Routing SPA tutorial</p>
|
|
</a>
|
|
<a href="guide/router-tutorial-toh" class="docs-card" title="Routing Tour of Heroes">
|
|
<section>Tour of Heroes expanded routing tutorial</section>
|
|
<p>Add more routing features to the Tour of Heroes tutorial.</p>
|
|
<p class="card-footer">Routing Tour of Heroes</p>
|
|
</a>
|
|
<a href="guide/routing-with-urlmatcher" class="docs-card" title="Creating custom route matches tutorial">
|
|
<section>Creating custom route matches tutorial</section>
|
|
<p>A tutorial that covers how to use custom matching strategy patterns with Angular routing.</p>
|
|
<p class="card-footer">Custom route matches tutorial</p>
|
|
</a>
|
|
<a href="guide/router-reference" class="docs-card" title="Router reference">
|
|
<section>Router reference</section>
|
|
<p>Describes some core router API concepts.</p>
|
|
<p class="card-footer">Router reference</p>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-02-28
|