rename upgrade-adapter example to upgrade-module
This commit is contained in:
parent
37b57fa9bb
commit
8e27ff9162
@ -27,8 +27,8 @@ include ../_util-fns
|
|||||||
2. [Using a Module Loader](#using-a-module-loader)
|
2. [Using a Module Loader](#using-a-module-loader)
|
||||||
3. [Migrating to TypeScript](#migrating-to-typescript)
|
3. [Migrating to TypeScript](#migrating-to-typescript)
|
||||||
4. [Using Component Directives](#using-component-directives)
|
4. [Using Component Directives](#using-component-directives)
|
||||||
2. [Upgrading with The Upgrade Adapter](#upgrading-with-the-upgrade-adapter)
|
2. [Upgrading with The Upgrade Module](#upgrading-with-the-upgrade-module)
|
||||||
1. [How The Upgrade Adapter Works](#how-the-upgrade-adapter-works)
|
1. [How The Upgrade Module Works](#how-the-upgrade-module-works)
|
||||||
2. [Bootstrapping hybrid Angular 1+2 Applications](#bootstrapping-hybrid-angular-1-2-applications)
|
2. [Bootstrapping hybrid Angular 1+2 Applications](#bootstrapping-hybrid-angular-1-2-applications)
|
||||||
3. [Using Angular 2 Components from Angular 1 Code](#using-angular-2-components-from-angular-1-code)
|
3. [Using Angular 2 Components from Angular 1 Code](#using-angular-2-components-from-angular-1-code)
|
||||||
4. [Using Angular 1 Component Directives from Angular 2 Code](#using-angular-1-component-directives-from-angular-2-code)
|
4. [Using Angular 1 Component Directives from Angular 2 Code](#using-angular-1-component-directives-from-angular-2-code)
|
||||||
@ -181,7 +181,7 @@ include ../_util-fns
|
|||||||
An Angular 1 component directive that is fully aligned with the Angular 2
|
An Angular 1 component directive that is fully aligned with the Angular 2
|
||||||
architecture may look something like this:
|
architecture may look something like this:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/hero-detail.directive.ts')
|
+makeExample('upgrade-module/ts/app/hero-detail.directive.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Angular 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module)
|
Angular 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module)
|
||||||
@ -195,7 +195,7 @@ include ../_util-fns
|
|||||||
The component directive example from above looks like this when expressed
|
The component directive example from above looks like this when expressed
|
||||||
using the component API:
|
using the component API:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/upgrade-io/hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/upgrade-io/hero-detail.component.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Controller lifecycle hook methods `$onInit()`, `$onDestroy()`, and `$onChanges()`
|
Controller lifecycle hook methods `$onInit()`, `$onDestroy()`, and `$onChanges()`
|
||||||
@ -205,7 +205,7 @@ include ../_util-fns
|
|||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
# Upgrading with The Upgrade Adapter
|
# Upgrading with The Upgrade Module
|
||||||
|
|
||||||
The `upgrade` module in Angular 2 is a very useful tool for upgrading
|
The `upgrade` module in Angular 2 is a very useful tool for upgrading
|
||||||
anything but the smallest of applications. With it we can mix and match
|
anything but the smallest of applications. With it we can mix and match
|
||||||
@ -214,7 +214,7 @@ include ../_util-fns
|
|||||||
since there's a natural coexistence between the two frameworks during the
|
since there's a natural coexistence between the two frameworks during the
|
||||||
transition period.
|
transition period.
|
||||||
|
|
||||||
## How The Upgrade Adapter Works
|
## How The Upgrade Module Works
|
||||||
|
|
||||||
The primary tool provided by the upgrade module is called the `UpgradeModule`.
|
The primary tool provided by the upgrade module is called the `UpgradeModule`.
|
||||||
This is a service that can bootstrap and manage hybrid applications that support
|
This is a service that can bootstrap and manage hybrid applications that support
|
||||||
@ -422,14 +422,14 @@ figure.image-display
|
|||||||
|
|
||||||
Say we have an `ng-app` driven bootstrap such as this one:
|
Say we have an `ng-app` driven bootstrap such as this one:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/index-ng-app.html', null, null, {otl: /(ng-app.*ng-strict-di)/})
|
+makeExample('upgrade-module/ts/index-ng-app.html', null, null, {otl: /(ng-app.*ng-strict-di)/})
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We can remove the `ng-app` and `ng-strict-di` directives from the HTML
|
We can remove the `ng-app` and `ng-strict-di` directives from the HTML
|
||||||
and instead switch to calling `angular.bootstrap` from JavaScript, which
|
and instead switch to calling `angular.bootstrap` from JavaScript, which
|
||||||
will result in the same thing:
|
will result in the same thing:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/1-bootstrap/app.module.ts', 'bootstrap')
|
+makeExample('upgrade-module/ts/app/1-bootstrap/app.module.ts', 'bootstrap')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Now introduce Angular 2 to the project. Inspired by instructions in
|
Now introduce Angular 2 to the project. Inspired by instructions in
|
||||||
@ -438,7 +438,7 @@ figure.image-display
|
|||||||
|
|
||||||
Next, create an `app.module.ts` file and add the following `NgModule` class:
|
Next, create an `app.module.ts` file and add the following `NgModule` class:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'ngmodule')
|
+makeExample('upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'ngmodule')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have.
|
This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have.
|
||||||
@ -451,7 +451,7 @@ figure.image-display
|
|||||||
and use it to bootstrap our Angular 1 app.
|
and use it to bootstrap our Angular 1 app.
|
||||||
The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap):
|
The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap):
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'bootstrap')
|
+makeExample('upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'bootstrap')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Congratulations! You're running a hybrid Angular 1+2 application! The
|
Congratulations! You're running a hybrid Angular 1+2 application! The
|
||||||
@ -469,14 +469,14 @@ figure
|
|||||||
|
|
||||||
Say we have a simple Angular 2 component that shows information about a hero:
|
Say we have a simple Angular 2 component that shows information about a hero:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/downgrade-static/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
If we want to use this component from Angular 1, we need to *downgrade* it
|
If we want to use this component from Angular 1, we need to *downgrade* it
|
||||||
using the `downgradeComponent()` method. What we get when we do that is an Angular 1
|
using the `downgradeComponent()` method. What we get when we do that is an Angular 1
|
||||||
*directive*, which we can then register into our Angular 1 module:
|
*directive*, which we can then register into our Angular 1 module:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/downgrade-static/app.module.ts', 'downgradecomponent')
|
+makeExample('upgrade-module/ts/app/downgrade-static/app.module.ts', 'downgradecomponent')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Because `HeroDetailComponent` is an Angular 2 component, we must also add it to the
|
Because `HeroDetailComponent` is an Angular 2 component, we must also add it to the
|
||||||
@ -486,7 +486,7 @@ figure
|
|||||||
our Angular 2 application, we also need to add it to the `entryComponents` for our
|
our Angular 2 application, we also need to add it to the `entryComponents` for our
|
||||||
Angular 2 module.
|
Angular 2 module.
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/downgrade-static/app.module.ts', 'ngmodule')
|
+makeExample('upgrade-module/ts/app/downgrade-static/app.module.ts', 'ngmodule')
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
All Angular 2 components, directives and pipes must be declared in an NgModule.
|
All Angular 2 components, directives and pipes must be declared in an NgModule.
|
||||||
@ -495,7 +495,7 @@ figure
|
|||||||
The net resulit is an Angular 1 directive called `heroDetail`, that we can
|
The net resulit is an Angular 1 directive called `heroDetail`, that we can
|
||||||
use like any other directive in our Angular 1 templates.
|
use like any other directive in our Angular 1 templates.
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/index-downgrade-static.html', 'usecomponent')
|
+makeExample('upgrade-module/ts/index-downgrade-static.html', 'usecomponent')
|
||||||
|
|
||||||
.alert.is-helpful
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
@ -510,15 +510,15 @@ figure
|
|||||||
Angular 2 hero detail component with inputs and outputs might look
|
Angular 2 hero detail component with inputs and outputs might look
|
||||||
like this:
|
like this:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/downgrade-io/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
These inputs and outputs can be supplied from the Angular 1 template, and the
|
These inputs and outputs can be supplied from the Angular 1 template, and the
|
||||||
`downgradeComponent()` method takes care of bridging them over via the `inputs`
|
`downgradeComponent()` method takes care of bridging them over via the `inputs`
|
||||||
and `outputs` arrays:
|
and `outputs` arrays:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/downgrade-io/app.module.ts', 'downgradecomponent')
|
+makeExample('upgrade-module/ts/app/downgrade-io/app.module.ts', 'downgradecomponent')
|
||||||
+makeExample('upgrade-adapter/ts/index-downgrade-io.html', 'usecomponent')
|
+makeExample('upgrade-module/ts/index-downgrade-io.html', 'usecomponent')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Note that even though we are in an Angular 1 template, **we're using Angular 2
|
Note that even though we are in an Angular 1 template, **we're using Angular 2
|
||||||
@ -547,7 +547,7 @@ figure
|
|||||||
directives on the element, even though it has Angular 2 binding attributes on it.
|
directives on the element, even though it has Angular 2 binding attributes on it.
|
||||||
For example, we can easily make multiple copies of the component using `ng-repeat`:
|
For example, we can easily make multiple copies of the component using `ng-repeat`:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/index-downgrade-io.html', 'userepeatedcomponent')
|
+makeExample('upgrade-module/ts/index-downgrade-io.html', 'userepeatedcomponent')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Using Angular 1 Component Directives from Angular 2 Code
|
## Using Angular 1 Component Directives from Angular 2 Code
|
||||||
@ -572,21 +572,16 @@ figure
|
|||||||
A simple example of an upgradable component is one that just has a template
|
A simple example of an upgradable component is one that just has a template
|
||||||
and a controller:
|
and a controller:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/upgrade-static/hero-detail.component.ts', 'hero-detail', 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/upgrade-static/hero-detail.component.ts', 'hero-detail', 'hero-detail.component.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We can *upgrade* this component to Angular 2 using the `UpgradeAdapter`'s
|
|
||||||
`upgradeNg1Component` method. It takes the name of an Angular 1 component
|
|
||||||
directive and returns an Angular 2 **component class**.
|
|
||||||
Declare it in an `NgModule` as with other Angular 2 components:
|
|
||||||
|
|
||||||
We can *upgrade* this component to Angular 2 using the `UpgradeComponent` class.
|
We can *upgrade* this component to Angular 2 using the `UpgradeComponent` class.
|
||||||
By creating a new Angular 2 **directive** that extends `UpgradeComponent` and doing a `super` call
|
By creating a new Angular 2 **directive** that extends `UpgradeComponent` and doing a `super` call
|
||||||
inside it's constructor, we have a fully upgrade Angular 1 component to be used inside Angular 2.
|
inside it's constructor, we have a fully upgrade Angular 1 component to be used inside Angular 2.
|
||||||
All that is left is to add it to `AppModule`'s `declarations` array.
|
All that is left is to add it to `AppModule`'s `declarations` array.
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/upgrade-static/hero-detail.component.ts', 'hero-detail-upgrade', 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/upgrade-static/hero-detail.component.ts', 'hero-detail-upgrade', 'hero-detail.component.ts')
|
||||||
+makeExample('upgrade-adapter/ts/app/upgrade-static/app.module.ts', 'hero-detail-upgrade', 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/upgrade-static/app.module.ts', 'hero-detail-upgrade', 'hero-detail.component.ts')
|
||||||
|
|
||||||
.alert.is-helpful
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
@ -644,14 +639,14 @@ table
|
|||||||
As an example, say we have a hero detail Angular 1 component directive
|
As an example, say we have a hero detail Angular 1 component directive
|
||||||
with one input and one output:
|
with one input and one output:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/upgrade-io/hero-detail.component.ts', 'hero-detail-io', 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/upgrade-io/hero-detail.component.ts', 'hero-detail-io', 'hero-detail.component.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We can upgrade this component to Angular 2, annotate inputs and outputs in the upgrade directive,
|
We can upgrade this component to Angular 2, annotate inputs and outputs in the upgrade directive,
|
||||||
and then provide the input and output using Angular 2 template syntax:
|
and then provide the input and output using Angular 2 template syntax:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/upgrade-io/hero-detail.component.ts', 'hero-detail-io-upgrade', 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/upgrade-io/hero-detail.component.ts', 'hero-detail-io-upgrade', 'hero-detail.component.ts')
|
||||||
+makeExample('upgrade-adapter/ts/app/upgrade-io/container.component.ts', null, 'container.component.ts')
|
+makeExample('upgrade-module/ts/app/upgrade-io/container.component.ts', null, 'container.component.ts')
|
||||||
|
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
@ -662,20 +657,20 @@ figure
|
|||||||
When we are using a downgraded Angular 2 component from an Angular 1
|
When we are using a downgraded Angular 2 component from an Angular 1
|
||||||
template, the need may arise to *transclude* some content into it. This
|
template, the need may arise to *transclude* some content into it. This
|
||||||
is also possible. While there is no such thing as transclusion in Angular 2,
|
is also possible. While there is no such thing as transclusion in Angular 2,
|
||||||
there is a very similar concept called *content projection*. The `UpgradeAdapter`
|
there is a very similar concept called *content projection*. The `UpgradeModule`
|
||||||
is able to make these two features interoperate.
|
is able to make these two features interoperate.
|
||||||
|
|
||||||
Angular 2 components that support content projection make use of an `<ng-content>`
|
Angular 2 components that support content projection make use of an `<ng-content>`
|
||||||
tag within them. Here's an example of such a component:
|
tag within them. Here's an example of such a component:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/1-to-2-projection/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
When using the component from Angular 1, we can supply contents for it. Just
|
When using the component from Angular 1, we can supply contents for it. Just
|
||||||
like they would be transcluded in Angular 1, they get projected to the location
|
like they would be transcluded in Angular 1, they get projected to the location
|
||||||
of the `<ng-content>` tag in Angular 2:
|
of the `<ng-content>` tag in Angular 2:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/index-1-to-2-projection.html', 'usecomponent')
|
+makeExample('upgrade-module/ts/index-1-to-2-projection.html', 'usecomponent')
|
||||||
|
|
||||||
.alert.is-helpful
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
@ -695,7 +690,7 @@ figure
|
|||||||
the `ng-transclude` directive in its template to mark the transclusion
|
the `ng-transclude` directive in its template to mark the transclusion
|
||||||
point:
|
point:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/2-to-1-transclusion/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/2-to-1-transclusion/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
||||||
|
|
||||||
.alert.is-helpful
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
@ -707,7 +702,7 @@ figure
|
|||||||
If we upgrade this component and use it from Angular 2, we can populate
|
If we upgrade this component and use it from Angular 2, we can populate
|
||||||
the component tag with contents that will then get transcluded:
|
the component tag with contents that will then get transcluded:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts', null, 'container.component.ts')
|
+makeExample('upgrade-module/ts/app/2-to-1-transclusion/container.component.ts', null, 'container.component.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Making Angular 1 Dependencies Injectable to Angular 2
|
## Making Angular 1 Dependencies Injectable to Angular 2
|
||||||
@ -721,18 +716,18 @@ figure
|
|||||||
Angular 2. This makes it possible to then inject it somewhere in Angular 2
|
Angular 2. This makes it possible to then inject it somewhere in Angular 2
|
||||||
code. For example, we might have a service called `HeroesService` in Angular 1:
|
code. For example, we might have a service called `HeroesService` in Angular 1:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts', null, 'heroes.service.ts')
|
+makeExample('upgrade-module/ts/app/1-to-2-providers/heroes.service.ts', null, 'heroes.service.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We can upgrade the service using a Angular 2 [Factory provider](../guide/dependency-injection.html#!#factory-providers)
|
We can upgrade the service using a Angular 2 [Factory provider](../guide/dependency-injection.html#!#factory-providers)
|
||||||
that requests the service from the Angular 1 `$injector`. The name of the Angular 2 dependency is up to you:
|
that requests the service from the Angular 1 `$injector`. The name of the Angular 2 dependency is up to you:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/1-to-2-providers/app.module.ts', 'register', 'app.module.ts')
|
+makeExample('upgrade-module/ts/app/1-to-2-providers/app.module.ts', 'register', 'app.module.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We can then inject it in Angular 2 using a string token:
|
We can then inject it in Angular 2 using a string token:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/1-to-2-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
||||||
|
|
||||||
.alert.is-helpful
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
@ -752,24 +747,24 @@ figure
|
|||||||
|
|
||||||
For example, we might have an Angular 2 service called `Heroes`:
|
For example, we might have an Angular 2 service called `Heroes`:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/2-to-1-providers/heroes.ts', null, 'heroes.ts')
|
+makeExample('upgrade-module/ts/app/2-to-1-providers/heroes.ts', null, 'heroes.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Again, as with Angular 2 components, register the provider with the `NgModule` by adding it to the module's `providers` list.
|
Again, as with Angular 2 components, register the provider with the `NgModule` by adding it to the module's `providers` list.
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/2-to-1-providers/app.module.ts', 'ngmodule', 'app.module.ts')
|
+makeExample('upgrade-module/ts/app/2-to-1-providers/app.module.ts', 'ngmodule', 'app.module.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Now wrap the Angular 2 `Heroes` in an *Angular 1 factory function* using `downgradeInjectable()`.
|
Now wrap the Angular 2 `Heroes` in an *Angular 1 factory function* using `downgradeInjectable()`.
|
||||||
and plug the factory into an Angular 1 module.
|
and plug the factory into an Angular 1 module.
|
||||||
The name of the Angular 1 dependency is up to you:
|
The name of the Angular 1 dependency is up to you:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/2-to-1-providers/app.module.ts', 'register', 'app.module.ts')
|
+makeExample('upgrade-module/ts/app/2-to-1-providers/app.module.ts', 'register', 'app.module.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
After this, the service is injectable anywhere in our Angular 1 code:
|
After this, the service is injectable anywhere in our Angular 1 code:
|
||||||
|
|
||||||
+makeExample('upgrade-adapter/ts/app/2-to-1-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
+makeExample('upgrade-module/ts/app/2-to-1-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1016,7 +1011,7 @@ code-example(format="").
|
|||||||
|
|
||||||
Having completed our preparation work, let's get going with the Angular 2
|
Having completed our preparation work, let's get going with the Angular 2
|
||||||
upgrade of PhoneCat. We'll do this incrementally with the help of the
|
upgrade of PhoneCat. We'll do this incrementally with the help of the
|
||||||
[upgrade module](#upgrading-with-the-upgrade-adapter) that comes with Angular 2.
|
[upgrade module](#upgrading-with-the-upgrade-module) that comes with Angular 2.
|
||||||
By the time we're done, we'll be able to remove Angular 1 from the project
|
By the time we're done, we'll be able to remove Angular 1 from the project
|
||||||
completely, but the key is to do this piece by piece without breaking the application.
|
completely, but the key is to do this piece by piece without breaking the application.
|
||||||
|
|
||||||
@ -1091,7 +1086,7 @@ code-example(format="").
|
|||||||
we can start converting the individual pieces to Angular 2.
|
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, we first need to initialize an `UpgradeAdapter`,
|
||||||
which [provides the glue](#upgrading-with-the-upgrade-adapter) that joins the two
|
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
|
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
|
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.
|
in `systemjs.config.js`, so it is already being loaded by the browser.
|
||||||
|
Loading…
x
Reference in New Issue
Block a user