angular-cn/aio/dist/generated/docs/guide/router-tutorial-toh.json

5 lines
264 KiB
JSON
Raw Normal View History

{
"id": "guide/router-tutorial-toh",
"title": "Router tutorial: tour of heroes",
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/router-tutorial-toh.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 <a id=\"router-tutorial\"></a>\n<h1 id=\"router-tutorial-tour-of-heroes\">Router tutorial: tour of heroes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router-tutorial-toh#router-tutorial-tour-of-heroes\"><i class=\"material-icons\">link</i></a></h1>\n<p>This tutorial provides an extensive overview of the Angular router.\nIn this tutorial, you will build upon a basic router configuration to explore features such as child routes, route parameters, lazy load NgModules, guard routes, and preloading data to improve the user experience.</p>\n<p>For a working example of the final version of the app, see the <live-example name=\"router\"></live-example>.</p>\n<a id=\"router-tutorial-objectives\"></a>\n<h2 id=\"objectives\">Objectives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router-tutorial-toh#objectives\"><i class=\"material-icons\">link</i></a></h2>\n<p>This guide describes development of a multi-page routed sample application.\nAlong the way, it highlights key features of the router such as:</p>\n<ul>\n<li>Organizing the application features into modules.</li>\n<li>Navigating to a component (<em>Heroes</em> link to \"Heroes List\").</li>\n<li>Including a route parameter (passing the Hero <code>id</code> while routing to the \"Hero Detail\").</li>\n<li>Child routes (the <em>Crisis Center</em> has its own routes).</li>\n<li>The <code><a href=\"api/router/CanActivate\" class=\"code-anchor\">CanActivate</a></code> guard (checking route access).</li>\n<li>The <code><a href=\"api/router/CanActivateChild\" class=\"code-anchor\">CanActivateChild</a></code> guard (checking child route access).</li>\n<li>The <code><a href=\"api/router/CanDeactivate\" class=\"code-anchor\">CanDeactivate</a></code> guard (ask permission to discard unsaved changes).</li>\n<li>The <code><a href=\"api/router/Resolve\" class=\"code-anchor\">Resolve</a></code> guard (pre-fetching route data).</li>\n<li>Lazy loading an <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>.</li>\n<li>The <code><a href=\"api/router/CanLoad\" class=\"code-anchor\">CanLoad</a></code> guard (check before loading feature module assets).</li>\n</ul>\n<p>This guide proceeds as a sequence of milestones as if you were building the app step-by-step, but assumes you are familiar with basic <a href=\"guide/architecture\">Angular concepts</a>.\nFor a general introduction to angular, see the <a href=\"start\">Getting Started</a>. For a more in-depth overview, see the <a href=\"tutorial\">Tour of Heroes</a> tutorial.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router-tutorial-toh#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=\"the-sample-application-in-action\">The sample application in action<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/router-tutorial-toh#the-sample-application-in-action\"><i class=\"material-icons\">link</i></a></h2>\n<p>The sample application for this tutorial helps the Hero Employment Agency find crises for heroes to solve.</p>\n<p>The application has three main feature areas:</p>\n<ol>\n<li>A <em>Crisis Center</em> for maintaining the list of crises for assignment to heroes.</li>\n<li>A <em>Heroes</em> area for maintaining the
}