update phonecat-hybrid bootstrap prose

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts

@@ -1,9 +1,11 @@
 // #docplaster
 // #docregion bare
 import { NgModule } from '@angular/core';
-import { UpgradeModule } from '@angular/upgrade/static';
 import { BrowserModule } from '@angular/platform-browser';
 // #enddocregion bare
+// #docregion upgrademodule
+import { UpgradeModule } from '@angular/upgrade/static';
+// #enddocregion upgrademodule
 // #docregion httpmodule
 import { HttpModule } from '@angular/http';
 // #enddocregion httpmodule
@@ -23,19 +25,20 @@ import { PhoneListComponent } from './phone-list/phone-list.component';
 import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 // #enddocregion phonedetail
 
-// #docregion bare, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+// #docregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
 
 @NgModule({
   imports: [
     BrowserModule,
-    UpgradeModule,
     // #enddocregion bare
+    UpgradeModule,
+    // #enddocregion upgrademodule
     HttpModule,
     // #enddocregion httpmodule, phone
     FormsModule,
-  // #docregion bare, httpmodule, phone
+  // #docregion bare, upgrademodule, httpmodule, phone
   ],
-  // #enddocregion bare, httpmodule, phone
+  // #enddocregion bare, upgrademodule, httpmodule, phone
   declarations: [
     PhoneListComponent,
     // #enddocregion phonelist
@@ -61,10 +64,11 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
     }
     // #enddocregion routeparams
   ]
-// #docregion bare, httpmodule, phonelist
+// #docregion bare, upgrademodule, httpmodule, phonelist
 })
 export class AppModule {
+  // #enddocregion bare
   ngDoBootstrap() {}
+  // #docregion bare
 }
-// #enddocregion httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
-// #enddocregion bare

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts

@@ -17,9 +17,6 @@ import { PhoneListComponent } from './phone-list/phone-list.component';
 import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 
 // #enddocregion phone-detail
-// #docregion init-adapter
-// let upgradeAdapter = new UpgradeAdapter(AppModule);
-// #enddocregion init-adapter
 
 // #docregion routeparams
 // upgradeAdapter.upgradeNg1Provider('$routeParams');
@@ -48,9 +45,8 @@ angular.module('phoneDetail')
 // #enddocregion phone-detail
 
 // #docregion bootstrap
-// upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
 platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
   let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['phonecatApp'], {strictDi: true});
+  upgrade.bootstrap(document.documentElement, ['phonecatApp']);
 });
 // #enddocregion bootstrap

public/docs/ts/latest/guide/upgrade.jade

@@ -1085,13 +1085,32 @@ code-example(format="").
   that supports both Angular 1 and Angular 2 components. Once we've done that
   we can start converting the individual pieces to Angular 2.
 
-  To bootstrap a hybrid application, we first need to initialize an `UpgradeAdapter`,
+  To [bootstrap a hybrid application](#bootstrapping-hybrid-angular-1-2-applications),
-  which [provides the glue](#upgrading-with-the-upgrade-module) that joins the two
+  we first need to import `UpgradeModule` in our `AppModule`, and override it's bootstrap method:
-  versions of the framework together. Let's import the `UpgradeAdapter` class into a
-  new file `app/main.ts`. This file has been configured as the application entrypoint
-  in `systemjs.config.js`, so it is already being loaded by the browser.
 
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'import-adapter', 'app/main.ts')
++makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'upgrademodule', 'app/app.module.ts')
+  
+:marked
+  Our application is currently bootstrapped using the Angular 1 `ng-app` directive
+  attached to the `<html>` element of the host page. This will no longer work with
+  Angular 2. We should switch to a JavaScript-driven bootstrap instead. 
+  
+  So, remove the `ng-app` attribute from `index.html`, and instead boostrap via `app/main.ts`.
+  This file has been configured as the application entrypoint in `systemjs.config.js`, 
+  so it is already being loaded by the browser.
+
++makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'bootstrap')
+
+:marked
+  The arguments used here are the root element of the application (which is
+  the same element we had `ng-app` on earlier), and the Angular 1.x modules
+  that we want to load. Since we're bootstrapping the app through
+  an `UpgradeModule`, we're actually now running the app as a hybrid Angular 1+2
+  app.
+
+  This means we are now running both Angular 1 and 2 at the same time. That's pretty
+  exciting! We're not running any actual Angular 2 components yet though,
+  so let's do that next.
 
 .l-sub-section
   :marked
@@ -1112,31 +1131,6 @@ code-example(format="").
     process of moving our our to Angular 2 already. 
     Instead we declare `angular` as `angular.IAngularStatic` to indicate it is a global variable
     and still have full typing support.
-    
-:marked
-  We can then make an adapter by instantiating the class:
-
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'init-adapter')
-
-:marked
-  Our application is currently bootstrapped using the Angular 1 `ng-app` directive
-  attached to the `<html>` element of the host page. This will no longer work with
-  Angular 2. We should switch to a JavaScript-driven bootstrap instead. So, remove the
-  `ng-app` attribute from `index.html`, and instead add this to `main.ts`:
-
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'bootstrap')
-
-:marked
-  The arguments used here are the root element of the application (which is
-  the same element we had `ng-app` on earlier), and the Angular 1.x modules
-  that we want to load. Since we're bootstrapping the app through
-  an `UpgradeAdapter`, we're actually now running the app as a hybrid Angular 1+2
-  app.
-
-  This means we are now running both Angular 1 and 2 at the same time. That's pretty
-  exciting! We're not running any actual Angular 2 components yet though,
-  so let's do that next.
-
 
 :marked
   ## Upgrading the Phone service