• ui-router-ng2 home page
• tutorials
• quick start repository

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";

• Create application states (as defined by Ng2StateDeclaration).

export let state1: Ng2StateDeclaration = {
  name: 'state1',
  component: State1Component,
  url: '/one'
}

export let state2: Ng2StateDeclaration = {
  name: 'state2',
  component: State2Component,
  url: '/two'
}

• Import a UIRouterModule.forChild module into your feature NgModules.

@ NgModule({
  imports: [
    SharedModule,
    UIRouterModule.forChild({ states: [state1, state2 ] })
  ],
  declarations: [
    State1Component,
    State2Component,
  ]
})
export class MyFeatureModule {}

• Import a UIRouterModule.forRoot module into your application root NgModule
• Either bootstrap a UIView component, or add a <ui-view></ui-view> viewport to your root component.

@ NgModule({
  imports: [
    BrowserModule,
    UIRouterModule.forRoot({ states: [ homeState ] }),
    MyFeatureModule,
  ],
  declarations: [
    HomeComponent
  ]
  bootstrap: [ UIView ]
})
class RootAppModule {}

browserPlatformDynamic.bootstrapModule(RootAppModule);

• Optionally specify a configuration class [[ChildModule.configClass]] for any module to perform any router configuration during bootstrap or lazyload. Pass the class to UIRouterModule.forRoot or UIRouterModule.forChild.

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

@ Injectable()
export class MyUIRouterConfig {
  // Constructor is injectable
  constructor(uiRouter: UIRouter) {
    uiRouter.urlMatcherFactory.type('datetime', myDateTimeParamType);
  }
}