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

aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts

@@ -0,0 +1,34 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { heroDetailComponent } from './hero-detail.component';
+
+// #docregion ngmodule
+import { Heroes } from './heroes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  providers: [ Heroes ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion ngmodule
+// #docregion register
+import { downgradeInjectable } from '@angular/upgrade/static';
+
+angular.module('heroApp', [])
+  .factory('heroes', downgradeInjectable(Heroes))
+  .component('heroDetail', heroDetailComponent);
+// #enddocregion register
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts

@@ -0,0 +1,11 @@
+import { Heroes } from './heroes';
+
+// #docregion
+export const heroDetailComponent = {
+  template: `
+    <h2>{{$ctrl.hero.id}}: {{$ctrl.hero.name}}</h2>
+  `,
+  controller: ['heroes', function(heroes: Heroes) {
+    this.hero = heroes.get()[0];
+  }]
+};

aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Hero } from '../hero';
+
+@Injectable()
+export class Heroes {
+  get() {
+    return [
+      new Hero(1, 'Windstorm'),
+      new Hero(2, 'Spiderman')
+    ];
+  }
+}

aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts

@@ -0,0 +1,39 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion heroupgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    ContainerComponent,
+    HeroDetailDirective
+  ],
+  entryComponents: [
+    ContainerComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion heroupgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'my-container',
+  template: `
+    <hero-detail [hero]="hero">
+      <!-- Everything here will get transcluded -->
+      <p>{{hero.description}}</p>
+    </hero-detail>
+  `
+})
+export class ContainerComponent {
+  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
+}

aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts

@@ -0,0 +1,28 @@
+// #docregion
+export const heroDetail = {
+  bindings: {
+    hero: '='
+  },
+  template: `
+    <h2>{{$ctrl.hero.name}}</h2>
+    <div>
+      <ng-transclude></ng-transclude>
+    </div>
+  `
+};
+// #enddocregion
+
+import { Directive, ElementRef, Injector, Input } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+import { Hero } from '../hero';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  @Input() hero: Hero;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}

aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts

@@ -0,0 +1,29 @@
+declare var angular: angular.IAngularStatic;
+// #docregion ngmodule
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion ngmodule
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
+// #docregion bootstrap
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
+// #enddocregion bootstrap

aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts

@@ -0,0 +1,10 @@
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
+document.addEventListener('DOMContentLoaded', function() {
+  // #docregion bootstrap
+  angular.bootstrap(document.body, ['heroApp'], {strictDi: true});
+  // #enddocregion bootstrap
+});

aio/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts

@@ -0,0 +1,4 @@
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });

aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts

@@ -0,0 +1,36 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { MainController } from './main.controller';
+import { HeroDetailComponent } from './hero-detail.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+
+angular.module('heroApp', [])
+  .controller('MainController', MainController)
+  .directive('heroDetail', downgradeComponent({
+    component: HeroDetailComponent,
+    inputs: ['hero']
+  }) as angular.IDirectiveFactory);
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <h2>{{hero.name}}</h2>
+    <div>
+      <ng-content></ng-content>
+    </div>
+  `
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+}

aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts

@@ -0,0 +1,5 @@
+import { Hero } from '../hero';
+
+export class MainController {
+  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
+}

aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { HeroesService } from './heroes.service';
+
+export function heroesServiceFactory(i: any) {
+  return i.get('heroes');
+}
+
+export const heroesServiceProvider = {
+  provide: HeroesService,
+  useFactory: heroesServiceFactory,
+  deps: ['$injector']
+};

aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts

@@ -0,0 +1,44 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesService } from './heroes.service';
+// #docregion register
+import { heroesServiceProvider } from './ajs-upgraded-providers';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  providers: [
+    heroesServiceProvider
+  ],
+  // #enddocregion register
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+// #docregion register
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion register
+
+angular.module('heroApp', [])
+  .service('heroes', HeroesService)
+  .directive(
+    'heroDetail',
+    downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts

@@ -0,0 +1,17 @@
+// #docregion
+import { Component } from '@angular/core';
+import { HeroesService } from './heroes.service';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <h2>{{hero.id}}: {{hero.name}}</h2>
+  `
+})
+export class HeroDetailComponent {
+  hero: Hero;
+  constructor(heroes: HeroesService) {
+    this.hero = heroes.get()[0];
+  }
+}

aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Hero } from '../hero';
+
+export class HeroesService {
+  get() {
+    return [
+      new Hero(1, 'Windstorm'),
+      new Hero(2, 'Spiderman')
+    ];
+  }
+}

aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <router-outlet></router-outlet>
+    <div ng-view></div>
+  `,
+})
+export class AppComponent { }

aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts

@@ -0,0 +1,62 @@
+// #docregion
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { HeroModule } from './hero.module';
+
+// #docregion router-config
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
+import { AppComponent } from './app.component';
+
+class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
+  // use only process the `/hero` url
+  shouldProcessUrl(url: UrlTree) { return url.toString().startsWith('/hero'); }
+  extract(url: UrlTree) { return url; }
+  merge(url: UrlTree, whole: UrlTree) { return url; }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule,
+    HeroModule,
+    RouterModule.forRoot([])
+  ],
+  providers: [
+    // use hash location strategy
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+    // use custom url handling strategy
+    { provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy }
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion router-config
+
+import { Villain } from '../villain';
+
+export const villainDetail = {
+  template: `
+    <h1>Villain detail</h1>
+    <h2>{{$ctrl.villain.name}} - {{$ctrl.villain.description}}</h2>
+  `,
+  controller: function() {
+    this.villain = new Villain(1, 'Mr. Nice', 'No More Mr. Nice Guy');
+  }
+};
+
+angular.module('heroApp', ['ngRoute'])
+  .component('villainDetail', villainDetail)
+  .config(['$locationProvider', '$routeProvider',
+    function config($locationProvider: angular.ILocationProvider,
+                    $routeProvider: angular.route.IRouteProvider) {
+      // #docregion ajs-route
+      $routeProvider
+        .when('/villain', { template: '<villain-detail></villain-detail>' });
+      // #enddocregion ajs-route
+    }
+  ]);

aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts

@@ -0,0 +1,32 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  template: `
+    <h1>Hero detail</h1>
+    <h2>{{hero.name}} - {{hero.description}}</h2>
+  `
+})
+export class HeroDetailComponent {
+  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
+}
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    // #docregion a-route
+    RouterModule.forChild([
+      { path: 'hero', children: [
+        { path: '', component: HeroDetailComponent },
+      ] },
+    ])
+    // #enddocregion a-route
+  ],
+  declarations: [ HeroDetailComponent ]
+})
+export class HeroModule {}

aio/content/examples/upgrade-module/src/app/divide-routes/main.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts

@@ -0,0 +1,43 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { MainController } from './main.controller';
+
+// #docregion downgradecomponent
+import { HeroDetailComponent } from './hero-detail.component';
+
+// #enddocregion downgradecomponent
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #docregion downgradecomponent
+
+angular.module('heroApp', [])
+  .controller('MainController', MainController)
+  .directive('heroDetail', downgradeComponent({
+    component: HeroDetailComponent,
+    inputs: ['hero'],
+    outputs: ['deleted']
+  }) as angular.IDirectiveFactory);
+
+// #enddocregion downgradecomponent
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <h2>{{hero.name}} details!</h2>
+    <div><label>id: </label>{{hero.id}}</div>
+    <button (click)="onDelete()">Delete</button>
+  `
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+  @Output() deleted = new EventEmitter<Hero>();
+  onDelete() {
+    this.deleted.emit(this.hero);
+  }
+}

aio/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts

@@ -0,0 +1,12 @@
+import { Hero } from '../hero';
+
+export class MainController {
+  hero = new Hero(1, 'Windstorm');
+  heroes = [
+    new Hero(2, 'Superman'),
+    new Hero(3, 'Spiderman')
+  ];
+  onDelete(hero: Hero) {
+    hero.name = 'Ex-' + hero.name;
+  }
+}

aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts

@@ -0,0 +1,42 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+// #docregion downgradecomponent, ngmodule
+import { HeroDetailComponent } from './hero-detail.component';
+
+// #enddocregion downgradecomponent
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion ngmodule
+// #docregion downgradecomponent
+
+import { downgradeComponent } from '@angular/upgrade/static';
+
+angular.module('heroApp', [])
+  .directive(
+    'heroDetail',
+    downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
+  );
+
+// #enddocregion downgradecomponent
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <h2>Windstorm details!</h2>
+    <div><label>id: </label>1</div>
+  `
+})
+export class HeroDetailComponent { }

aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts

@@ -0,0 +1,22 @@
+// #docregion
+export function heroDetailDirective() {
+  return {
+    restrict: 'E',
+    scope: {},
+    bindToController: {
+      hero: '=',
+      deleted: '&'
+    },
+    template: `
+      <h2>{{ctrl.hero.name}} details!</h2>
+      <div><label>id: </label>{{ctrl.hero.id}}</div>
+      <button ng-click="ctrl.onDelete()">Delete</button>
+    `,
+    controller: function() {
+      this.onDelete = () => {
+        this.deleted({hero: this.hero});
+      };
+    },
+    controllerAs: 'ctrl'
+  };
+}

aio/content/examples/upgrade-module/src/app/hero.ts

@@ -0,0 +1,5 @@
+export class Hero {
+  constructor(public id: number,
+              public name: string,
+              public description?: string) { }
+}

aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts

@@ -0,0 +1,39 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion heroupgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    ContainerComponent,
+    HeroDetailDirective
+  ],
+  entryComponents: [
+    ContainerComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion heroupgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'my-container',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <hero-detail [hero]="hero"
+                 (deleted)="heroDeleted($event)">
+    </hero-detail>
+  `
+})
+export class ContainerComponent {
+  hero = new Hero(1, 'Windstorm');
+  heroDeleted(hero: Hero) {
+    hero.name = 'Ex-' + hero.name;
+  }
+}

aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts

@@ -0,0 +1,37 @@
+// #docregion
+// #docregion hero-detail-io
+export const heroDetail = {
+  bindings: {
+    hero: '<',
+    deleted: '&'
+  },
+  template: `
+    <h2>{{$ctrl.hero.name}} details!</h2>
+    <div><label>id: </label>{{$ctrl.hero.id}}</div>
+    <button ng-click="$ctrl.onDelete()">Delete</button>
+  `,
+  controller: function() {
+    this.onDelete = () => {
+      this.deleted(this.hero);
+    };
+  }
+};
+// #enddocregion hero-detail-io
+
+// #docregion hero-detail-io-upgrade
+import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+import { Hero } from '../hero';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  @Input() hero: Hero;
+  @Output() deleted: EventEmitter<Hero>;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}
+// #enddocregion hero-detail-io-upgrade

aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts

@@ -0,0 +1,41 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion hero-detail-upgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailDirective,
+    // #enddocregion hero-detail-upgrade
+    ContainerComponent
+  ],
+  entryComponents: [
+    ContainerComponent
+  // #docregion hero-detail-upgrade
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion hero-detail-upgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});

aio/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-container',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <hero-detail></hero-detail>
+  `
+})
+export class ContainerComponent { }

aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts

@@ -0,0 +1,25 @@
+// #docregion
+// #docregion hero-detail
+export const heroDetail = {
+  template: `
+    <h2>Windstorm details!</h2>
+    <div><label>id: </label>1</div>
+  `,
+  controller: function() {
+  }
+};
+// #enddocregion hero-detail
+
+// #docregion hero-detail-upgrade
+import { Directive, ElementRef, Injector } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}
+// #enddocregion hero-detail-upgrade

aio/content/examples/upgrade-module/src/app/villain.ts

@@ -0,0 +1,5 @@
+export class Villain {
+  constructor(public id: number,
+              public name: string,
+              public description?: string) { }
+}

aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html

@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/a-to-ajs-providers/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <hero-detail>
+      </hero-detail>
+    </hero-app>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html

@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/a-to-ajs-transclusion/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html

@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+    System.import('app/ajs-a-hybrid-bootstrap/app.module')
+          .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html

@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/ajs-to-a-projection/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="mainCtrl.hero">
+          <!-- Everything here will get projected -->
+          <p>{{mainCtrl.hero.description}}</p>
+        </hero-detail>
+      </div>
+      <!-- #enddocregion usecomponent -->
+    </hero-app>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html

@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/ajs-to-a-providers/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <hero-detail>
+      </hero-detail>
+    </hero-app>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-bootstrap.html

@@ -0,0 +1,13 @@
+<!-- #docregion -->
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <base href="/">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="app/ajs-bootstrap/app.module.js"></script>
+  </head>
+
+  <body>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-divide-routes.html

@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
+
+    <!-- Polyfills for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+    System.import('app/divide-routes/main')
+          .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <!--#docregion body-->
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+  <!--#enddocregion body-->
+</html>

aio/content/examples/upgrade-module/src/index-downgrade-io.html

@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/downgrade-io/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="mainCtrl.hero"
+                     (deleted)="mainCtrl.onDelete($event)">
+        </hero-detail>
+      </div>
+      <!-- #enddocregion usecomponent -->
+      <!-- #docregion userepeatedcomponent -->
+      <div ng-controller="MainController as mainCtrl">
+        <hero-detail [hero]="hero"
+                     (deleted)="mainCtrl.onDelete($event)"
+                     ng-repeat="hero in mainCtrl.heroes">
+        </hero-detail>
+      </div>
+      <!-- #enddocregion userepeatedcomponent-->
+    </hero-app>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-downgrade-static.html

@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/downgrade-static/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <!-- #docregion usecomponent -->
+      <hero-detail></hero-detail>
+      <!-- #enddocregion usecomponent -->
+    </hero-app>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-ng-app.html

@@ -0,0 +1,15 @@
+<!-- #docregion -->
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <base href="/">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <script src="app/ajs-ng-app/app.module.js"></script>
+  </head>
+
+  <body ng-app="heroApp" ng-strict-di>
+    <div id="message" ng-controller="MainCtrl as mainCtrl">
+      {{ mainCtrl.message }}
+    </div>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-upgrade-io.html

@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/upgrade-io/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/index-upgrade-static.html

@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular Upgrade</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+      System.import('app/upgrade-static/app.module')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <hero-app>
+      <my-container></my-container>
+    </hero-app>
+  </body>
+</html>

aio/content/examples/upgrade-module/src/systemjs.config.1.js

@@ -0,0 +1,43 @@
+/**
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    paths: {
+      // paths serve as alias
+      'npm:': 'node_modules/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      app: 'app',
+      // angular bundles
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      // #docregion upgrade-static-umd
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+      // #enddocregion upgrade-static-umd
+
+      // other libraries
+      'rxjs':                      'npm:rxjs',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.js',
+        defaultExtension: 'js'
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      }
+    }
+  });
+})(this);