5 lines
32 KiB
JSON
5 lines
32 KiB
JSON
{
|
|
"id": "start/start-data",
|
|
"title": "Managing data",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/start/start-data.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=\"managing-data\">Managing data<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#managing-data\"><i class=\"material-icons\">link</i></a></h1>\n<p>This guide builds on the second step of the <a href=\"start\">Getting started with a basic Angular application</a> tutorial, <a href=\"start/start-routing\" title=\"Adding navigation\">Adding navigation</a>.\nAt this stage of development, the store application has a product catalog with two views: a product list and product details.\nUsers can click on a product name from the list to see details in a new view, with a distinct URL, or route.</p>\n<p>This step of the tutorial guides you through creating a shopping cart in the following phases:</p>\n<ul>\n<li>Update the product details view to include a <strong>Buy</strong> button, which adds the current product to a list of products that a cart service manages.</li>\n<li>Add a cart component, which displays the items in the cart.</li>\n<li>Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> to retrieve shipping data from a <code>.json</code> file.</li>\n</ul>\n<a id=\"create-cart-service\"></a>\n<h2 id=\"create-the-shopping-cart-service\">Create the shopping cart service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#create-the-shopping-cart-service\"><i class=\"material-icons\">link</i></a></h2>\n<p>In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's <a href=\"guide/glossary#dependency-injection-di\" title=\"Dependency injection definition\">dependency injection system</a>.</p>\n<p>Currently, users can view product information, and the application can simulate sharing and notifications about product changes.</p>\n<p>The next step is to build a way for users to add products to a cart.\nThis section walks you through adding a <strong>Buy</strong> button and setting up a cart service to store information about products in the cart.</p>\n<a id=\"generate-cart-service\"></a>\n<h3 id=\"define-a-cart-service\">Define a cart service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#define-a-cart-service\"><i class=\"material-icons\">link</i></a></h3>\n<ol>\n<li>\n<p>To generate a cart service, right click on the <code>app</code> folder, choose <strong>Angular Generator</strong>, and choose <strong>Service</strong>.\nName the new service <code>cart</code>.</p>\n<code-example header=\"src/app/cart.service.ts\" path=\"getting-started/src/app/cart.service.1.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>({\n providedIn: 'root'\n})\nexport class CartService {\n\n constructor() {}\n\n}\n\n\n</code-example>\n</li>\n<li>\n<p>In the <code>CartService</code> class, define an <code>items</code> property to store the array of the current products in the cart.</p>\n<code-example path=\"getting-started/src/app/cart.service.ts\" header=\"src/app/cart.service.ts\" region=\"props\">\nexport class CartService {\n items = [];\n}\n\n</code-example>\n</li>\n<li>\n<p>Define methods to add items to the cart, return cart items, and clear the cart items.</p>\n<code-example path=\"getting-started/src/app/cart.service.ts\" header=\"src/app/cart.service.ts\" region=\"methods\">\nexport class CartService {\n items = [];\n\n addToCart(product) {\n this.items.push(product);\n }\n\n getItems() {\n return this.items;\n }\n\n clearCart() {\n this.items = [];\n return this.items;\n }\n}\n\n</code-example>\n<ul>\n<li>\n<p>The <code>addToCart()</code> method appends a product to an array of <code>items</code>.</p>\n</li>\n<li>\n<p>The <code>getItems()</code> method collects the items users add to the cart and returns each item with its associated quantity.</p>\n</li>\n<li>\n<p>The <code>clearCart()</code> method returns an empty array of items, which empties the cart.</p>\n</li>\n</ul>\n</li>\n</ol>\n<a id=\"product-details-use-cart-service\"></a>\n<h3 id=\"use-the-cart-service\">Use the cart service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#use-the-cart-service\"><i class=\"material-icons\">link</i></a></h3>\n<p>This section walks you through using the <code>CartService</code> to add a product to the cart.</p>\n<ol>\n<li>\n<p>In <code>product-details.component.ts</code>, import the cart service.</p>\n<code-example header=\"src/app/product-details/product-details.component.ts\" path=\"getting-started/src/app/product-details/product-details.component.ts\" region=\"cart-service\">\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';\nimport { CartService } from '../cart.service';\n\n</code-example>\n</li>\n<li>\n<p>Inject the cart service by adding it to the <code>constructor()</code>.</p>\n<code-example path=\"getting-started/src/app/product-details/product-details.component.ts\" header=\"src/app/product-details/product-details.component.ts\" region=\"inject-cart-service\">\nexport class ProductDetailsComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n constructor(\n private route: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>,\n private cartService: CartService\n ) { }\n}\n\n\n</code-example>\n</li>\n<li>\n<p>Define the <code>addToCart()</code> method, which adds the current product to the cart.</p>\n<code-example path=\"getting-started/src/app/product-details/product-details.component.ts\" header=\"src/app/product-details/product-details.component.ts\" region=\"add-to-cart\">\nexport class ProductDetailsComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n addToCart(product) {\n this.cartService.addToCart(product);\n window.alert('Your product has been added to the cart!');\n }\n}\n\n\n</code-example>\n<p>The <code>addToCart()</code> method does the following:</p>\n<ul>\n<li>Takes the current <code>product</code> as an argument.</li>\n<li>Uses the <code>CartService</code> <code>addToCart()</code> method to add the product to the cart.</li>\n<li>Displays a message that you've added a product to the cart.</li>\n</ul>\n</li>\n<li>\n<p>In <code>product-details.component.html</code>, add a button with the label <strong>Buy</strong>, and bind the <code>click()</code> event to the <code>addToCart()</code> method.\nThis code updates the product details template with a <strong>Buy</strong> button that adds the current product to the cart.</p>\n<code-example header=\"src/app/product-details/product-details.component.html\" path=\"getting-started/src/app/product-details/product-details.component.html\">\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 <button (click)=\"addToCart(product)\">Buy</button>\n</div>\n\n\n</code-example>\n</li>\n<li>\n<p>Verify that the new <strong>Buy</strong> button appears as expected by refreshing the application and clicking on a product's name to display its details.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/product-details-buy.png\" alt=\"Display details for selected product with a Buy button\" width=\"259\" height=\"233\">\n</div>\n</li>\n<li>\n<p>Click the <strong>Buy</strong> button to add the product to the stored list of items in the cart and display a confirmation message.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/buy-alert.png\" alt=\"Display details for selected product with a Buy button\" width=\"329\" height=\"106\">\n</div>\n</li>\n</ol>\n<h2 id=\"create-the-cart-view\">Create the cart view<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#create-the-cart-view\"><i class=\"material-icons\">link</i></a></h2>\n<p>For customers to see their cart, you can create the cart view in two steps:</p>\n<ol>\n<li>Create a cart component and configure routing to the new component.</li>\n<li>Display the cart items.</li>\n</ol>\n<h3 id=\"set-up-the-cart-component\">Set up the cart component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#set-up-the-cart-component\"><i class=\"material-icons\">link</i></a></h3>\n<p> To create the cart view, follow the same steps you did to create the <code>ProductDetailsComponent</code> and configure routing for the new component.</p>\n<ol>\n<li>\n<p>Generate a cart component named <code>cart</code> by right-clicking the <code>app</code> folder, choosing <strong>Angular Generator</strong>, and <strong>Component</strong>.</p>\n<code-example header=\"src/app/cart/cart.component.ts\" path=\"getting-started/src/app/cart/cart.component.1.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-cart',\n templateUrl: './cart.component.html',\n styleUrls: ['./cart.component.css']\n})\nexport class CartComponent {\n\n constructor() { }\n\n}\n\n\n</code-example>\n<p>StackBlitz also generates an <code>ngOnInit()</code> by default in components. You can ignore the <code>CartComponent</code> <code>ngOnInit()</code> for this tutorial.</p>\n</li>\n<li>\n<p>Open <code>app.module.ts</code> and add a route for the component <code>CartComponent</code>, with a <code>path</code> of <code>cart</code>.</p>\n<code-example header=\"src/app/app.module.ts\" path=\"getting-started/src/app/app.module.ts\" region=\"cart-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 { path: 'cart', component: CartComponent },\n ])\n ],\n\n</code-example>\n</li>\n<li>\n<p>Update the <strong>Checkout</strong> button so that it routes to the <code>/cart</code> URL.\nIn <code>top-bar.component.html</code>, add a <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></code> directive pointing to <code>/cart</code>.</p>\n<code-example header=\"src/app/top-bar/top-bar.component.html\" path=\"getting-started/src/app/top-bar/top-bar.component.html\" region=\"cart-route\">\n<a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/cart\" class=\"button fancy-button\">\n <i class=\"material-icons\">shopping_cart</i>Checkout\n</a>\n\n</code-example>\n</li>\n<li>\n<p>Verify the new <code>CartComponent</code> works as expected by clicking the <strong>Checkout</strong> button.\nYou can see the \"cart works!\" default text, and the URL has the pattern <code>https://getting-started.stackblitz.io/cart</code>, where <code>getting-started.stackblitz.io</code> may be different for your StackBlitz project.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/cart-works.png\" alt=\"Display cart view before customizing\" width=\"259\" height=\"193\">\n</div>\n</li>\n</ol>\n<h3 id=\"display-the-cart-items\">Display the cart items<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#display-the-cart-items\"><i class=\"material-icons\">link</i></a></h3>\n<p>This section shows you how to use the cart service to display the products in the cart.</p>\n<ol>\n<li>\n<p>In <code>cart.component.ts</code>, import the <code>CartService</code> from the <code>cart.service.ts</code> file.</p>\n<code-example header=\"src/app/cart/cart.component.ts\" path=\"getting-started/src/app/cart/cart.component.2.ts\" region=\"imports\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { CartService } from '../cart.service';\n\n</code-example>\n</li>\n<li>\n<p>Inject the <code>CartService</code> so that the <code>CartComponent</code> can use it by adding it to the <code>constructor()</code>.</p>\n<code-example path=\"getting-started/src/app/cart/cart.component.2.ts\" header=\"src/app/cart/cart.component.ts\" region=\"inject-cart\">\nexport class CartComponent {\n\n constructor(\n private cartService: CartService\n ) { }\n}\n\n\n</code-example>\n</li>\n<li>\n<p>Define the <code>items</code> property to store the products in the cart.</p>\n<code-example path=\"getting-started/src/app/cart/cart.component.2.ts\" header=\"src/app/cart/cart.component.ts\" region=\"items\">\nexport class CartComponent {\n items = this.cartService.getItems();\n\n constructor(\n private cartService: CartService\n ) { }\n}\n\n\n</code-example>\n<p>This code sets the items using the <code>CartService</code> <code>getItems()</code> method.\nYou defined this method <a href=\"start/start-data#generate-cart-service\">when you created <code>cart.service.ts</code></a>.</p>\n</li>\n<li>\n<p>Update the cart template with a header, and use a <code><div></code> with an <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> to display each of the cart items with its name and price.\nThe resulting <code>CartComponent</code> template is as follows.</p>\n<code-example header=\"src/app/cart/cart.component.html\" path=\"getting-started/src/app/cart/cart.component.2.html\" region=\"prices\">\n<h3>Cart</h3>\n\n<div class=\"cart-item\" *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let item of items\">\n <span>{{ item.name }}</span>\n <span>{{ item.price | <a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a> }}</span>\n</div>\n\n</code-example>\n</li>\n<li>\n<p>Verify that your cart works as expected:</p>\n<ul>\n<li>Click <strong>My Store</strong></li>\n<li>Click on a product name to display its details.</li>\n<li>Click <strong>Buy</strong> to add the product to the cart.</li>\n<li>Click <strong>Checkout</strong> to see the cart.</li>\n</ul>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/cart-page-full.png\" alt=\"Cart view with products added\" width=\"259\" height=\"238\">\n</div>\n</li>\n</ol>\n<p>For more information about services, see <a href=\"guide/architecture-services\" title=\"Concepts > Intro to Services and DI\">Introduction to Services and Dependency Injection</a>.</p>\n<h2 id=\"retrieve-shipping-prices\">Retrieve shipping prices<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#retrieve-shipping-prices\"><i class=\"material-icons\">link</i></a></h2>\n<p>Servers often return data in the form of a stream.\nStreams are useful because they make it easy to transform the returned data and make modifications to the way you request that data.\nAngular <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> is a built-in way to fetch data from external APIs and provide them to your application as a stream.</p>\n<p>This section shows you how to use <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> to retrieve shipping prices from an external file.</p>\n<p>The application that StackBlitz generates for this guide comes with predefined shipping data in <code>assets/shipping.json</code>.\nUse this data to add shipping prices for items in the cart.</p>\n<code-example header=\"src/assets/shipping.json\" path=\"getting-started/src/assets/shipping.json\">\n[\n {\n \"type\": \"Overnight\",\n \"price\": 25.99\n },\n {\n \"type\": \"2-Day\",\n \"price\": 9.99\n },\n {\n \"type\": \"Postal\",\n \"price\": 2.99\n }\n]\n\n</code-example>\n<h3 id=\"configure-appmodule-to-use-httpclient\">Configure <code>AppModule</code> to use <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#configure-appmodule-to-use-httpclient\"><i class=\"material-icons\">link</i></a></h3>\n<p>To use Angular's <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>, you must configure your application to use <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code>.</p>\n<p>Angular's <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code> registers the providers your application needs to use the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> service throughout your application.</p>\n<ol>\n<li>\n<p>In <code>app.module.ts</code>, import <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code> from the <code>@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a></code> package at the top of the file with the other imports.\nAs there are a number of other imports, this code snippet omits them for brevity.\nBe sure to leave the existing imports in place.</p>\n<code-example header=\"src/app/app.module.ts\" path=\"getting-started/src/app/app.module.ts\" region=\"http-client-module-import\">\nimport { <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\n</code-example>\n</li>\n<li>\n<p>To register Angular's <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> providers globally, add <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code> to the <code>AppModule</code> <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>()</code> <code>imports</code> array.</p>\n<code-example path=\"getting-started/src/app/app.module.ts\" header=\"src/app/app.module.ts\" region=\"http-client-module\">\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/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</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 { path: 'cart', component: CartComponent },\n ])\n ],\n declarations: [\n AppComponent,\n TopBarComponent,\n ProductListComponent,\n ProductAlertsComponent,\n ProductDetailsComponent,\n CartComponent,\n ],\n bootstrap: [\n AppComponent\n ]\n})\nexport class AppModule { }\n\n\n</code-example>\n</li>\n</ol>\n<h3 id=\"configure-cartservice-to-use-httpclient\">Configure <code>CartService</code> to use <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#configure-cartservice-to-use-httpclient\"><i class=\"material-icons\">link</i></a></h3>\n<p>The next step is to inject the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> service into your service so your application can fetch data and interact with external APIs and resources.</p>\n<ol>\n<li>\n<p>In <code>cart.service.ts</code>, import <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> from the <code>@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a></code> package.</p>\n<code-example header=\"src/app/cart.service.ts\" path=\"getting-started/src/app/cart.service.ts\" region=\"import-http\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport { <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\n</code-example>\n</li>\n<li>\n<p>Inject <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> into the <code>CartService</code> <code>constructor()</code>.</p>\n<code-example path=\"getting-started/src/app/cart.service.ts\" header=\"src/app/cart.service.ts\" region=\"inject-http\">\nexport class CartService {\n items = [];\n\n constructor(\n private <a href=\"api/common/http\" class=\"code-anchor\">http</a>: <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a>\n ) {}\n}\n\n</code-example>\n</li>\n</ol>\n<h3 id=\"configure-cartservice-to-get-shipping-prices\">Configure <code>CartService</code> to get shipping prices<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#configure-cartservice-to-get-shipping-prices\"><i class=\"material-icons\">link</i></a></h3>\n<p>To get shipping data, from <code>shipping.json</code>, You can use the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> <code>get()</code> method.</p>\n<ol>\n<li>\n<p>In <code>cart.service.ts</code>, below the <code>clearCart()</code> method, define a new <code>getShippingPrices()</code> method that uses the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> <code>get()</code> method.</p>\n<code-example header=\"src/app/cart.service.ts\" path=\"getting-started/src/app/cart.service.ts\" region=\"get-shipping\">\nexport class CartService {\n getShippingPrices() {\n return this.http.get<{type: string, price: number}[]>('/assets/shipping.json');\n }\n}\n\n\n</code-example>\n</li>\n</ol>\n<p>For more information about Angular's <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>, see the <a href=\"guide/http\" title=\"Server interaction through HTTP\">Client-Server Interaction</a> guide.</p>\n<h2 id=\"create-a-shipping-component\">Create a shipping component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#create-a-shipping-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>Now that you've configured your application to retrieve shipping data, you can create a place to render that data.</p>\n<ol>\n<li>\n<p>Generate a new component named <code>shipping</code> by right-clicking the <code>app</code> folder, choosing <strong>Angular Generator</strong>, and selecting <strong>Component</strong>.</p>\n<code-example header=\"src/app/shipping/shipping.component.ts\" path=\"getting-started/src/app/shipping/shipping.component.1.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-shipping',\n templateUrl: './shipping.component.html',\n styleUrls: ['./shipping.component.css']\n})\nexport class ShippingComponent {\n\n constructor() { }\n\n}\n\n\n</code-example>\n</li>\n<li>\n<p>In <code>app.module.ts</code>, add a route for shipping.\nSpecify a <code>path</code> of <code>shipping</code> and a component of <code>ShippingComponent</code>.</p>\n<code-example header=\"src/app/app.module.ts\" path=\"getting-started/src/app/app.module.ts\" region=\"shipping-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/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</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 { path: 'cart', component: CartComponent },\n { path: 'shipping', component: ShippingComponent },\n ])\n ],\n declarations: [\n AppComponent,\n TopBarComponent,\n ProductListComponent,\n ProductAlertsComponent,\n ProductDetailsComponent,\n CartComponent,\n ShippingComponent\n ],\n bootstrap: [\n AppComponent\n ]\n})\nexport class AppModule { }\n\n\n</code-example>\n<p>There's no link to the new shipping component yet, but you can see its template in the preview pane by entering the URL its route specifies.\nThe URL has the pattern: <code>https://getting-started.stackblitz.io/shipping</code> where the <code>getting-started.stackblitz.io</code> part may be different for your StackBlitz project.</p>\n</li>\n</ol>\n<h3 id=\"configuring-the-shippingcomponent-to-use-cartservice\">Configuring the <code>ShippingComponent</code> to use <code>CartService</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#configuring-the-shippingcomponent-to-use-cartservice\"><i class=\"material-icons\">link</i></a></h3>\n<p>This section guides you through modifying the <code>ShippingComponent</code> to retrieve shipping data via HTTP from the <code>shipping.json</code> file.</p>\n<ol>\n<li>\n<p>In <code>shipping.component.ts</code>, import <code>CartService</code>.</p>\n<code-example header=\"src/app/shipping/shipping.component.ts\" path=\"getting-started/src/app/shipping/shipping.component.ts\" region=\"imports\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\nimport { CartService } from '../cart.service';\n\n</code-example>\n</li>\n<li>\n<p>Inject the cart service in the <code>ShippingComponent</code> <code>constructor()</code>.</p>\n<code-example path=\"getting-started/src/app/shipping/shipping.component.ts\" header=\"src/app/shipping/shipping.component.ts\" region=\"inject-cart-service\">\nconstructor(private cartService: CartService) {\n}\n\n</code-example>\n</li>\n<li>\n<p>Define a <code>shippingCosts</code> property that sets the <code>shippingCosts</code> property using the <code>getShippingPrices()</code> method from the <code>CartService</code>.</p>\n<code-example path=\"getting-started/src/app/shipping/shipping.component.ts\" header=\"src/app/shipping/shipping.component.ts\" region=\"props\">\nexport class ShippingComponent {\n shippingCosts = this.cartService.getShippingPrices();\n}\n\n\n</code-example>\n</li>\n<li>\n<p>Update the <code>ShippingComponent</code> template to display the shipping types and prices using the <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> pipe.</p>\n<code-example header=\"src/app/shipping/shipping.component.html\" path=\"getting-started/src/app/shipping/shipping.component.html\">\n<h3>Shipping Prices</h3>\n\n<div class=\"shipping-item\" *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let shipping of shippingCosts | <a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a>\">\n <span>{{ shipping.type }}</span>\n <span>{{ shipping.price | <a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a> }}</span>\n</div>\n\n\n</code-example>\n<p>The <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> pipe returns the latest value from a stream of data and continues to do so for the life of a given component.\nWhen Angular destroys that component, the <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> pipe automatically stops.\nFor detailed information about the <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> pipe, see the <a href=\"/api/common/AsyncPipe\">AsyncPipe API documentation</a>.</p>\n</li>\n<li>\n<p>Add a link from the <code>CartComponent</code> view to the <code>ShippingComponent</code> view.</p>\n<code-example header=\"src/app/cart/cart.component.html\" path=\"getting-started/src/app/cart/cart.component.2.html\">\n<h3>Cart</h3>\n\n<p>\n <a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/shipping\">Shipping Prices</a>\n</p>\n\n<div class=\"cart-item\" *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let item of items\">\n <span>{{ item.name }}</span>\n <span>{{ item.price | <a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a> }}</span>\n</div>\n\n\n</code-example>\n</li>\n<li>\n<p>Click the <strong>Checkout</strong> button to see the updated cart.\nRemember that changing the application causes the preview to refresh, which empties the cart.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/cart-empty-with-shipping-prices.png\" alt=\"Cart with link to shipping prices\" width=\"301\" height=\"208\">\n</div>\n<p>Click on the link to navigate to the shipping prices.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/shipping-prices.png\" alt=\"Display shipping prices\" width=\"301\" height=\"238\">\n</div>\n</li>\n</ol>\n<h2 id=\"whats-next\">What's next<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-data#whats-next\"><i class=\"material-icons\">link</i></a></h2>\n<p>You now have a store application with a product catalog, a shopping cart, and you can look up shipping prices.</p>\n<p>To continue exploring Angular:</p>\n<ul>\n<li>Continue to <a href=\"start/start-forms\" title=\"Forms for User Input\">Forms for User Input</a> to finish the application by adding the shopping cart view and a checkout form.</li>\n<li>Skip ahead to <a href=\"start/start-deployment\" title=\"Deployment\">Deployment</a> to move to local development, or deploy your application to Firebase or your own server.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - start/start-forms\n - start/start-routing\n-->\n<!-- links from this doc:\n - /api/common/AsyncPipe\n - api/common/AsyncPipe\n - api/common/CurrencyPipe\n - api/common/NgForOf\n - api/common/NgIf\n - api/common/http\n - api/common/http/HttpClient\n - api/common/http/HttpClientModule\n - api/core/Component\n - api/core/Injectable\n - api/core/NgModule\n - api/core/OnInit\n - api/forms/ReactiveFormsModule\n - api/platform-browser/BrowserModule\n - api/router/ActivatedRoute\n - api/router/RouterLink\n - guide/architecture-services\n - guide/glossary#dependency-injection-di\n - guide/http\n - start\n - start/start-data#configure-appmodule-to-use-httpclient\n - start/start-data#configure-cartservice-to-get-shipping-prices\n - start/start-data#configure-cartservice-to-use-httpclient\n - start/start-data#configuring-the-shippingcomponent-to-use-cartservice\n - start/start-data#create-a-shipping-component\n - start/start-data#create-the-cart-view\n - start/start-data#create-the-shopping-cart-service\n - start/start-data#define-a-cart-service\n - start/start-data#display-the-cart-items\n - start/start-data#generate-cart-service\n - start/start-data#managing-data\n - start/start-data#retrieve-shipping-prices\n - start/start-data#set-up-the-cart-component\n - start/start-data#use-the-cart-service\n - start/start-data#whats-next\n - start/start-deployment\n - start/start-forms\n - start/start-routing\n - https://github.com/angular/angular/edit/master/aio/content/start/start-data.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |