This is a cherry pick of #35533 so we can get the new nav structure in angular.io sooner instead of on next. PR Close #36822
This commit is contained in:

committed by
Alex Rickabaugh

parent
d0e024ec2d
commit
9e755f30f0
@ -1,7 +1,7 @@
|
||||
# Introduction to components and templates
|
||||
|
||||
A *component* controls a patch of screen called a *view*.
|
||||
For example, individual components define and control each of the following views from the [Tutorial](tutorial):
|
||||
A *component* controls a patch of screen called a [*view*](guide/glossary#view "Definition of view").
|
||||
For example, individual components define and control each of the following views from the [Tour of Heroes tutorial](tutorial):
|
||||
|
||||
* The app root with the navigation links.
|
||||
* The list of heroes.
|
||||
|
@ -1010,21 +1010,21 @@ Callouts use the same _urgency levels_ that alerts do.
|
||||
<div class="callout is-critical">
|
||||
<header>A critical point</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast
|
||||
|
||||
</div>
|
||||
|
||||
<div class="callout is-important">
|
||||
<header>An important point</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast
|
||||
|
||||
</div>
|
||||
|
||||
<div class="callout is-helpful">
|
||||
<header>A helpful or informational point</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast
|
||||
|
||||
</div>
|
||||
|
||||
@ -1033,7 +1033,7 @@ Here is the markup for the first of these callouts.
|
||||
<div class="callout is-critical">
|
||||
<header>A critical point</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast
|
||||
|
||||
</div>
|
||||
```
|
||||
|
@ -1,8 +1,8 @@
|
||||
# In-app navigation with routing
|
||||
# In-app navigation: routing to views
|
||||
|
||||
You want the applications you build to be as fast and responsive as possible.
|
||||
In Angular, a common best practice to improve responsiveness is to build _singe-page apps_.
|
||||
With single-page apps, your users stay on a single page, but their view of that page changes depending on what the user wants to do.
|
||||
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 implement this kind of navigation within the single page of your app, you use the Angular **`Router`**.
|
||||
|
||||
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.
|
||||
|
@ -6,10 +6,9 @@ It includes information about prerequisites, installing the CLI, creating an ini
|
||||
|
||||
|
||||
<div class="callout is-helpful">
|
||||
<header>Learning Angular</header>
|
||||
|
||||
If you are new to Angular, see [Getting Started](start). Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app. It leverages the [StackBlitz](https://stackblitz.com/) online development environment, so you don't need to set up your local environment until you're ready.
|
||||
<header>Try Angular without local setup</header>
|
||||
|
||||
If you are new to Angular, you might want to start with [Try it now!](start), which introduces the essentials of Angular in the context of a ready-made basic online store app that you can examine and modify. This standalone tutorial takes advantage of the interactive [StackBlitz](https://stackblitz.com/) environment for online development. You don't need to set up your local environment until you're ready.
|
||||
|
||||
</div>
|
||||
|
||||
@ -119,18 +118,10 @@ You will see:
|
||||
|
||||
## Next steps
|
||||
|
||||
* For a more thorough introduction to the fundamental concepts and terminology of Angular single-page app architecture and design principles, read the [Angular Concepts](guide/architecture) section.
|
||||
|
||||
* If you are new to Angular, see the [Getting Started](start) tutorial. Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
Getting Started assumes the [StackBlitz](https://stackblitz.com/) online development environment.
|
||||
To learn how to export an app from StackBlitz to your local environment, skip ahead to the [Deployment](start/start-deployment "Getting Started: Deployment") section.
|
||||
|
||||
</div>
|
||||
|
||||
* Work through the [Tour of Heroes Tutorial](tutorial), a complete hands-on exercise that introduces you to the app development process using the Angular CLI and walks through important subsystems.
|
||||
|
||||
* To learn more about using the Angular CLI, see the [CLI Overview](cli "CLI Overview"). In addition to creating the initial workspace and app scaffolding, you can use the CLI to generate Angular code such as components and services. The CLI supports the full development cycle, including building, testing, bundling, and deployment.
|
||||
|
||||
|
||||
* For more information about the Angular files generated by `ng new`, see [Workspace and Project File Structure](guide/file-structure).
|
||||
|
Reference in New Issue
Block a user