UI-Router for Angular 2

Many of us fall in love with ui-router in AngularJS 1.x. As you may know it is offering many unique features that you don’t exist in default routing mechanism of AngularJS. Now with Angular2 just around the corner and with the really bad documentation around the default routing module a new version of UI-Router for Angular2 is something that I pray every day! I still can’t forget how long it took me to implement simple child routes… Good news is that there is progress in UI-Router development and actually you can clone a repository and start playing with it. Some documentation can be found here

For the quick start repository, please see http://github.com/ui-router/quickstart-ng2

Getting started:

• Use npm. Add a dependency on latest ui-router-ng2
• Import UI-Router classes directly from "ui-router-ng2"

import {StateRegistry} from "ui-router-ng2";

• When defining a component, add the UIROUTER_DIRECTIVES to directives: array.
• Either bootstrap a UiView component, or add a <ui-view></ui-view> viewport to your root component.
• Create application states (as defined by Ng2StateDeclaration) which will fill in the viewports.
• Create a UIRouterConfig, and register your states in the UIRouterConfig.configure function.

import {UIRouter} from "ui-router-ng2";
import {INITIAL_STATES} from "./app.states";
@ Injectable()
export class MyUIRouterConfig {
  configure(uiRouter: UIRouter) {
    INITIAL_STATES.forEach(function(state) {
      uiRouter.stateRegistry.register(state));
    });
  }
}

• When bootstrapping: include the UIROUTER_PROVIDERS and define a provider for your UIRouterConfig

import {provide} from "angular2/core";
import {bootstrap} from 'angular2/platform/browser';
import {UIRouterConfig, UiView, UIROUTER_PROVIDERS} from "ui-router-ng2";
import {MyUIRouterConfig} from "./router.config";

bootstrap(UiView, [
    ...UIROUTER_PROVIDERS,
    provide(UIRouterConfig, { useClass: MyUIRouterConfig })
]);