docs(aio): rename cb- files and a few others

aio/content/examples/styleguide/src/05-17/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>'
+})
+export class AppComponent { }

aio/content/examples/styleguide/src/05-17/app/app.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroComponent, HeroListComponent } from './heroes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '05-17', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroComponent,
+    HeroListComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts

@@ -0,0 +1,24 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero } from '../shared/hero.model';
+// #docregion example
+/* avoid */
+
+@Component({
+  selector: 'toh-hero-list',
+  template: `
+    <section>
+      Our list of heroes:
+      <hero-profile *ngFor="let hero of heroes" [hero]="hero">
+      </hero-profile>
+      Total powers: {{totalPowers}}<br>
+      Average power: {{totalPowers / heroes.length}}
+    </section>
+  `
+})
+export class HeroListComponent {
+  heroes: Hero[];
+  totalPowers: number;
+}
+// #enddocregion example

aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts

@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero } from '../shared/hero.model';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-list',
+  template: `
+    <section>
+      Our list of heroes:
+      <toh-hero *ngFor="let hero of heroes" [hero]="hero">
+      </toh-hero>
+      Total powers: {{totalPowers}}<br>
+      Average power: {{avgPower}}
+    </section>
+  `
+})
+export class HeroListComponent {
+  heroes: Hero[];
+  totalPowers: number;
+
+  // #enddocregion example
+  // testing harness
+  constructor() {
+    this.heroes = [];
+  }
+
+  // #docregion example
+  get avgPower() {
+    return this.totalPowers / this.heroes.length;
+  }
+}
+// #enddocregion example

aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts

@@ -0,0 +1 @@
+export * from './hero-list.component';

aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from '../shared/hero.model';
+
+@Component({
+  selector: 'toh-hero',
+  template: `...`
+})
+export class HeroComponent {
+  @Input() hero: Hero;
+}
+
+

aio/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts

@@ -0,0 +1 @@
+export * from './hero.component';

aio/content/examples/styleguide/src/05-17/app/heroes/index.ts

@@ -0,0 +1,3 @@
+export * from './hero';
+export * from './hero-list';
+export * from './shared';

aio/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts

@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}

aio/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts

@@ -0,0 +1 @@
+export * from './hero.model';

aio/content/examples/styleguide/src/05-17/app/index.ts

@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';