improve integration with ngUpgrade

[Hotell]

basically few things to implement:

upgradeAdapter singleton creation

mitigate creating upgrade adapter manually

pure ngUpgrade:

import {UpgradeAdapter} from '@angular/upgrade';
export const upgradeAdapter = new UpgradeAdapter();

ngUpgrade+ngMetadata:
with something like

import {upgradeAdapter} from 'ng-metadata/upgrade';

Bootstraping hybrid app

pure ngUpgrade:

import {UpgradeAdapter} from '@angular/upgrade';
export const upgradeAdapter = new UpgradeAdapter();

const AppModule = angular.module('contacts-app', [...]);

upgradeAdapter.bootstrap(document.body, [AppModule]);

ngUpgrade+ngMetadata:

import {bootstrap} from 'ng-metadata/upgrade';

const AppModule = angular.module('contacts-app', [...]);

bootstrap(AppModule);

Downgrading Component

pure ngUpgrade:

import {upgradeAdapter} from 'upgrade-adapter';
// angular 2 component
import {ContactsListItemComponent} from '...';

angular.module('contacts-list-item-component', [])

.directive('contactsListItemComponent',
  upgradeAdapter.downgradeNg2Component(ContactsListItemComponent)
);

ngUpgrade+ngMetadata:

import {downgradeNg2Component} from 'ng-metadata/upgrade;
// angular 2 component
import {ContactsListItemComponent} from '...';

angular.module('contacts-list-item-component', [])
  // no strings! yay!
  .directive( ...downgradeNg2Component(ContactsListItemComponent) )
);

Upgrading Component

ngMetadata Angular 1 Component

import { Component, Input, Output, EventEmitter } from 'ng-metadata/core';
import { provide } from 'ng-metadata/core';

@Component({
  selector: 'zippy',
  template: `...`,
  legacy: { transclude: true }
})
class ZippyComponent{
  @Input() closed: boolean;
  @Input() title: string;
  @Output() toggle = new EventEmitter<any>();
}

angular.module('myModule',[]).directive(...provide(ZippyComponent));

upgraded to:

• switch import source path to @angular
• remove legacy property
• switch registration to angular.module with downgradeNg2Component instead of provide ( only if you still need to use it within Angular 1 context/components )

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { downgradeNg2Component } from 'ng-metadata/core';

@Component({
  selector: 'zippy',
  template: `...`
})
class ZippyComponent{
  @Input() closed: boolean;
  @Input() title: string;
  @Output() toggle = new EventEmitter<any>();
}

// only if you still need to use it within angular 1
angular.module('myModule',[]).directive(...downgradeNg2Component(ZippyComponent));

template usage
no changes, the same for both :)

<zippy
  [title]="zippyCaption"
  (toggle)="toggleCaption($event.closed)">
</zippy>

Upgrading Providers(Services)

ngMetadata Angular 1 Service

import { Injectable } from 'ng-metadata/core';
import { provide } from 'ng-metadata/core';

@Injectable()
class ContactsService {

  private CONTACT_DATA = [...];

  getContacts() {
    return this.CONTACT_DATA;
  }

  getContact(id: string) {
    return this.CONTACT_DATA
      .find(contact => contact.id === id);
  }
}

angular.module('myModule',[]).service( ...provide(ContactsService) )

Angular 2 Service

• change import sources to angular
• switch registration to angular.module with downgradeNg2Provider instead of provide ( only if you still need to use it within Angular 1 context )
• if step 2 was needed we need to "take it back" for angular 2 via upgradeAdapter.addProvider(ContactsService);

import { Injectable } from '@angular/core';
import { downgradeNg2Provider, addProvider } from 'ng-metadata/upgrade';

@Injectable()
class ContactsService {

  private CONTACT_DATA = [...];

  getContacts() {
    return this.CONTACT_DATA;
  }

  getContact(id: string) {
    return this.CONTACT_DATA
      .find(contact => contact.id === id);
  }
}

// if you still need to use that service within Angular 1
angular.module('myModule',[]).service( ...downgradeNg2Provider(ContactsService) )
// if you need it in angular 1 and you downgraded it, take it back also for Angular 2 
addProvider(ContactsService);