ui-router-rx

Reactive Extensions (RxJS) for UI-Router

What

This UI-Router plugin exposes various events in UI-Router as RxJS Observables.

• Transitions (successfull, or any)
• Parameter values
• State registration/deregistrations

This helps you to use UI-Router in a reactive mode.

This plugin works with UI-Router Core 2.0 and above (angular-ui-router 1.0.0-rc.1+, ui-router-ng2 1.0.0-beta.4+, ui-router-react 0.4.0+).

Getting

npm install ui-router-rx

Enabling

This is a UI-Router Plugin. Add the UIRouterRx plugin to your app's UIRouter instance.

import { UIRouterRx } from "ui-router-rx";

// ... after UI-Router bootstrap, get a reference to the `UIRouter` instance
// ... call `.plugin()` to register the ui-router-rx plugin
uiRouter.plugin(UIRouterRx);

Using

In a state definition,

const foo$ = (uiRouter) => 
    uiRouter.globals.params$.map(params => params.fooId)
      .distinctUntilChanged()
      .map(fooId => fetch('/foo/' + fooId).then(resp => resp.json()))

var fooState = {
  name: 'foo',
  url: '/foo/{fooId}',
  component: FooComponent,
  resolve: [ 
      { token: 'foo$', deps: [ UIRouter ], resolveFn: foo$ } 
  ]
})

In the component, access the foo$ resolve value (it will be an Observable). Subscribe to it and do something with it when it emits a new value.

var subscription = foo$.subscribe(foo => this.foo = foo);

Don't forget to unsubscribe when the component is destroyed.

subscription.unsubscribe();

0.2.1 (2017-04-22)

• chore(*): Rename npm package from ui-router-rx to @uirouter/rx
• chore(*): Switch dependency from ui-router-core to @uirouter/core

0.2.1 (2017-01-22)

• fix(*): fix peer dependency for ui-router-core (from ^3.1.1 to >=3.1.1) (4a29191)

0.2.0 (2017-01-20)

• feat(*): Replace with (more up to date) code from https://github.com/ui-router/ng2/blob/45c73 (f98574e)

0.1.0

• Add package.json (e4bd097)
• Create README.md (c5305d6)
• Create ui-router-react.ts (a1c5346)
• Initial commit (b5e9dd2)
• Update readme (5ec502f)
• Update README.md (2b616a4)