1 | # ui-router-rx
|
2 | Reactive Extensions (RxJS) for UI-Router
|
3 |
|
4 | ### What
|
5 |
|
6 | This UI-Router plugin exposes various events in UI-Router
|
7 | as [RxJS](https://github.com/ReactiveX/rxjs) Observables.
|
8 |
|
9 | - Transitions (successfull, or any)
|
10 | - Parameter values
|
11 | - State registration/deregistrations
|
12 |
|
13 | This helps you to use UI-Router in a reactive mode.
|
14 |
|
15 | 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+).
|
16 |
|
17 |
|
18 | ### Getting
|
19 |
|
20 | ```
|
21 | npm install ui-router-rx
|
22 | ```
|
23 |
|
24 | ### Enabling
|
25 |
|
26 | This is a UI-Router Plugin.
|
27 | Add the `UIRouterRx` plugin to your app's `UIRouter` instance.
|
28 |
|
29 | ```js
|
30 | import { UIRouterRx } from "ui-router-rx";
|
31 |
|
32 | // ... after UI-Router bootstrap, get a reference to the `UIRouter` instance
|
33 | // ... call `.plugin()` to register the ui-router-rx plugin
|
34 | uiRouter.plugin(UIRouterRx);
|
35 | ```
|
36 |
|
37 | ### Using
|
38 |
|
39 | In a state definition,
|
40 |
|
41 | ```js
|
42 | const foo$ = (uiRouter) =>
|
43 | uiRouter.globals.params$.map(params => params.fooId)
|
44 | .distinctUntilChanged()
|
45 | .map(fooId => fetch('/foo/' + fooId).then(resp => resp.json()))
|
46 |
|
47 | var fooState = {
|
48 | name: 'foo',
|
49 | url: '/foo/{fooId}',
|
50 | component: FooComponent,
|
51 | resolve: [
|
52 | { token: 'foo$', deps: [ UIRouter ], resolveFn: foo$ }
|
53 | ]
|
54 | })
|
55 | ```
|
56 |
|
57 | 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.
|
58 |
|
59 | ```js
|
60 | var subscription = foo$.subscribe(foo => this.foo = foo);
|
61 | ```
|
62 |
|
63 | Don't forget to unsubscribe when the component is destroyed.
|
64 |
|
65 | ```js
|
66 | subscription.unsubscribe();
|
67 | ```
|
68 |
|
69 |
|