class
deprecated
Use UpgradeAdapter
to allow AngularJS and Angular to coexist in a single application.
Deprecated: Deprecated since v5. Use upgrade/static
instead, which also supports Ahead-of-Time compilation.
class UpgradeAdapter { constructor(ng2AppModule: Type<any>, compilerOptions?: CompilerOptions) downgradeNg2Component(component: Type<any>): Function upgradeNg1Component(name: string): Type<any> registerForNg1Tests(modules?: string[]): UpgradeAdapterRef bootstrap(element: Element, modules?: any[], config?: IAngularBootstrapConfig): UpgradeAdapterRef upgradeNg1Provider(name: string, options?: { asToken: any; }) downgradeNg2Provider(token: any): Function }
The UpgradeAdapter
allows:
Further information available in the Usage Notes...
|
ng2AppModule | Type | |
compilerOptions | CompilerOptions | Optional. Default is |
downgradeNg2Component() |
---|
Allows Angular Component to be used from AngularJS. |
Use |
Usage NotesMental Model
Supported Features
Exampleconst adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module)); const module = angular.module('myExample', []); module.directive('greet', adapter.downgradeNg2Component(Greeter)); @Component({ selector: 'greet', template: '{{salutation}} {{name}}! - <ng-content></ng-content>' }) class Greeter { @Input() salutation: string; @Input() name: string; } @NgModule({ declarations: [Greeter], imports: [BrowserModule] }) class MyNg2Module {} document.body.innerHTML = 'ng1 template: <greet salutation="Hello" [name]="world">text</greet>'; adapter.bootstrap(document.body, ['myExample']).ready(function() { expect(document.body.textContent).toEqual("ng1 template: Hello world! - text"); }); |
upgradeNg1Component() |
---|
Allows AngularJS Component to be used from Angular. |
Use |
Usage NotesMental Model
Supported Features
Exampleconst adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module)); const module = angular.module('myExample', []); module.directive('greet', function() { return { scope: {salutation: '=', name: '=' }, template: '{{salutation}} {{name}}! - <span ng-transclude></span>' }; }); module.directive('ng2', adapter.downgradeNg2Component(Ng2Component)); @Component({ selector: 'ng2', template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>' }) class Ng2Component { } @NgModule({ declarations: [Ng2Component, adapter.upgradeNg1Component('greet')], imports: [BrowserModule] }) class MyNg2Module {} document.body.innerHTML = '<ng2></ng2>'; adapter.bootstrap(document.body, ['myExample']).ready(function() { expect(document.body.textContent).toEqual("ng2 template: Hello world! - text"); }); |
registerForNg1Tests() | |||
---|---|---|---|
Registers the adapter's AngularJS upgrade module for unit testing in AngularJS. Use this instead of | |||
|
modules | string[] | any AngularJS modules that the upgrade module should depend upon Optional. Default is |
UpgradeAdapterRef
: an UpgradeAdapterRef
, which lets you register a ready()
callback to run assertions once the Angular components are ready to test through AngularJS.
const upgradeAdapter = new UpgradeAdapter(MyNg2Module); // configure the adapter with upgrade/downgrade components and services upgradeAdapter.downgradeNg2Component(MyComponent); let upgradeAdapterRef: UpgradeAdapterRef; let $compile, $rootScope; // We must register the adapter before any calls to `inject()` beforeEach(() => { upgradeAdapterRef = upgradeAdapter.registerForNg1Tests(['heroApp']); }); beforeEach(inject((_$compile_, _$rootScope_) => { $compile = _$compile_; $rootScope = _$rootScope_; })); it("says hello", (done) => { upgradeAdapterRef.ready(() => { const element = $compile("<my-component></my-component>")($rootScope); $rootScope.$apply(); expect(element.html()).toContain("Hello World"); done(); }) });
bootstrap() | |||||||||
---|---|---|---|---|---|---|---|---|---|
Bootstrap a hybrid AngularJS / Angular application. | |||||||||
|
element | Element | |
modules | any[] | Optional. Default is |
config | IAngularBootstrapConfig | Optional. Default is |
This bootstrap
method is a direct replacement (takes same arguments) for AngularJS bootstrap
method. Unlike AngularJS, this bootstrap is asynchronous.
const adapter = new UpgradeAdapter(MyNg2Module); const module = angular.module('myExample', []); module.directive('ng2', adapter.downgradeNg2Component(Ng2)); module.directive('ng1', function() { return { scope: { title: '=' }, template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)' }; }); @Component({ selector: 'ng2', inputs: ['name'], template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)' }) class Ng2 { } @NgModule({ declarations: [Ng2, adapter.upgradeNg1Component('ng1')], imports: [BrowserModule] }) class MyNg2Module {} document.body.innerHTML = '<ng2 name="World">project</ng2>'; adapter.bootstrap(document.body, ['myExample']).ready(function() { expect(document.body.textContent).toEqual( "ng2[ng1[Hello World!](transclude)](project)"); });
upgradeNg1Provider() | ||||||
---|---|---|---|---|---|---|
Allows AngularJS service to be accessible from Angular. | ||||||
|
name | string | |
options | { asToken: any; } | Optional. Default is |
class Login { ... } class Server { ... } @Injectable() class Example { constructor(@Inject('server') server, login: Login) { ... } } const module = angular.module('myExample', []); module.service('server', Server); module.service('login', Login); const adapter = new UpgradeAdapter(MyNg2Module); adapter.upgradeNg1Provider('server'); adapter.upgradeNg1Provider('login', {asToken: Login}); adapter.bootstrap(document.body, ['myExample']).ready((ref) => { const example: Example = ref.ng2Injector.get(Example); });
downgradeNg2Provider() | |||
---|---|---|---|
Allows Angular service to be accessible from AngularJS. | |||
|
token | any |
Function
class Example { } const adapter = new UpgradeAdapter(MyNg2Module); const module = angular.module('myExample', []); module.factory('example', adapter.downgradeNg2Provider(Example)); adapter.bootstrap(document.body, ['myExample']).ready((ref) => { const example: Example = ref.ng1Injector.get('example'); });
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.
$apply()
.const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module), myCompilerOptions); const module = angular.module('myExample', []); module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2Component)); module.directive('ng1Hello', function() { return { scope: { title: '=' }, template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)' }; }); @Component({ selector: 'ng2-comp', inputs: ['name'], template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)', directives: }) class Ng2Component { } @NgModule({ declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')], imports: [BrowserModule] }) class MyNg2Module {} document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>'; adapter.bootstrap(document.body, ['myExample']).ready(function() { expect(document.body.textContent).toEqual( "ng2[ng1[Hello World!](transclude)](project)"); });
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/upgrade/UpgradeAdapter