ngmodule
An NgModule
, which you import to provide AngularJS core services, and has an instance method used to bootstrap the hybrid upgrade application.
class UpgradeModule { $injector: any injector: Injector ngZone: NgZone bootstrap(element: Element, modules: string[] = [], config?: any) }
Part of the upgrade/static library for hybrid upgrade apps that support AOT compilation
The upgrade/static
package contains helpers that allow AngularJS and Angular components to be used together inside a hybrid upgrade application, which supports AOT compilation.
Specifically, the classes and functions in the upgrade/static
module allow the following:
UpgradeComponent
.downgradeComponent
.downgradeInjectable
.Further information available in the Usage Notes...
Property | Description |
---|---|
$injector: any | The AngularJS |
injector: Injector | The Angular Injector * |
ngZone: NgZone | The bootstrap zone for the upgrade application |
bootstrap() | |||||||||
---|---|---|---|---|---|---|---|---|---|
Bootstrap an AngularJS application from this NgModule | |||||||||
|
element | Element | the element on which to bootstrap the AngularJS application |
modules | string[] | the AngularJS modules to bootstrap for this application Optional. Default is |
config | any | optional extra AngularJS bootstrap configuration Optional. Default is |
Provider |
---|
angular1Providers |
import {UpgradeModule} from '@angular/upgrade/static';
See also the examples below.
When reasoning about how a hybrid application works it is useful to have a mental model which describes what is happening and explains what is happening at the lowest level.
UpgradeComponent
.downgradeComponent
.[...]
) for property binding.$apply()
.UpgradeModule
classThis class is an NgModule
, which you import to provide AngularJS core services, and has an instance method used to bootstrap the hybrid upgrade application.
Core AngularJS services Importing this NgModule
will add providers for the core AngularJS services to the root injector.
Bootstrap The runtime instance of this class contains a `bootstrap()` method, which you use to bootstrap the top level AngularJS module onto an element in the DOM for the hybrid upgrade app.
It also contains properties to access the root injector, the bootstrap NgZone
and the AngularJS $injector.
Import the UpgradeModule
into your top level Angular `NgModule`.
// This NgModule represents the Angular pieces of the application @NgModule({ declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper], providers: [ HeroesService, // Register an Angular provider whose value is the "upgraded" AngularJS service {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']} ], // All components that are to be "downgraded" must be declared as `entryComponents` entryComponents: [Ng2HeroesComponent], // We must import `UpgradeModule` to get access to the AngularJS core services imports: [BrowserModule, UpgradeModule] }) export class Ng2AppModule { }
Then inject UpgradeModule
into your Angular NgModule
and use it to bootstrap the top level AngularJS module in the ngDoBootstrap()
method.
export class Ng2AppModule { constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { // We bootstrap the AngularJS app. this.upgrade.bootstrap(document.body, [ng1AppModule.name]); } }
Finally, kick off the whole process, by bootstrapping your top level Angular NgModule
.
// We bootstrap the Angular module as we would do in a normal Angular app. // (We are using the dynamic browser platform as this example has not been compiled AOT.) platformBrowserDynamic().bootstrapModule(Ng2AppModule);
There is no specific API for upgrading an AngularJS service. Instead you should just follow the following recipe:
Let's say you have an AngularJS service:
export class TextFormatter { titleCase(value: string) { return value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase()); } } // This AngularJS service will be "upgraded" to be used in Angular ng1AppModule.service('textFormatter', [TextFormatter]);
Then you should define an Angular provider to be included in your NgModule
providers
property.
// Register an Angular provider whose value is the "upgraded" AngularJS service {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']}
Then you can use the "upgraded" AngularJS service by injecting it into an Angular component or service.
constructor(textFormatter: TextFormatter) { // Change all the hero names to title case, using the "upgraded" AngularJS service this.heroes.forEach((hero: Hero) => hero.name = textFormatter.titleCase(hero.name)); }
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/upgrade/static/UpgradeModule