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>

FAQs

What is ui-router-ng1-to-ng2-dstellini?

Is ui-router-ng1-to-ng2-dstellini well maintained?

Package last updated on 05 Jul 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

ui-router-ng1-to-ng2-dstellini