5 lines
32 KiB
JSON
Raw Permalink Normal View History

{
"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 r
}