docs(aio): update migrated content from anguar.io

aio/content/examples/architecture/src/app/app.component.ts

@@ -0,0 +1,14 @@
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <hero-list></hero-list>
+    <sales-tax></sales-tax>
+  `
+})
+// #docregion export
+export class AppComponent { }
+// #enddocregion export

aio/content/examples/architecture/src/app/app.module.ts

@@ -0,0 +1,36 @@
+import { BrowserModule }       from '@angular/platform-browser';
+import { FormsModule }         from '@angular/forms';
+// #docregion imports
+import { NgModule }     from '@angular/core';
+import { AppComponent } from './app.component';
+// #enddocregion imports
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent }   from './hero-list.component';
+import { SalesTaxComponent }   from './sales-tax.component';
+import { HeroService }         from './hero.service';
+import { BackendService }      from './backend.service';
+import { Logger }              from './logger.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent,
+    HeroListComponent,
+    SalesTaxComponent
+  ],
+// #docregion providers
+  providers: [
+    BackendService,
+    HeroService,
+    Logger
+  ],
+// #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export

aio/content/examples/architecture/src/app/backend.service.ts

@@ -0,0 +1,25 @@
+import { Injectable, Type } from '@angular/core';
+
+import { Logger } from './logger.service';
+import { Hero } from './hero';
+
+const HEROES = [
+        new Hero('Windstorm', 'Weather mastery'),
+        new Hero('Mr. Nice', 'Killing them with kindness'),
+        new Hero('Magneta', 'Manipulates metalic objects')
+      ];
+
+@Injectable()
+export class BackendService {
+  constructor(private logger: Logger) {}
+
+  getAll(type: Type<any>): PromiseLike<any[]> {
+    if (type === Hero) {
+      // TODO get from the database
+      return Promise.resolve<Hero[]>(HEROES);
+    }
+    let err = new Error('Cannot get object of this type');
+    this.logger.error(err);
+    throw err;
+  }
+}

aio/content/examples/architecture/src/app/hero-detail.component.html

@@ -0,0 +1,9 @@
+<hr>
+<h4>{{hero.name}} Detail</h4>
+<div>Id: {{hero.id}}</div>
+<div>Name:
+  <!-- #docregion ngModel -->
+  <input [(ngModel)]="hero.name">
+  <!-- #enddocregion ngModel -->
+</div>
+<div>Power:<input [(ngModel)]="hero.power"></div>

aio/content/examples/architecture/src/app/hero-detail.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'hero-detail',
+  templateUrl: './hero-detail.component.html'
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+}

aio/content/examples/architecture/src/app/hero-list.component.1.html

@@ -0,0 +1,9 @@
+<!--#docregion binding  -->
+<li>{{hero.name}}</li>
+<hero-detail [hero]="selectedHero"></hero-detail>
+<li (click)="selectHero(hero)"></li>
+<!--#enddocregion binding -->
+
+<!--#docregion structural  -->
+<li *ngFor="let hero of heroes"></li>
+<hero-detail *ngIf="selectedHero"></hero-detail>

aio/content/examples/architecture/src/app/hero-list.component.html

@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h2>Hero List</h2>
+
+<p><i>Pick a hero from the list</i></p>
+<ul>
+  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
+    {{hero.name}}
+  </li>
+</ul>
+
+<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

aio/content/examples/architecture/src/app/hero-list.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit }   from '@angular/core';
+
+import { Hero }                from './hero';
+import { HeroService }         from './hero.service';
+
+// #docregion metadata, providers
+@Component({
+  selector:    'hero-list',
+  templateUrl: './hero-list.component.html',
+  providers:  [ HeroService ]
+})
+// #enddocregion providers
+// #docregion class
+export class HeroListComponent implements OnInit {
+  // #enddocregion metadata
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  // #docregion ctor
+  constructor(private service: HeroService) { }
+  // #enddocregion ctor
+
+  ngOnInit() {
+    this.heroes = this.service.getHeroes();
+  }
+
+  selectHero(hero: Hero) { this.selectedHero = hero; }
+  // #docregion metadata
+}

aio/content/examples/architecture/src/app/hero.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { BackendService } from './backend.service';
+import { Logger } from './logger.service';
+
+@Injectable()
+// #docregion class
+export class HeroService {
+  private heroes: Hero[] = [];
+
+  constructor(
+    private backend: BackendService,
+    private logger: Logger) { }
+
+  getHeroes() {
+    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
+      this.logger.log(`Fetched ${heroes.length} heroes.`);
+      this.heroes.push(...heroes); // fill cache
+    });
+    return this.heroes;
+  }
+}

aio/content/examples/architecture/src/app/hero.ts

@@ -0,0 +1,10 @@
+let nextId = 1;
+
+export class Hero {
+  id: number;
+  constructor(
+    public name: string,
+    public power?: string) {
+      this.id = nextId++;
+    }
+}

aio/content/examples/architecture/src/app/logger.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+// #docregion class
+export class Logger {
+  log(msg: any)   { console.log(msg); }
+  error(msg: any) { console.error(msg); }
+  warn(msg: any)  { console.warn(msg); }
+}

aio/content/examples/architecture/src/app/mini-app.ts

@@ -0,0 +1,45 @@
+// #docplaster
+// A mini-application
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(message: string) { console.log(message); }
+}
+
+// #docregion import-core-component
+import { Component } from '@angular/core';
+// #enddocregion import-core-component
+
+@Component({
+ selector: 'my-app',
+ template: 'Welcome to Angular'
+})
+export class AppComponent {
+  constructor(logger: Logger) {
+    logger.log('Let the fun begin!');
+  }
+}
+
+// #docregion module
+import { NgModule }      from '@angular/core';
+// #docregion import-browser-module
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion import-browser-module
+@NgModule({
+// #docregion ngmodule-imports
+  imports:      [ BrowserModule ],
+// #enddocregion ngmodule-imports
+  providers:    [ Logger ],
+  declarations: [ AppComponent ],
+  exports:      [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
+// #enddocregion module
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/architecture/src/app/sales-tax.component.ts

@@ -0,0 +1,25 @@
+import { Component }       from '@angular/core';
+
+import { SalesTaxService } from './sales-tax.service';
+import { TaxRateService }  from './tax-rate.service';
+
+@Component({
+  selector:    'sales-tax',
+  template: `
+    <h2>Sales Tax Calculator</h2>
+    Amount: <input #amountBox (change)="0">
+
+    <div *ngIf="amountBox.value">
+    The sales tax is
+     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
+    </div>
+  `,
+  providers: [SalesTaxService, TaxRateService]
+})
+export class SalesTaxComponent {
+  constructor(private salesTaxService: SalesTaxService) { }
+
+  getTax(value: string | number) {
+    return this.salesTaxService.getVAT(value);
+  }
+}

aio/content/examples/architecture/src/app/sales-tax.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+import { TaxRateService } from './tax-rate.service';
+
+@Injectable()
+export class SalesTaxService {
+  constructor(private rateService: TaxRateService) { }
+
+  getVAT(value: string | number) {
+    let amount = (typeof value === 'string') ?
+      parseFloat(value) : value;
+    return (amount || 0) * this.rateService.getRate('VAT');
+  }
+}

aio/content/examples/architecture/src/app/tax-rate.service.ts

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TaxRateService {
+  getRate(rateName: string) { return 0.10; } // 10% everywhere
+}