5 lines
76 KiB
JSON
5 lines
76 KiB
JSON
|
{
|
||
|
|
"id": "guide/router",
|
||
|
|
"title": "In-app navigation: routing to views",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/router.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"in-app-navigation-routing-to-views\">In-app navigation: routing to views<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router#in-app-navigation-routing-to-views\"><i class=\"material-icons\">link</i></a></h1>\n<p>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.\nAs users perform application tasks, they need to move between the different <a href=\"guide/glossary#view\" title=\"Definition of view\">views</a> that you have defined.</p>\n<p>To handle the navigation from one <a href=\"guide/glossary#view\">view</a> to the next, you use the Angular <strong><code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code></strong>.\nThe <strong><code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code></strong> enables navigation by interpreting a browser URL as an instruction to change the view.</p>\n<p>To explore a sample app featuring the router's primary features, see the <live-example></live-example>.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>Before creating a route, you should be familiar with the following:</p>\n<ul>\n<li><a href=\"guide/architecture-components\">Basics of components</a></li>\n<li><a href=\"guide/glossary#template\">Basics of templates</a></li>\n<li>An Angular app—you can generate a basic Angular app using the <a href=\"cli\">Angular CLI</a>.</li>\n</ul>\n<p>For an introduction to Angular with a ready-made app, see <a href=\"start\">Getting Started</a>.\nFor a more in-depth experience of building an Angular app, see the <a href=\"tutorial\">Tour of Heroes</a> tutorial. Both guide you through using component classes and templates.</p>\n<a id=\"basics\"></a>\n<h2 id=\"generate-an-app-with-routing-enabled\">Generate an app with routing enabled<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router#generate-an-app-with-routing-enabled\"><i class=\"material-icons\">link</i></a></h2>\n<p>The following command uses the Angular CLI to generate a basic Angular app with an app routing module, called <code>AppRoutingModule</code>, which is an NgModule where you can configure your routes.\nThe app name in the following example is <code>routing-app</code>.</p>\n<code-example language=\"none\" class=\"code-shell\">\n ng new routing-app --routing\n</code-example>\n<p>When generating a new app, the CLI prompts you to select CSS or a CSS preprocessor.\nFor this example, accept the default of <code>CSS</code>.</p>\n<h3 id=\"adding-components-for-routing\">Adding components for routing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router#adding-components-for-routing\"><i class=\"material-icons\">link</i></a></h3>\n<p>To use the Angular router, an app needs to have at least two components so that it can navigate from one to the other. To create a component using the CLI, enter the following at the command line where <code>first</code> is the name of your component:</p>\n<code-example language=\"none\" class=\"code-shell\">\n ng generate component first\n</code-example>\n<p>Repeat this step for a second component but give it a different name.\nHere, the new name is <code>second</code>.</p>\n<code-example language=\"none\" class=\"code-shell\">\n ng generate component second\n</code-example>\n<p>The CLI automatically appends <code><a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code>,
|
||
|
|
}
|