Browse By

UI-Router for Angular 2

angular2-ui-router_logo

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";
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));
    });
  }
}
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 })
]);

Leave a Reply

Your email address will not be published. Required fields are marked *