@uirouter/rx
Reactive extensions for UI-Router
Last updated 15 days ago by christopherthielen .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @uirouter/rx 
SYNC missed versions from official npm registry.

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();

Current Tags

  • 0.6.0                                ...           latest (15 days ago)

11 Versions

  • 0.6.0                                ...           15 days ago
  • 0.5.0                                ...           a year ago
  • 0.5.0-alpha.1                                ...           a year ago
  • 0.4.5                                ...           2 years ago
  • 0.4.4                                ...           2 years ago
  • 0.4.3 [deprecated]           ...           2 years ago
  • 0.4.2                                ...           2 years ago
  • 0.4.1                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.3.2                                ...           2 years ago
  • 0.3.1                                ...           2 years ago

Copyright 2014 - 2017 © taobao.org |