ui-router-ng1-to-ng2-dstellini
v1.0.7
Published
### Hybrid Angular 1/Angular 2 UI-Router apps
Downloads
5
Readme
UI-Router ng1-to-ng2
Hybrid Angular 1/Angular 2 UI-Router apps
This module provides ngUpgrade support for UI-Router, allowing hybrid ng1/ng2 UI-Router apps.
Your app will be hosted on Angular 1 while you incrementally upgrade it to Angular 2. After configuring your app, you can use an Angular 2 Component as a view in your state definitions.
Once you route to a ng2 component, you can continue to use the ng2 directives (ui-view and uiSref) from ui-router-ng2. We do not yet support nesting an angular 1 directive inside an angular 2 ui-view. Because of this, apps should be migrated starting from leaf views up to the root state.
See example here.
Getting started
Add "ui-router-ng1-to-ng2" to your package.json
dependencies: {
...
"ui-router-ng1-to-ng2": "^1.0.6"
}Switch your app from bootstrapping using ng-app to using the ngUpgrade manual bootstrap
// Create an upgrade adapter instance
import {UpgradeAdapter} from 'angular2/upgrade';
export const upgradeAdapter = new UpgradeAdapter();
// Supply ui-router-ng1-to-ng2 with the upgrade adapter
import {uiRouterNgUpgrade} from "ui-router-ng1-to-ng2";
uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);
// Manually bootstrap the app with the Upgrade Adapter (instead of ng-app)
// Add 'ui.router.upgrade' to your apps module depedencies
upgradeAdapter.bootstrap(document.body, ['myApp', 'ui.router.upgrade']);Route to components
Use component: in your state declaration
var leaf = {
name: 'foo.bar.leaf',
url: '/leaf',
component: MyNg2CommponentClass
};
$stateProvider.state(leaf);Declare ui-view at the top level of your application
<html>
<body>
<ui-view></ui-view>
</body>
</html>