UpgradeAdapterlink

      
        content_copy
      
      
const 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");
});
    

      
        content_copy
      
      
const 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");
});
    

      
        content_copy
      
      
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();
  })
});
    

      
        content_copy
      
      
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)");
});
    

      
        content_copy
      
      
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);
});
    

      
        content_copy
      
      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');
});