cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: cleanup code snippets for getting started example app (#29837)

Browse Source 
PR Close #29837
This commit is contained in:
Brandon 2019-04-11 09:44:50 -05:00 committed by Ben Lesh
parent 57c8f78c8f
commit 54289aec2d
11 changed files with 64 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/examples/getting-started/src/app/app.module.ts
View File

@ -43,8 +43,8 @@ import { ShippingComponent } from './shipping/shipping.component';
ProductListComponent, ProductListComponent,
ProductAlertsComponent, ProductAlertsComponent,
ProductDetailsComponent, ProductDetailsComponent,
// #enddocregion http-client-module
CartComponent, CartComponent,
// #enddocregion http-client-module
ShippingComponent ShippingComponent
// #docregion http-client-module // #docregion http-client-module
], ],

2
aio/content/examples/getting-started/src/app/cart.service.ts
View File

@ -35,5 +35,5 @@ export class CartService {
getShippingPrices() { getShippingPrices() {
return this.http.get('/assets/shipping.json'); return this.http.get('/assets/shipping.json');
} }
// #docregion props, methods, import-inject // #docregion props, methods, inject-http
} }

19
aio/content/examples/getting-started/src/app/cart/cart.component.3.html Normal file
View File

@ -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 -->

2
aio/content/examples/getting-started/src/app/cart/cart.component.3.ts
View File

@ -13,7 +13,7 @@ import { CartService } from '../cart.service';
export class CartComponent { export class CartComponent {
items; items;
constructor( constructor(
private cartService: CartService private cartService: CartService
) { ) {
this.items = this.cartService.getItems(); this.items = this.cartService.getItems();

5
aio/content/examples/getting-started/src/app/cart/cart.component.html
View File

@ -1,5 +1,5 @@
<!-- #docplaster --> <!-- #docplaster -->
<!-- #docregion checkout-form-1, checkout-form-2 --> <!-- #docregion checkout-form-2 -->
<h3>Cart</h3> <h3>Cart</h3>
<p> <p>
@ -11,8 +11,10 @@
<span>{{ item.price | currency }}</span> <span>{{ item.price | currency }}</span>
</div> </div>
<!-- #docregion checkout-form-1 -->
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)"> <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
<!-- #enddocregion checkout-form-1 --> <!-- #enddocregion checkout-form-1 -->
<div> <div>
<label>Name</label> <label>Name</label>
<input type="text" formControlName="name"> <input type="text" formControlName="name">
@ -24,5 +26,6 @@
</div> </div>
<button class="button" type="submit">Purchase</button> <button class="button" type="submit">Purchase</button>
<!-- #docregion checkout-form-1 --> <!-- #docregion checkout-form-1 -->
</form> </form>

10
aio/content/examples/getting-started/src/app/cart/cart.component.ts
View File

@ -11,22 +11,28 @@ import { CartService } from '../cart.service';
templateUrl: './cart.component.html', templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css'] styleUrls: ['./cart.component.css']
}) })
// #docregion props-services, submit // #docregion props-services, submit, inject-form-builder, checkout-form, checkout-form-group
export class CartComponent { export class CartComponent {
items; items;
// #enddocregion inject-form-builder
checkoutForm; checkoutForm;
// #enddocregion checkout-form
// #docregion inject-form-builder
constructor( constructor(
private cartService: CartService, private cartService: CartService,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
) { ) {
// #enddocregion inject-form-builder
this.items = this.cartService.getItems(); this.items = this.cartService.getItems();
this.checkoutForm = this.formBuilder.group({ this.checkoutForm = this.formBuilder.group({
name: '', name: '',
address: '' address: ''
}); });
// #docregion inject-form-builder
} }
// #enddocregion inject-form-builder, checkout-form-group
// #enddocregion props-services // #enddocregion props-services
onSubmit(customerData) { onSubmit(customerData) {
@ -36,5 +42,5 @@ export class CartComponent {
this.items = this.cartService.clearCart(); this.items = this.cartService.clearCart();
this.checkoutForm.reset(); this.checkoutForm.reset();
} }
// #docregion props-services // #docregion props-services, inject-form-builder, checkout-form, checkout-form-group
} }

2
aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts
View File

@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './shipping.component.html', templateUrl: './shipping.component.html',
styleUrls: ['./shipping.component.css'] styleUrls: ['./shipping.component.css']
}) })
export class Shipping1Component implements OnInit { export class ShippingComponent implements OnInit {
constructor() { } constructor() { }

4
aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
View File

@ -15,8 +15,12 @@ export class ShippingComponent {
shippingCosts; shippingCosts;
// #enddocregion props // #enddocregion props
// #docregion inject-cart-service
constructor(private cartService: CartService) { constructor(private cartService: CartService) {
// #enddocregion inject-cart-service
this.shippingCosts = this.cartService.getShippingPrices(); this.shippingCosts = this.cartService.getShippingPrices();
// #docregion inject-cart-service
} }
// #enddocregion inject-cart-service
// #docregion props // #docregion props
} }

12
aio/content/getting-started/data.md
View File

@ -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: 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. 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: 1. Inject the cart service into the `ShippingComponent` class:
``` <code-example path="getting-started/src/app/shipping/shipping.component.ts" region="inject-cart-service"></code-example>
constructor(
private cartService: CartService
) { }
```
<!--
To do: Create docregion
-->
1. Set the `shippingCosts` property using the `getShippingPrices()` method from cart service. 1. Set the `shippingCosts` property using the `getShippingPrices()` method from cart service.

95
aio/content/getting-started/forms.md
View File

@ -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. 1. Inject the `FormBuilder` service.
``` <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="inject-form-builder">
export class CartComponent { </code-example>
items;
constructor(
private cartService: CartService,
private formBuilder: FormBuilder,
) { }
}
```
<!--
To do: Replace with docregion
-->
1. In the `CartComponent` class, define the `checkoutForm` property to store the form model. 1. In the `CartComponent` class, define the `checkoutForm` property to store the form model.
``` <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="checkout-form">
export class CartComponent { </code-example>
items;
checkoutForm;
}
```
<!--
To do: Replace with docregion
-->
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. 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.
``` <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="checkout-form-group" linenums="false">
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> </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. 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.
@ -103,48 +59,17 @@ 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. 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.
``` <code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.3.html" region="checkout-form">
<form [formGroup]="checkoutForm"> </code-example>
<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
-->
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. 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.
``` <code-example path="getting-started/src/app/cart/cart.component.html" region="checkout-form-1">
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)"> </code-example>
...
</form>
```
<!--
To do: Replace with docregion
-->
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: 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 path="getting-started/src/app/cart/cart.component.html" region="checkout-form-2">
</code-example> </code-example>
After putting a few items in the cart, users can now review their items, enter name and address, and submit their purchase: After putting a few items in the cart, users can now review their items, enter name and address, and submit their purchase:

4
aio/content/getting-started/routing.md
View File

@ -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`. 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> </code-example>
1. Define the `product` property and inject the `ActivatedRoute` into the constructor. 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> </code-example>
The `ActivatedRoute` is specific to each routed component loaded by the Angular Router. It contains information about the The `ActivatedRoute` is specific to each routed component loaded by the Angular Router. It contains information about the