update phonecat-hybrid bootstrap prose
This commit is contained in:
Filipe Silva
parent
1d81dad708
commit
654f6cf2a2
|
|
@ -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
|
||||
// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
which [provides the glue](#upgrading-with-the-upgrade-module) that joins the two
|
||||
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.
|
||||
To [bootstrap a hybrid application](#bootstrapping-hybrid-angular-1-2-applications),
|
||||
we first need to import `UpgradeModule` in our `AppModule`, and override it's bootstrap method:
|
||||
|
||||
+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
|
||||
|
|
|
|||
Loading…
Reference in New Issue