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

PR Close angular#27684

Author: brandonroberts

.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.css

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

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

@@ -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!');
+  }
+}