Feature: support hybrid ng1 + ng2 apps using ng-upgrade

[christopherthielen]

Now that ui-router supports ng2, it would help people upgrade if we supported ng1/ng2 hybrid apps using the ng-upgrade feature of ng2.

This feature has three primary implementation aspects:

1. Providing the ng2 components with a UIRouter instance object, which was originally bootstrapped by ng1
2. Render a state's view using an ng2 component
3. Provide the parent view's context to a new ui-view

---

1)

The bootstrap will use ng-upgrade to expose the ng1 service ng1UIRouter as the ng2 provider, using the UIRouter class as a token. The UiView, UiSref, etc inject the UIRouter class.

2)

We will creating an adapter ng2 component called <ui-view-ng-upgrade>. We will downgrading it to a ng1 directive using ng-upgrade.

The component's template has only an unnamed <ui-view></ui-view>, which is the ng2 ui-view viewport.

The component: syntax in a state/view definition will be used to fill a view with a ng2 Component class. When populating a view, we will check if the component: is a string or an ng2 Component. We'll do this by introspecting the class metadata using reflect-metadata.

Resolve data will be mapped to @Input (as well as injected, as desired). The ng1 bindings: property may be used to customize the resolve to input mapping.

3)

The component will retrieve the ng1-style "view context details" from the DOM (using angular.element(...).inheritedData("$uiView")). It will define a provider which the actual ng2 ui-view will inject, which contains the ng1 view context details.

[christopherthielen]

http://github.com/ui-router/ng1-to-ng2