5 lines
53 KiB
JSON
5 lines
53 KiB
JSON
|
{
|
|||
|
|
"id": "tutorial/toh-pt5",
|
|||
|
|
"title": "Add navigation with routing",
|
|||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt5.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=\"add-navigation-with-routing\">Add navigation with routing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt5#add-navigation-with-routing\"><i class=\"material-icons\">link</i></a></h1>\n<p>There are new requirements for the Tour of Heroes app:</p>\n<ul>\n<li>Add a <em>Dashboard</em> view.</li>\n<li>Add the ability to navigate between the <em>Heroes</em> and <em>Dashboard</em> views.</li>\n<li>When users click a hero name in either view, navigate to a detail view of the selected hero.</li>\n<li>When users click a <em>deep link</em> in an email, open the detail view for a particular hero.</li>\n</ul>\n<div class=\"alert is-helpful\">\n<p> For the sample application that this page describes, see the <live-example></live-example>.</p>\n</div>\n<p>When you’re done, users will be able to navigate the application like this:</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/toh/nav-diagram.png\" alt=\"View navigations\" width=\"506\" height=\"433\">\n</div>\n<h2 id=\"add-the-approutingmodule\">Add the <code>AppRoutingModule</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt5#add-the-approutingmodule\"><i class=\"material-icons\">link</i></a></h2>\n<p>In Angular, the best practice is to load and configure the router in a separate, top-level module\nthat is dedicated to routing and imported by the root <code>AppModule</code>.</p>\n<p>By convention, the module class name is <code>AppRoutingModule</code> and it belongs in the <code>app-routing.module.ts</code> in the <code>src/app</code> folder.</p>\n<p>Use the CLI to generate it.</p>\n<code-example language=\"sh\" class=\"code-shell\">\n ng generate module app-routing --flat --module=app\n</code-example>\n<div class=\"alert is-helpful\">\n<p><code>--flat</code> puts the file in <code>src/app</code> instead of its own folder.<br>\n<code>--module=app</code> tells the CLI to register it in the <code>imports</code> array of the <code>AppModule</code>.</p>\n</div>\n<p>The generated file looks like this:</p>\n<code-example path=\"toh-pt5/src/app/app-routing.module.0.ts\" header=\"src/app/app-routing.module.ts (generated)\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a> } from '@angular/common';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a>\n ],\n declarations: []\n})\nexport class AppRoutingModule { }\n\n\n</code-example>\n<p>Replace it with the following:</p>\n<code-example path=\"toh-pt5/src/app/app-routing.module.1.ts\" header=\"src/app/app-routing.module.ts (updated)\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a>, <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> } from '@angular/router';\nimport { HeroesComponent } from './heroes/heroes.component';\n\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n { path: 'heroes', component: HeroesComponent }\n];\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [RouterModule.forRoot(routes)],\n exports: [<a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a>]\n})\nexport class AppRoutingModule { }\n\n\n</code-example>\n<p>First, the <code>app-routing.module.ts</code> file imports <code><a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a></code>
|
|||
|
|
}
|