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

aio/content/examples/styleguide/src/04-12/app/app.component.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'toh-app',
+  template: `
+    <toh-nav></toh-nav>
+    <toh-heroes></toh-heroes>
+  `
+})
+export class AppComponent { }

aio/content/examples/styleguide/src/04-12/app/app.module.ts

@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion example
+import { RouterModule } from '@angular/router';
+// #docregion example
+
+import { AppComponent }   from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { CoreModule }    from './core/core.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    CoreModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-12', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example

aio/content/examples/styleguide/src/04-12/app/core/core.module.ts

@@ -0,0 +1,21 @@
+// #docregion
+import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoggerService } from './logger.service';
+import { NavComponent } from './nav/nav.component';
+import { throwIfAlreadyLoaded } from './module-import-guard';
+
+@NgModule({
+  imports: [
+    CommonModule // we use ngFor
+  ],
+  exports: [NavComponent],
+  declarations: [NavComponent],
+  providers: [LoggerService]
+})
+export class CoreModule {
+  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
+    throwIfAlreadyLoaded(parentModule, 'CoreModule');
+  }
+}

aio/content/examples/styleguide/src/04-12/app/core/index.ts

@@ -0,0 +1,3 @@
+// #docregion
+export * from './logger.service';
+export * from './nav/nav.component';

aio/content/examples/styleguide/src/04-12/app/core/logger.service.ts

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

aio/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts

@@ -0,0 +1,6 @@
+// #docregion
+export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
+  if (parentModule) {
+    throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
+  }
+}

aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css

@@ -0,0 +1,63 @@
+/*#docregion*/
+.mdl-layout__header {
+  display: flex;
+  position: fixed;
+  background-color: #222;
+}
+
+.nav-link {
+  padding: 0 1em;
+  width: 100px;
+  color: rgba(255,255,255,.6);
+  text-align: center;
+  text-decoration: none;
+}
+
+.nav-link.router-link-active {
+  color: rgba(255,255,255, 1);
+}
+
+.nav-link.router-link-active::after {
+    height: 3px;
+    width: 100%;
+    display: block;
+    content: " ";
+    bottom: 0;
+    left: 0;
+    position: inherit;
+    background: rgb(83,109,254);
+}
+
+.md-title-icon > i {
+  background-image: url("assets/ng.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  padding: 1em 2em;
+}
+
+.mdl-layout__header-row {
+  height: 56px;
+  padding: 0 16px 0 72px;
+  padding-left: 8px;
+  background-color: #673AB7;
+  background: #0033FF;
+  background-color: #222;
+}
+
+#reset-button {
+  position: fixed;
+  right: 2em;
+  top: 1em;
+}
+
+@media (max-width: 480px) {
+  #reset-button {
+    display: none
+  }
+}
+
+@media (max-width: 320px) {
+  a.nav-link {
+    font-size: 12px;
+  }
+}

aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html

@@ -0,0 +1,14 @@
+<!--#docregion-->
+<header>
+  <div>
+    <h4>Tour of Heroes</h4>
+  </div>
+  <nav>
+    <ul>
+      <li *ngFor="let item of menuItems">
+        {{item}}
+      </li>
+    </ul>
+  </nav>
+  <br/>
+</header>

aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'toh-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.css'],
+})
+export class NavComponent implements OnInit {
+  menuItems = [
+    'Heroes',
+    'Villains',
+    'Other'
+  ];
+
+  ngOnInit() {  }
+
+  constructor() { }
+}

aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html

@@ -0,0 +1,12 @@
+<!--#docregion-->
+<div>
+
+	<button (click)="getHeroes()">Get Heroes</button>
+
+	<ul>
+		<li *ngFor="let hero of heroes">
+			{{hero.name}}
+		</li>
+	</ul>
+
+</div>

aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+import { LoggerService } from '../core/logger.service';
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: './heroes.component.html'
+})
+export class HeroesComponent {
+  heroes: any[];
+
+  constructor(private loggerService: LoggerService) { }
+
+  getHeroes() {
+    this.loggerService.log(`Getting heroes`);
+    this.heroes = [
+      { id: 1, name: 'Windstorm' },
+      { id: 2, name: 'Bombasto' },
+      { id: 3, name: 'Magneta' },
+      { id: 4, name: 'Tornado' }
+    ];
+    this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
+  }
+}