5 lines
12 KiB
JSON
5 lines
12 KiB
JSON
{
|
|
"id": "start/start-routing",
|
|
"title": "Adding navigation",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/start/start-routing.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=\"adding-navigation\">Adding navigation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-routing#adding-navigation\"><i class=\"material-icons\">link</i></a></h1>\n<p>This guide builds on the first step of the Getting Started tutorial, <a href=\"start\" title=\"Get started with a basic Angular app\">Get started with a basic Angular app</a>.</p>\n<p>At this stage of development, the online store application has a basic product catalog.</p>\n<p>In the following sections, you'll add the following features to the application:</p>\n<ul>\n<li>Type a URL in the address bar to navigate to a corresponding product page.</li>\n<li>Click links on the page to navigate within your single-page application.</li>\n<li>Click the browser's back and forward buttons to navigate the browser history intuitively.</li>\n</ul>\n<a id=\"define-routes\"></a>\n<h2 id=\"associate-a-url-path-with-a-component\">Associate a URL path with a component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-routing#associate-a-url-path-with-a-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>The application already uses the Angular <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> to navigate to the <code>ProductListComponent</code>.\nThis section shows you how to define a route to show individual product details.</p>\n<ol>\n<li>\n<p>Generate a new component for product details.\nIn the file list, right-click the <code>app</code> folder, choose <code>Angular Generator</code> and <code><a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code>.\nName the component <code>product-details</code>.</p>\n</li>\n<li>\n<p>In <code>app.module.ts</code>, add a route for product details, with a <code>path</code> of <code>products/:productId</code> and <code>ProductDetailsComponent</code> for the <code>component</code>.</p>\n<code-example header=\"src/app/app.module.ts\" path=\"getting-started/src/app/app.module.ts\" region=\"product-details-route\">\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/forms/ReactiveFormsModule\" class=\"code-anchor\">ReactiveFormsModule</a>,\n RouterModule.forRoot([\n { path: '', component: ProductListComponent },\n { path: 'products/:productId', component: ProductDetailsComponent },\n ])\n ],\n\n</code-example>\n</li>\n<li>\n<p>Open <code>product-list.component.html</code>.</p>\n</li>\n<li>\n<p>Modify the product name anchor to include a <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></code> with the <code>product.id</code> as a parameter.</p>\n<code-example header=\"src/app/product-list/product-list.component.html\" path=\"getting-started/src/app/product-list/product-list.component.html\" region=\"router-link\">\n<div *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let product of products\">\n\n <h3>\n <a [title]=\"product.name + ' details'\" [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"['/products', product.id]\">\n {{ product.name }}\n </a>\n </h3>\n\n<!-- . . . -->\n\n</div>\n\n</code-example>\n<p>The <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">RouterLink</a></code> directive helps you customize the anchor element.\nIn this case, the route, or URL, contains one fixed segment, <code>/products</code>.\nThe final segment is variable, inserting the <code>id</code> property of the current product.\nFor example, the URL for a product with an <code>id</code> of 1 would be similar to <code>https://getting-started-myfork.stackblitz.io/products/1</code>.</p>\n</li>\n<li>\n<p>Verify that the router works as intended by clicking the product name.\nThe application should display the <code>ProductDetailsComponent</code>, which currently says \"product-details works!\"</p>\n<p>Notice that the URL in the preview window changes.\nThe final segment is <code>products/#</code> where <code>#</code> is the number of the route you clicked.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/product-details-works.png\" alt=\"Product details view with updated URL\" width=\"259\" height=\"162\">\n</div>\n</li>\n</ol>\n<h2 id=\"view-product-details\">View product details<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-routing#view-product-details\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code>ProductDetailsComponent</code> handles the display of each product.\nThe Angular Router displays components based on the browser's URL and <a href=\"start/start-routing#define-routes\">your defined routes</a>.</p>\n<p>In this section, you'll use the Angular Router to combine the <code>products</code> data and route information to display the specific details for each product.</p>\n<ol>\n<li>\n<p>In <code>product-details.component.ts</code>, import <code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code> from <code>@angular/router</code>, and the <code>products</code> array from <code>../products</code>.</p>\n<code-example header=\"src/app/product-details/product-details.component.ts\" path=\"getting-started/src/app/product-details/product-details.component.1.ts\" region=\"imports\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> } from '@angular/core';\nimport { <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a> } from '@angular/router';\n\nimport { products } from '../products';\n\n</code-example>\n</li>\n<li>\n<p>Define the <code>product</code> property.</p>\n<code-example header=\"src/app/product-details/product-details.component.ts\" path=\"getting-started/src/app/product-details/product-details.component.1.ts\" region=\"product-prop\">\nexport class ProductDetailsComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n product;\n /* ... */\n}\n\n\n</code-example>\n</li>\n<li>\n<p>Inject <code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code> into the <code>constructor()</code> by adding <code>private route: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code> as an argument within the constructor's parentheses.</p>\n<code-example header=\"src/app/product-details/product-details.component.ts\" path=\"getting-started/src/app/product-details/product-details.component.1.ts\" region=\"props-methods\">\nexport class ProductDetailsComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n product;\n\n constructor(\n private route: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>,\n ) { }\n\n}\n\n\n</code-example>\n<p><code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code> is specific to each component that the Angular Router loads.\n<code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code> contains information about the route and the route's parameters.</p>\n<p>By injecting <code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code>, you are configuring the component to use a service.\nThe <a href=\"start/start-data\" title=\"Try it: Managing Data\">Managing Data</a> step covers services in more detail.</p>\n</li>\n<li>\n<p>In the <code>ngOnInit()</code> method, extract the <code>productId</code> from the route parameters and find the corresponding product in the <code>products</code> array.</p>\n<code-example path=\"getting-started/src/app/product-details/product-details.component.1.ts\" header=\"src/app/product-details/product-details.component.ts\" region=\"get-product\">\nngOnInit() {\n // First get the product id from the current route.\n const routeParams = this.route.snapshot.paramMap;\n const productIdFromRoute = Number(routeParams.get('productId'));\n\n // Find the product that correspond with the id provided in route.\n this.product = products.find(product => product.id === productIdFromRoute);\n}\n\n</code-example>\n<p>The route parameters correspond to the path variables you define in the route.\nTo access the route parameters, we use <code>route.snapshot</code>, which is the <code><a href=\"api/router/ActivatedRouteSnapshot\" class=\"code-anchor\">ActivatedRouteSnapshot</a></code> that contains information about the active route at that particular moment in time.\nThe URL that matches the route provides the <code>productId</code> .\nAngular uses the <code>productId</code> to display the details for each unique product.</p>\n</li>\n<li>\n<p>Update the <code>ProductDetailsComponent</code> template to display product details with an <code>*<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code>.\nIf a product exists, the <code><div></code> renders with a name, price, and description.</p>\n<code-example header=\"src/app/product-details/product-details.component.html\" path=\"getting-started/src/app/product-details/product-details.component.html\" region=\"details\">\n<h2>Product Details</h2>\n\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"product\">\n <h3>{{ product.name }}</h3>\n <h4>{{ product.price | <a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a> }}</h4>\n <p>{{ product.description }}</p>\n\n</div>\n\n\n</code-example>\n<p>The line, <code><h4>{{ product.price | <a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a> }}</h4></code>, uses the <code><a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a></code> pipe to transform <code>product.price</code> from a number to a currency string.\nA pipe is a way you can transform data in your HTML template.\nFor more information about Angular pipes, see <a href=\"guide/pipes\" title=\"Pipes\">Pipes</a>.</p>\n</li>\n</ol>\n<p>When users click on a name in the product list, the router navigates them to the distinct URL for the product, shows the <code>ProductDetailsComponent</code>, and displays the product details.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/product-details-routed.png\" alt=\"Product details page with updated URL and full details displayed\" width=\"259\" height=\"225\">\n</div>\n<p>For more information about the Angular Router, see <a href=\"guide/router\" title=\"Routing & Navigation guide\">Routing & Navigation</a>.</p>\n<h2 id=\"whats-next\">What's next<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-routing#whats-next\"><i class=\"material-icons\">link</i></a></h2>\n<p>You have configured your application so you can view product details, each with a distinct URL.</p>\n<p>To continue exploring Angular:</p>\n<ul>\n<li>Continue to <a href=\"start/start-data\" title=\"Try it: Managing Data\">Managing Data</a> to add a shopping cart feature, manage cart data, and retrieve external data for shipping prices.</li>\n<li>Skip ahead to <a href=\"start/start-deployment\" title=\"Try it: Deployment\">Deployment</a> to deploy your application to Firebase or move to local development.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - start\n - start/start-data\n-->\n<!-- links from this doc:\n - api/common/CurrencyPipe\n - api/common/NgForOf\n - api/common/NgIf\n - api/core/Component\n - api/core/NgModule\n - api/core/OnInit\n - api/forms/ReactiveFormsModule\n - api/platform-browser/BrowserModule\n - api/router/ActivatedRoute\n - api/router/ActivatedRouteSnapshot\n - api/router/Router\n - api/router/RouterLink\n - guide/pipes\n - guide/router\n - start\n - start/start-data\n - start/start-deployment\n - start/start-routing#adding-navigation\n - start/start-routing#associate-a-url-path-with-a-component\n - start/start-routing#define-routes\n - start/start-routing#view-product-details\n - start/start-routing#whats-next\n - https://github.com/angular/angular/edit/master/aio/content/start/start-routing.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |