docs: cleanup code snippets for getting started example app (#29837)
PR Close #29837
This commit is contained in:
Brandon
Ben Lesh
parent
57c8f78c8f
commit
54289aec2d
|
|
@ -43,8 +43,8 @@ import { ShippingComponent } from './shipping/shipping.component';
|
|||
ProductListComponent,
|
||||
ProductAlertsComponent,
|
||||
ProductDetailsComponent,
|
||||
// #enddocregion http-client-module
|
||||
CartComponent,
|
||||
// #enddocregion http-client-module
|
||||
ShippingComponent
|
||||
// #docregion http-client-module
|
||||
],
|
||||
|
|
|
|||
|
|
@ -35,5 +35,5 @@ export class CartService {
|
|||
getShippingPrices() {
|
||||
return this.http.get('/assets/shipping.json');
|
||||
}
|
||||
// #docregion props, methods, import-inject
|
||||
// #docregion props, methods, inject-http
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!-- #docplaster -->
|
||||
<h3>Cart</h3>
|
||||
|
||||
<p>
|
||||
<a routerLink="/shipping">Shipping Prices</a>
|
||||
</p>
|
||||
|
||||
<div class="cart-item" *ngFor="let item of items">
|
||||
<span>{{ item.name }} </span>
|
||||
<span>{{ item.price | currency }}</span>
|
||||
</div>
|
||||
|
||||
<!-- #docregion checkout-form-->
|
||||
<form [formGroup]="checkoutForm">
|
||||
|
||||
<button class="button" type="submit">Purchase</button>
|
||||
|
||||
</form>
|
||||
<!-- #enddocregion checkout-form -->
|
||||
|
|
@ -13,7 +13,7 @@ import { CartService } from '../cart.service';
|
|||
export class CartComponent {
|
||||
items;
|
||||
|
||||
constructor(
|
||||
constructor(
|
||||
private cartService: CartService
|
||||
) {
|
||||
this.items = this.cartService.getItems();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!-- #docplaster -->
|
||||
<!-- #docregion checkout-form-1, checkout-form-2 -->
|
||||
<!-- #docregion checkout-form-2 -->
|
||||
<h3>Cart</h3>
|
||||
|
||||
<p>
|
||||
|
|
@ -11,8 +11,10 @@
|
|||
<span>{{ item.price | currency }}</span>
|
||||
</div>
|
||||
|
||||
<!-- #docregion checkout-form-1 -->
|
||||
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
|
||||
<!-- #enddocregion checkout-form-1 -->
|
||||
<!-- #enddocregion checkout-form-1 -->
|
||||
|
||||
<div>
|
||||
<label>Name</label>
|
||||
<input type="text" formControlName="name">
|
||||
|
|
@ -24,5 +26,6 @@
|
|||
</div>
|
||||
|
||||
<button class="button" type="submit">Purchase</button>
|
||||
<!-- #docregion checkout-form-1 -->
|
||||
|
||||
<!-- #docregion checkout-form-1 -->
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -11,22 +11,28 @@ import { CartService } from '../cart.service';
|
|||
templateUrl: './cart.component.html',
|
||||
styleUrls: ['./cart.component.css']
|
||||
})
|
||||
// #docregion props-services, submit
|
||||
// #docregion props-services, submit, inject-form-builder, checkout-form, checkout-form-group
|
||||
export class CartComponent {
|
||||
items;
|
||||
// #enddocregion inject-form-builder
|
||||
checkoutForm;
|
||||
// #enddocregion checkout-form
|
||||
// #docregion inject-form-builder
|
||||
|
||||
constructor(
|
||||
private cartService: CartService,
|
||||
private formBuilder: FormBuilder,
|
||||
) {
|
||||
this.items = this.cartService.getItems();
|
||||
) {
|
||||
// #enddocregion inject-form-builder
|
||||
this.items = this.cartService.getItems();
|
||||
|
||||
this.checkoutForm = this.formBuilder.group({
|
||||
name: '',
|
||||
address: ''
|
||||
});
|
||||
this.checkoutForm = this.formBuilder.group({
|
||||
name: '',
|
||||
address: ''
|
||||
});
|
||||
// #docregion inject-form-builder
|
||||
}
|
||||
// #enddocregion inject-form-builder, checkout-form-group
|
||||
|
||||
// #enddocregion props-services
|
||||
onSubmit(customerData) {
|
||||
|
|
@ -36,5 +42,5 @@ export class CartComponent {
|
|||
this.items = this.cartService.clearCart();
|
||||
this.checkoutForm.reset();
|
||||
}
|
||||
// #docregion props-services
|
||||
// #docregion props-services, inject-form-builder, checkout-form, checkout-form-group
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
|
|||
templateUrl: './shipping.component.html',
|
||||
styleUrls: ['./shipping.component.css']
|
||||
})
|
||||
export class Shipping1Component implements OnInit {
|
||||
export class ShippingComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,12 @@ export class ShippingComponent {
|
|||
shippingCosts;
|
||||
// #enddocregion props
|
||||
|
||||
// #docregion inject-cart-service
|
||||
constructor(private cartService: CartService) {
|
||||
// #enddocregion inject-cart-service
|
||||
this.shippingCosts = this.cartService.getShippingPrices();
|
||||
// #docregion inject-cart-service
|
||||
}
|
||||
// #enddocregion inject-cart-service
|
||||
// #docregion props
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ Later, in the [Forms](getting-started/forms "Getting Started: Forms") part of th
|
|||
|
||||
1. Define methods to add items to the cart, return cart items, and clear the cart items:
|
||||
|
||||
<code-example path="getting-started/src/app/cart.service.ts" region="methods"></code-example>
|
||||
<code-example path="getting-started/src/app/cart.service.ts" region="methods" linenums="false"></code-example>
|
||||
|
||||
<!--
|
||||
To check: StackBlitz includes the constructor. If it's important (and not obvious) that the methods be below the constructor, then we should show it or say something.
|
||||
|
|
@ -341,15 +341,7 @@ Now that your app can retrieve shipping data, you'll create a shipping component
|
|||
|
||||
1. Inject the cart service into the `ShippingComponent` class:
|
||||
|
||||
```
|
||||
constructor(
|
||||
private cartService: CartService
|
||||
) { }
|
||||
```
|
||||
|
||||
<!--
|
||||
To do: Create docregion
|
||||
-->
|
||||
<code-example path="getting-started/src/app/shipping/shipping.component.ts" region="inject-cart-service"></code-example>
|
||||
|
||||
1. Set the `shippingCosts` property using the `getShippingPrices()` method from cart service.
|
||||
|
||||
|
|
|
|||
|
|
@ -25,62 +25,18 @@ First, you'll set up the checkout form model. The form model is the source of tr
|
|||
|
||||
1. Inject the `FormBuilder` service.
|
||||
|
||||
```
|
||||
export class CartComponent {
|
||||
items;
|
||||
|
||||
constructor(
|
||||
private cartService: CartService,
|
||||
private formBuilder: FormBuilder,
|
||||
) { }
|
||||
}
|
||||
```
|
||||
|
||||
<!--
|
||||
To do: Replace with docregion
|
||||
-->
|
||||
<code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="inject-form-builder">
|
||||
</code-example>
|
||||
|
||||
1. In the `CartComponent` class, define the `checkoutForm` property to store the form model.
|
||||
|
||||
```
|
||||
export class CartComponent {
|
||||
items;
|
||||
checkoutForm;
|
||||
}
|
||||
```
|
||||
<!--
|
||||
To do: Replace with docregion
|
||||
-->
|
||||
<code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="checkout-form">
|
||||
</code-example>
|
||||
|
||||
1. During checkout, the app will prompt the user for a name and address. So that you can gather that information later, set the `checkoutForm` property with a form model containing `name` and `address` fields, using the `FormBuilder#group()` method.
|
||||
|
||||
```
|
||||
export class CartComponent {
|
||||
items;
|
||||
checkoutForm;
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private cartService: CartService
|
||||
) {
|
||||
this.items = this.cartService.getItems();
|
||||
|
||||
this.checkoutForm = this.formBuilder.group({
|
||||
name: '',
|
||||
address: ''
|
||||
});
|
||||
}
|
||||
```
|
||||
<!--
|
||||
To do: Replace with docregion
|
||||
--->
|
||||
|
||||
<!--
|
||||
The resulting `CartComponent` class should look like this:
|
||||
|
||||
<code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="props-services">
|
||||
<code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="checkout-form-group" linenums="false">
|
||||
</code-example>
|
||||
-->
|
||||
|
||||
1. For the checkout process, users need to be able to submit the form data (their name and address). When the order is submitted, the form should reset and the cart should clear.
|
||||
|
||||
|
|
@ -88,8 +44,8 @@ First, you'll set up the checkout form model. The form model is the source of tr
|
|||
|
||||
The entire cart component is shown below:
|
||||
|
||||
<code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts">
|
||||
</code-example>
|
||||
<code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts">
|
||||
</code-example>
|
||||
|
||||
The form model is defined in the component class. To reflect the model in the view, you'll need a checkout form.
|
||||
|
||||
|
|
@ -103,49 +59,18 @@ Next, you'll add a checkout form at the bottom of the "Cart" page.
|
|||
|
||||
1. Use a `formGroup` property binding to bind the `checkoutForm` to the `form` tag in the template. Also include a "Purchase" button to submit the form.
|
||||
|
||||
```
|
||||
<form [formGroup]="checkoutForm">
|
||||
|
||||
<button class="button" type="submit">Purchase</button>
|
||||
|
||||
</form>
|
||||
```
|
||||
|
||||
<!--
|
||||
Note: The preview might contain an error message, which will be resolved by the following steps.
|
||||
To do: Replace with docregion
|
||||
If you define the name and address fields here, it generates and error in the preview.
|
||||
I had to add the formGroup property before the message would resolve.
|
||||
-->
|
||||
|
||||
<!--
|
||||
1. Use a `formGroup` property binding to bind the `checkoutForm` to the `form` tag in the template.
|
||||
|
||||
```
|
||||
<form [formGroup]="checkoutForm">
|
||||
...
|
||||
</form>
|
||||
```
|
||||
|
||||
To do: Replace with docregion
|
||||
-->
|
||||
<code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.3.html" region="checkout-form">
|
||||
</code-example>
|
||||
|
||||
1. On the `form` tag, use an `ngSubmit` event binding to listen for the form submission and call the `onSubmit()` method with the `checkoutForm` value.
|
||||
|
||||
```
|
||||
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
|
||||
...
|
||||
</form>
|
||||
```
|
||||
|
||||
<!--
|
||||
To do: Replace with docregion
|
||||
-->
|
||||
<code-example path="getting-started/src/app/cart/cart.component.html" region="checkout-form-1">
|
||||
</code-example>
|
||||
|
||||
1. Add input fields for `name` and `address`. Use the `formControlName` attribute binding to bind the `checkoutForm` form controls for `name` and `address` to their input fields. The final complete component is shown below:
|
||||
|
||||
<code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.html" region="checkout-form-2">
|
||||
</code-example>
|
||||
<code-example path="getting-started/src/app/cart/cart.component.html" region="checkout-form-2">
|
||||
</code-example>
|
||||
|
||||
After putting a few items in the cart, users can now review their items, enter name and address, and submit their purchase:
|
||||
|
||||
|
|
|
|||
|
|
@ -70,12 +70,12 @@ The product details component handles the display of each product. The Angular R
|
|||
|
||||
1. Import `ActivatedRoute` from the `@angular/router` package, and the `products` array from `../products`.
|
||||
|
||||
<code-example header="src/app/product-details/product-details.component.1.ts" path="getting-started/src/app/product-details/product-details.component.1.ts" region="imports">
|
||||
<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">
|
||||
</code-example>
|
||||
|
||||
1. Define the `product` property and inject the `ActivatedRoute` into the constructor.
|
||||
|
||||
<code-example path="getting-started/src/app/product-details/product-details.component.1.ts" region="props-methods">
|
||||
<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">
|
||||
</code-example>
|
||||
|
||||
The `ActivatedRoute` is specific to each routed component loaded by the Angular Router. It contains information about the
|
||||
|
|
|
|||
Loading…
Reference in New Issue