docs: add new getting started guide (#27684)

PR Close #27684

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

@@ -0,0 +1,5 @@
+<app-top-bar></app-top-bar>
+
+<div class="container">
+  <router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+}

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

@@ -0,0 +1,55 @@
+// #docplaster
+// #docregion http-client-module-import, http-client-module
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
+// #enddocregion http-client-module-import
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { TopBarComponent } from './top-bar/top-bar.component';
+import { ProductListComponent } from './product-list/product-list.component';
+import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
+import { ProductDetailsComponent } from './product-details/product-details.component';
+// #enddocregion http-client-module
+import { CartComponent } from './cart/cart.component';
+import { ShippingComponent } from './shipping/shipping.component';
+
+// #docregion product-details-route, http-client-module, shipping-route, cart-route
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    // #enddocregion product-details-route, cart-route
+    HttpClientModule,
+    // #docregion product-details-route, cart-route
+    ReactiveFormsModule,
+    RouterModule.forRoot([
+      { path: '', component: ProductListComponent },
+      { path: 'products/:productId', component: ProductDetailsComponent },
+// #enddocregion product-details-route
+      { path: 'cart', component: CartComponent },
+// #enddocregion cart-route, http-client-module
+      { path: 'shipping', component: ShippingComponent },
+// #enddocregion shipping-route
+// #docregion product-details-route, http-client-module, shipping-route, cart-route
+    ])
+  ],
+  // #enddocregion product-details-route, cart-route
+  declarations: [
+    AppComponent,
+    TopBarComponent,
+    ProductListComponent,
+    ProductAlertsComponent,
+    ProductDetailsComponent,
+// #enddocregion http-client-module
+    CartComponent,
+    ShippingComponent
+// #docregion http-client-module
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+export class AppModule { }

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

@@ -0,0 +1,13 @@
+// #docplaster
+// #docregion
+import { Injectable } from '@angular/core';
+
+// #docregion v1
+@Injectable({
+  providedIn: 'root'
+})
+export class CartService {
+
+  constructor() {}
+
+}

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

@@ -0,0 +1,39 @@
+// #docplaster
+// #docregion import-http
+import { Injectable } from '@angular/core';
+
+import { HttpClient } from '@angular/common/http';
+// #enddocregion import-http
+@Injectable({
+  providedIn: 'root'
+})
+// #docregion props, methods, inject-http, get-shipping
+export class CartService {
+  items = [];
+// #enddocregion props, methods
+
+  constructor(
+    private http: HttpClient
+  ) {}
+// #enddocregion inject-http
+// #docregion methods
+
+  addToCart(product) {
+    this.items.push(product);
+  }
+
+  getItems() {
+    return this.items;
+  }
+
+  clearCart() {
+    this.items = [];
+    return this.items;
+  }
+// #enddocregion methods
+
+  getShippingPrices() {
+    return this.http.get('/assets/shipping.json');
+  }
+// #docregion props, methods, import-inject
+}

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+export class CartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,15 @@
+<!-- #docplaster -->
+<!-- #docregion prices -->
+<h3>Cart</h3>
+<!-- #enddocregion prices -->
+
+<p>
+  <a routerLink="/shipping">Shipping Prices</a>
+</p>
+<!-- #docregion prices -->
+
+<div class="cart-item" *ngFor="let item of items">
+  <span>{{ item.name }} </span>
+  <span>{{ item.price | currency }}</span>
+</div>
+<!-- #enddocregion prices -->

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

@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion imports
+import { Component } from '@angular/core';
+import { CartService } from '../cart.service';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+// #docregion inject-cart, items, submit
+export class CartComponent {
+// #enddocregion inject-cart
+  items;
+// #docregion inject-cart
+
+  constructor(
+    private cartService: CartService
+  ) { }
+}

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

@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion imports
+import { Component } from '@angular/core';
+import { CartService } from '../cart.service';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+// #docregion props-services, submit
+export class CartComponent {
+  items;
+
+constructor(
+    private cartService: CartService
+  ) {
+    this.items = this.cartService.getItems();
+  }
+}

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

@@ -0,0 +1,28 @@
+<!-- #docplaster -->
+<!-- #docregion checkout-form-1, checkout-form-2 -->
+<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>
+
+<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
+<!-- #enddocregion checkout-form-1 -->  
+  <div>
+    <label>Name</label>
+    <input type="text" formControlName="name">
+  </div>
+
+  <div>
+    <label>Address</label>
+    <input type="text" formControlName="address">
+  </div>
+
+  <button class="button" type="submit">Purchase</button>
+<!-- #docregion checkout-form-1 -->  
+</form>

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

@@ -0,0 +1,40 @@
+// #docplaster
+// #docregion imports
+import { Component } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+
+import { CartService } from '../cart.service';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+// #docregion props-services, submit
+export class CartComponent {
+  items;
+  checkoutForm;
+
+  constructor(
+    private cartService: CartService,
+    private formBuilder: FormBuilder,
+    ) {
+      this.items = this.cartService.getItems();
+
+      this.checkoutForm = this.formBuilder.group({
+        name: '',
+        address: ''
+      });
+  }
+
+  // #enddocregion props-services
+  onSubmit(customerData) {
+    // Process checkout data here
+    console.warn('Your order has been submitted', customerData);
+
+    this.items = this.cartService.clearCart();
+    this.checkoutForm.reset();
+  }
+  // #docregion props-services
+}

aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.html

@@ -0,0 +1,3 @@
+<p *ngIf="product.price > 700">
+  <button>Notify Me</button>
+</p>

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

@@ -0,0 +1,19 @@
+// #docplaster
+// #docregion as-generated, imports
+import { Component } from '@angular/core';
+// #enddocregion as-generated
+import { Input } from '@angular/core';
+// #enddocregion imports
+// #docregion as-generated
+
+@Component({
+  selector: 'app-product-alerts',
+  templateUrl: './product-alerts.component.html',
+  styleUrls: ['./product-alerts.component.css']
+})
+// #docregion input-decorator
+export class ProductAlertsComponent {
+// #enddocregion as-generated
+  @Input() product;
+// #docregion as-generated
+}

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

@@ -0,0 +1,3 @@
+<p *ngIf="product.price > 700">
+  <button (click)="notify.emit()">Notify Me</button>
+</p>

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

@@ -0,0 +1,17 @@
+// #docplaster
+// #docregion imports
+import { Component } from '@angular/core';
+import { Input } from '@angular/core';
+import { Output, EventEmitter } from '@angular/core';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-product-alerts',
+  templateUrl: './product-alerts.component.html',
+  styleUrls: ['./product-alerts.component.css']
+})
+// #docregion input-output
+export class ProductAlertsComponent {
+  @Input() product;
+  @Output() notify = new EventEmitter();
+}

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

@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion imports
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { products } from '../products';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-product-details',
+  templateUrl: './product-details.component.html',
+  styleUrls: ['./product-details.component.css']
+})
+// #docregion props-methods, add-to-cart
+export class ProductDetailsComponent implements OnInit {
+  product;
+
+  constructor(
+    private route: ActivatedRoute,
+  ) { }
+
+  // #enddocregion props-methods
+  // #docregion get-product
+  ngOnInit() {
+    this.route.paramMap.subscribe(params => {
+      this.product = products[+params.get('productId')];
+    });
+  }
+  // #enddocregion get-product
+  // #docregion props-methods
+}

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

@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion details -->
+<h2>Product Details</h2>
+
+<div *ngIf="product">
+  <h3>{{ product.name }}</h3>
+  <h4>{{ product.price | currency }}</h4>
+  <p>{{ product.description }}</p>
+
+<!-- #enddocregion details -->
+  <button (click)="addToCart(product)">Buy</button>
+<!-- #docregion details -->  
+</div>

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

@@ -0,0 +1,46 @@
+// #docplaster
+// #docregion imports, cart-service
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { products } from '../products';
+// #enddocregion imports
+import { CartService } from '../cart.service';
+// #enddocregion cart-service
+
+@Component({
+  selector: 'app-product-details',
+  templateUrl: './product-details.component.html',
+  styleUrls: ['./product-details.component.css']
+})
+// #docregion props-methods, get-product, inject-cart-service, add-to-cart
+export class ProductDetailsComponent implements OnInit {
+// #enddocregion add-to-cart, get-product, inject-cart-service
+  product;
+
+// #docregion inject-cart-service
+  constructor(
+    private route: ActivatedRoute,
+// #enddocregion props-methods
+    private cartService: CartService
+// #docregion props-methods
+  ) { }
+// #enddocregion inject-cart-service
+
+// #docregion get-product
+  ngOnInit() {
+// #enddocregion props-methods
+    this.route.paramMap.subscribe(params => {
+      this.product = products[+params.get('productId')];
+    });
+// #docregion props-methods
+  }
+
+// #enddocregion props-methods, get-product
+// #docregion add-to-cart
+  addToCart(product) {
+    window.alert('Your product has been added to the cart!');
+    this.cartService.addToCart(product);
+  }
+// #docregion props-methods, get-product, inject-cart-service
+}

aio/content/examples/getting-started/src/app/product-list/product-list.component.1.html

@@ -0,0 +1 @@
+<h2>Products</h2>

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { products } from '../products';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  styleUrls: ['./product-list.component.css']
+})
+export class ProductListComponent {
+  products = products;
+
+  share() {
+    window.alert('The product has been shared!');
+  }
+}

aio/content/examples/getting-started/src/app/product-list/product-list.component.2.html

@@ -0,0 +1,20 @@
+<!-- #docplaster -->
+<!-- #docregion ngfor, interpolation -->
+<h2>Products</h2>
+
+<div *ngFor="let product of products">
+<!-- #enddocregion ngfor -->
+
+  <h3>
+<!-- #enddocregion interpolation -->
+    <a [title]="product.name + ' details'">
+<!-- #docregion interpolation -->
+      {{ product.name }}
+<!-- #enddocregion interpolation -->
+    </a>
+<!-- #docregion interpolation -->
+  </h3>
+
+<!-- #docregion ngfor -->
+</div>
+<!-- #enddocregion ngfor, interpolation -->

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

@@ -0,0 +1,15 @@
+<h2>Products</h2>
+
+<div *ngFor="let product of products">
+
+  <h3>
+    <a [title]="product.name + ' details'">
+      {{ product.name }}
+    </a>
+  </h3>
+
+  <p *ngIf="product.description">
+    Description: {{ product.description }}
+  </p>
+
+</div>

aio/content/examples/getting-started/src/app/product-list/product-list.component.4.html

@@ -0,0 +1,19 @@
+<h2>Products</h2>
+
+<div *ngFor="let product of products">
+
+  <h3>
+    <a [title]="product.name + ' details'">
+      {{ product.name }}
+    </a>
+  </h3>
+
+  <p *ngIf="product.description">
+    Description: {{ product.description }}
+  </p>
+
+  <button (click)="share()">
+    Share
+  </button>
+
+</div>

aio/content/examples/getting-started/src/app/product-list/product-list.component.5.html

@@ -0,0 +1,28 @@
+<h2>Products</h2>
+
+<div *ngFor="let product of products">
+
+<!-- #docregion product-details -->
+  <h3>
+    <a [title]="product.name + ' details'">
+      {{ product.name }}
+    </a>
+  </h3>
+<!-- #enddocregion product-details -->
+
+  <p *ngIf="product.description">
+    Description: {{ product.description }}
+  </p>
+
+<!-- #docregion app-product-alerts -->
+  <button (click)="share()">
+    Share
+  </button>
+
+  <app-product-alerts
+    [product]="product">
+  </app-product-alerts>
+<!-- #enddocregion app-product-alerts -->
+
+</div>
+

aio/content/examples/getting-started/src/app/product-list/product-list.component.6.html

@@ -0,0 +1,27 @@
+<h2>Products</h2>
+
+<div *ngFor="let product of products">
+
+  <h3>
+    <a [title]="product.name + ' details'">
+      {{ product.name }}
+    </a>
+  </h3>
+
+  <p *ngIf="product.description">
+    Description: {{ product.description }}
+  </p>
+
+<!-- #docregion on-notify -->
+  <button (click)="share()">
+    Share
+  </button>
+
+  <app-product-alerts
+    [product]="product" 
+    (notify)="onNotify()">
+  </app-product-alerts>
+<!-- #enddocregion on-notify -->
+
+</div>
+

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

@@ -0,0 +1,26 @@
+<h2>Products</h2>
+
+<!-- #docregion router-link -->
+<div *ngFor="let product of products; index as productId">
+
+  <h3>
+    <a [title]="product.name + ' details'" [routerLink]="['/products', productId]">
+      {{ product.name }}
+    </a>
+  </h3>
+<!-- #enddocregion router-link -->  
+  <p *ngIf="product.description">
+    Description: {{ product.description }}
+  </p>
+  
+  <button (click)="share()">
+    Share
+  </button>
+  
+  <app-product-alerts
+    [product]="product"
+    (notify)="onNotify()">
+  </app-product-alerts>
+<!-- #docregion router-link -->
+</div>
+<!-- #enddocregion router-link -->

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

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+import { products } from '../products';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  styleUrls: ['./product-list.component.css']
+})
+// #docregion on-notify
+export class ProductListComponent {
+  products = products;
+
+  share() {
+    window.alert('The product has been shared!');
+  }
+
+  onNotify() {
+    window.alert('You will be notified when the product goes on sale');
+  }
+}

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

@@ -0,0 +1,17 @@
+export const products = [
+  {
+    name: 'Phone XL',
+    price: 799,
+    description: 'A large phone with one of the best screens'
+  },
+  {
+    name: 'Phone Mini',
+    price: 699,
+    description: 'A great phone with one of the best cameras'
+  },
+  {
+    name: 'Phone Standard',
+    price: 299,
+    description: ''
+  }
+];

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-shipping',
+  templateUrl: './shipping.component.html',
+  styleUrls: ['./shipping.component.css']
+})
+export class Shipping1Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,6 @@
+<h3>Shipping Prices</h3>
+
+<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
+  <span>{{ shipping.type }} </span>
+  <span>{{ shipping.price | currency }}</span>
+</div>

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

@@ -0,0 +1,22 @@
+// #docplaster
+// #docregion imports
+import { Component } from '@angular/core';
+
+import { CartService } from '../cart.service';
+// #enddocregion
+
+@Component({
+  selector: 'app-shipping',
+  templateUrl: './shipping.component.html',
+  styleUrls: ['./shipping.component.css']
+})
+// #docregion props, ctor
+export class ShippingComponent {
+  shippingCosts;
+// #enddocregion props
+
+  constructor(private cartService: CartService) {
+    this.shippingCosts = this.cartService.getShippingPrices();
+  }
+// #docregion props
+}

aio/content/examples/getting-started/src/app/top-bar/top-bar.component.1.html

@@ -0,0 +1,7 @@
+<a>
+  <h1>My Store</h1>
+</a>
+
+<a class="button fancy-button">
+  <i class="material-icons">shopping_cart</i>Checkout
+</a>

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

@@ -0,0 +1,7 @@
+<a [routerLink]="['/']">
+  <h1>My Store</h1>
+</a>
+
+<a [routerLink]="['/cart']" class="button fancy-button">
+  <i class="material-icons">shopping_cart</i>Checkout
+</a>

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-top-bar',
+  templateUrl: './top-bar.component.html',
+  styleUrls: ['./top-bar.component.css']
+})
+export class TopBarComponent {
+
+}