5 lines
22 KiB
JSON
5 lines
22 KiB
JSON
|
{
|
||
|
|
"id": "guide/router-tutorial",
|
||
|
|
"title": "Using Angular routes in a single-page application",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/router-tutorial.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=\"using-angular-routes-in-a-single-page-application\">Using Angular routes in a single-page application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router-tutorial#using-angular-routes-in-a-single-page-application\"><i class=\"material-icons\">link</i></a></h1>\n<p>This tutorial describes how you can build a single-page application, SPA that uses multiple Angular routes.</p>\n<p>In a Single Page Application (SPA), all of your application's functions exist in a single HTML page.\nAs users access your application's features, the browser needs to render only the parts that matter to the user, instead of loading a new page. This pattern can significantly improve your application's user experience.</p>\n<p>To define how users navigate through your application, you use routes. You can add routes to define how users navigate from one part of your application to another.\nYou can also configure routes to guard against unexpected or unauthorized behavior.</p>\n<p>To explore a sample app featuring the contents of this tutorial, see the <live-example></live-example>.</p>\n<h2 id=\"objectives\">Objectives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router-tutorial#objectives\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>Organize a sample application's features into modules.</li>\n<li>Define how to navigate to a component.</li>\n<li>Pass information to a component using a parameter.</li>\n<li>Structure routes by nesting several routes.</li>\n<li>Check whether users can access a route.</li>\n<li>Control whether the application can discard unsaved changes.</li>\n<li>Improve performance by pre-fetching route data and lazy loading feature modules.</li>\n<li>Require specific criteria to load components.</li>\n</ul>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router-tutorial#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To complete this tutorial, you should have a basic understanding of the following concepts:</p>\n<ul>\n<li>JavaScript</li>\n<li>HTML</li>\n<li>CSS</li>\n<li><a href=\"/cli\">Angular CLI</a></li>\n</ul>\n<p>You might find the <a href=\"/tutorial\">Tour of Heroes tutorial</a> helpful, but it is not required.</p>\n<h2 id=\"create-a-sample-application\">Create a sample application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router-tutorial#create-a-sample-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>Using the Angular CLI, create a new application, <em>angular-router-sample</em>. This application will have two components: <em>crisis-list</em> and <em>heroes-list</em>.</p>\n<ol>\n<li>\n<p>Create a new Angular project, <em>angular-router-sample</em>.</p>\n<code-example language=\"sh\">\nng new angular-router-sample\n</code-example>\n<p>When prompted with <code>Would you like to add Angular routing?</code>, select <code>N</code>.</p>\n<p>When prompted with <code>Which stylesheet format would you like to use?</code>, select <code>CSS</code>.</p>\n<p>After a few moments, a new project, <code>angular-router-sample</code>, is ready.</p>\n</li>\n<li>\n<p>From your terminal, navigate to the <code>angular-router-sample</code> directory.</p>\n</li>\n<li>\n<p>Create a component, <em>crisis-list</em>.</p>\n<code-example language=\"sh\">\n ng generate component crisis-list\n</code-example>\n</li>\n<li>\n<p>In your code editor, locate the file, <code>crisis-list.component.html</code> and replace\nthe placeholder content with the following HTML.</p>\n<code-example header=\"src/app/crisis-list/crisis-list.comp
|
||
|
|
}
|