docs: add new getting started guide (angular#27684)

PR Close angular#27684

.github/CODEOWNERS

@@ -754,6 +754,10 @@ testing/**                                                      @angular/fw-test
 /aio/content/examples/toh-pt4/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/toh-pt5/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/toh-pt6/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/getting-started-v0/**                     @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/getting-started/**                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/getting-started/**                                 @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/getting-started/**                    @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 

aio/content/examples/getting-started-v0/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,21 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Getting Started V0', () => {
+  beforeEach(() => {
+    return browser.get('/');
+  });
+
+  it('should display "My Store" in the top bar', async() => {
+    const title = await element(by.css('app-root app-top-bar h1')).getText();
+
+    expect(title).toEqual('My Store');
+  });
+
+  it('should display "Products" on the homepage', async() => {
+    const title = await element(by.css('app-root app-product-list h2')).getText();
+
+    expect(title).toEqual('Products');
+  });
+});

aio/content/examples/getting-started-v0/example-config.json

@@ -0,0 +1,4 @@
+{
+  "useCommonBoilerplate": false,
+  "projectType": "getting-started"
+}

aio/content/examples/getting-started-v0/src/app/app.component.css

@@ -0,0 +1,3 @@
+p {
+  font-family: Lato;
+}

aio/content/examples/getting-started-v0/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-v0/src/app/app.component.ts

@@ -0,0 +1,8 @@
+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-v0/src/app/app.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+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';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    RouterModule.forRoot([
+      { path: '', component: ProductListComponent },
+    ])
+  ],
+  declarations: [
+    AppComponent,
+    TopBarComponent,
+    ProductListComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

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

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

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

@@ -0,0 +1,16 @@
+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-v0/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-v0/src/app/top-bar/top-bar.component.html

@@ -0,0 +1,5 @@
+<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-v0/src/app/top-bar/top-bar.component.ts

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

aio/content/examples/getting-started-v0/src/assets/shipping.json

@@ -0,0 +1,14 @@
+[
+  {
+    "type": "Overnight",
+    "price": 25.99
+  },
+  {
+    "type": "2-Day",
+    "price": 9.99
+  },
+  {
+    "type": "Postal",
+    "price": 2.99
+  }
+]

aio/content/examples/getting-started-v0/src/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular Getting Started</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

aio/content/examples/getting-started-v0/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { environment } from './environments/environment';
+
+import { AppModule } from './app/app.module';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/getting-started-v0/stackblitz.json

@@ -0,0 +1,9 @@
+{
+  "description": "Getting Started",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0-9].*"
+  ],
+  "tags": ["Angular", "getting started", "tutorial"]
+}

aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,118 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ExpectedConditions as EC, logging, ElementFinder, ElementArrayFinder } from 'protractor';
+
+describe('Getting Started', () => {
+  const pageElements = {
+    topBarHeader: element(by.css('app-root app-top-bar h1')),
+    topBarLinks: element(by.css('app-root app-top-bar a')),
+    topBarCheckoutLink: element(by.cssContainingText('app-root app-top-bar a', 'Checkout')),
+    productListHeader: element(by.css('app-root app-product-list h2')),
+    productListItems: element.all(by.css('app-root app-product-list h3')),
+    productListLinks: element.all(by.css('app-root app-product-list a')),
+    productDetailsPage: element(by.css('app-root app-product-details div')),
+    cartPage: element(by.css('app-root app-cart'))
+  };
+
+  describe('General', () => {
+    beforeAll(async() => {
+      await browser.get('/');
+    });
+
+    it('should display "My Store"', async() => {
+      const title = await pageElements.topBarHeader.getText();
+
+      expect(title).toEqual('My Store');
+    });
+
+    it('should display "Products" on the homepage', async() => {
+      const title = await pageElements.productListHeader.getText();
+
+      expect(title).toEqual('Products');
+    });
+  });
+
+  describe('Product List', () => {
+    beforeAll(async() => {
+      await browser.get('/');
+    });
+
+    it('should display 3 items', async() => {
+      const products = await pageElements.productListItems;
+
+      expect(products.length).toEqual(3);
+    });
+  });
+
+  describe('Product Details', () => {
+    beforeEach(async() => {
+      await browser.get('/');
+    });
+
+    it('should display information for a product', async() => {
+      await pageElements.productListLinks.get(0).click();
+
+      const product = pageElements.productDetailsPage;
+      const productHeader = await product.element(by.css('h3')).getText();
+      const productPrice = await product.element(by.css('h4')).getText();
+      const productDescription = await product.element(by.css('p')).getText();
+
+      expect(await product.isDisplayed()).toBeTruthy();
+      expect(productHeader).toBe('Phone XL');
+      expect(productPrice).toBe('$799.00');
+      expect(productDescription).toBe('A large phone with one of the best screens');
+    });
+
+    it('should add the product to the cart', async() => {
+      await pageElements.productListLinks.get(0).click();
+
+      const product = pageElements.productDetailsPage;
+      const buyButton = await product.element(by.css('button'));
+      const checkoutLink = pageElements.topBarCheckoutLink;
+
+      await buyButton.click();
+      await browser.wait(EC.alertIsPresent(), 1000);
+      await browser.switchTo().alert().accept();
+      await checkoutLink.click();
+
+      const cartItems = await element.all(by.css('app-root app-cart div.cart-item'));
+      expect(cartItems.length).toBe(1);
+    });
+  });
+
+  describe('Cart', () => {
+
+    beforeEach(async() => {
+      await browser.get('/');
+    });
+
+    it('should go through the checkout process', async() => {
+      await pageElements.productListLinks.get(0).click();
+
+      const checkoutLink = pageElements.topBarCheckoutLink;
+      const productDetailsPage = pageElements.productDetailsPage;
+      const buyButton = await productDetailsPage.element(by.css('button'));
+
+      const cartPage = pageElements.cartPage;
+      const inputFields = cartPage.all(by.css('form input'));
+
+      const purchaseButton = await cartPage.element(by.css('button'));
+      const nameField = inputFields.get(0);
+      const addressField = inputFields.get(1);
+
+      await buyButton.click();
+      await browser.wait(EC.alertIsPresent(), 1000);
+      await browser.switchTo().alert().accept();
+      await checkoutLink.click();
+
+      await nameField.sendKeys('Customer');
+      await addressField.sendKeys('Address');
+      await purchaseButton.click();
+
+      const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+      const cartMessages = logs.filter(({ message }) => message.includes('Your order has been submitted'));
+
+      expect(cartMessages.length).toBe(1);
+    });
+  });
+});

aio/content/examples/getting-started/example-config.json

@@ -0,0 +1,4 @@
+{
+  "useCommonBoilerplate": false,
+  "projectType": "getting-started"
+}

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 {
+}