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

PR Close #29837

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

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

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

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

aio/content/examples/getting-started/src/app/cart/cart.component.3.html

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

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

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

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

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

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

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

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

@@ -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() { }
 

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

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