├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── example
├── devTools.js
├── index.html
├── index.js
├── package.json
├── server.js
├── styles.css
├── webpack.config.js
└── yarn.lock
├── index.d.ts
├── karma.conf.js
├── package.json
├── src
├── __tests__
│ ├── index.js
│ ├── router-actions.test.js
│ ├── router-listener.test.js
│ ├── router-state-reducer.test.js
│ ├── state-activation-actions.test.js
│ ├── state-change-actions.test.js
│ ├── state-change-error.test.js
│ ├── state-change-finish.test.js
│ ├── state-change-start.test.js
│ ├── state-change-success.test.js
│ ├── state-go.test.js
│ ├── state-middleware.test.js
│ ├── state-reload.test.js
│ └── state-transition-to.test.js
├── action-types.js
├── index.js
├── router-listener.js
├── router-middleware.js
├── router-state-reducer.js
├── state-activation-actions.js
├── state-change-actions.js
├── state-change-error.js
├── state-change-finish.js
├── state-change-start.js
├── state-change-success.js
├── state-go.js
├── state-reload.js
└── state-transition-to.js
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-0"]
3 | }
4 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | end_of_line = lf
5 | insert_final_newline = true
6 | indent_style = space
7 | indent_size = 2
8 | trim_trailing_whitespace = true
9 | charset = utf-8
10 | max_line_length = 80
11 | indent_brace_style = 1TBS
12 | spaces_around_operators = true
13 | quote_type = auto
14 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | src/__tests__/**
2 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint", // https://github.com/babel/babel-eslint
3 | "env": { // http://eslint.org/docs/user-guide/configuring.html#specifying-environments
4 | "browser": true, // browser global variables
5 | "node": true // Node.js global variables and Node.js-specific rules
6 | },
7 | "ecmaFeatures": {
8 | "arrowFunctions": true,
9 | "blockBindings": true,
10 | "classes": true,
11 | "defaultParams": true,
12 | "destructuring": true,
13 | "forOf": true,
14 | "generators": false,
15 | "modules": true,
16 | "objectLiteralComputedProperties": true,
17 | "objectLiteralDuplicateProperties": false,
18 | "objectLiteralShorthandMethods": true,
19 | "objectLiteralShorthandProperties": true,
20 | "spread": true,
21 | "superInFunctions": true,
22 | "templateStrings": true
23 | },
24 | "rules": {
25 | "no-undef": 0,
26 | /**
27 | * Strict mode
28 | */
29 | "strict": [2, "never"], // http://eslint.org/docs/rules/strict
30 |
31 | /**
32 | * ES6
33 | */
34 | "no-var": 2, // http://eslint.org/docs/rules/no-var
35 | "prefer-const": 2, // http://eslint.org/docs/rules/prefer-const
36 |
37 | /**
38 | * Variables
39 | */
40 | "no-shadow": 2, // http://eslint.org/docs/rules/no-shadow
41 | "no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names
42 | "no-unused-vars": [2, { // http://eslint.org/docs/rules/no-unused-vars
43 | "vars": "local",
44 | "args": "after-used"
45 | }],
46 | "no-use-before-define": 0, // http://eslint.org/docs/rules/no-use-before-define
47 |
48 | /**
49 | * Possible errors
50 | */
51 | "comma-dangle": [2, "always-multiline"], // http://eslint.org/docs/rules/comma-dangle
52 | "no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign
53 | "no-console": 1, // http://eslint.org/docs/rules/no-console
54 | "no-debugger": 1, // http://eslint.org/docs/rules/no-debugger
55 | "no-alert": 1, // http://eslint.org/docs/rules/no-alert
56 | "no-constant-condition": 1, // http://eslint.org/docs/rules/no-constant-condition
57 | "no-dupe-keys": 2, // http://eslint.org/docs/rules/no-dupe-keys
58 | "no-duplicate-case": 2, // http://eslint.org/docs/rules/no-duplicate-case
59 | "no-empty": 2, // http://eslint.org/docs/rules/no-empty
60 | "no-ex-assign": 2, // http://eslint.org/docs/rules/no-ex-assign
61 | "no-extra-boolean-cast": 0, // http://eslint.org/docs/rules/no-extra-boolean-cast
62 | "no-extra-semi": 2, // http://eslint.org/docs/rules/no-extra-semi
63 | "no-func-assign": 2, // http://eslint.org/docs/rules/no-func-assign
64 | "no-inner-declarations": 2, // http://eslint.org/docs/rules/no-inner-declarations
65 | "no-invalid-regexp": 2, // http://eslint.org/docs/rules/no-invalid-regexp
66 | "no-irregular-whitespace": 2, // http://eslint.org/docs/rules/no-irregular-whitespace
67 | "no-obj-calls": 2, // http://eslint.org/docs/rules/no-obj-calls
68 | "no-sparse-arrays": 2, // http://eslint.org/docs/rules/no-sparse-arrays
69 | "no-unreachable": 2, // http://eslint.org/docs/rules/no-unreachable
70 | "use-isnan": 2, // http://eslint.org/docs/rules/use-isnan
71 | "block-scoped-var": 0, // http://eslint.org/docs/rules/block-scoped-var
72 |
73 | /**
74 | * Best practices
75 | */
76 | "consistent-return": 2, // http://eslint.org/docs/rules/consistent-return
77 | "curly": [2, "multi-line"], // http://eslint.org/docs/rules/curly
78 | "default-case": 2, // http://eslint.org/docs/rules/default-case
79 | "dot-notation": [2, { // http://eslint.org/docs/rules/dot-notation
80 | "allowKeywords": true
81 | }],
82 | "eqeqeq": 2, // http://eslint.org/docs/rules/eqeqeq
83 | "guard-for-in": 0, // http://eslint.org/docs/rules/guard-for-in
84 | "no-caller": 2, // http://eslint.org/docs/rules/no-caller
85 | "no-else-return": 2, // http://eslint.org/docs/rules/no-else-return
86 | "no-eq-null": 2, // http://eslint.org/docs/rules/no-eq-null
87 | "no-eval": 2, // http://eslint.org/docs/rules/no-eval
88 | "no-extend-native": 2, // http://eslint.org/docs/rules/no-extend-native
89 | "no-extra-bind": 2, // http://eslint.org/docs/rules/no-extra-bind
90 | "no-fallthrough": 2, // http://eslint.org/docs/rules/no-fallthrough
91 | "no-floating-decimal": 2, // http://eslint.org/docs/rules/no-floating-decimal
92 | "no-implied-eval": 2, // http://eslint.org/docs/rules/no-implied-eval
93 | "no-lone-blocks": 2, // http://eslint.org/docs/rules/no-lone-blocks
94 | "no-loop-func": 2, // http://eslint.org/docs/rules/no-loop-func
95 | "no-multi-str": 2, // http://eslint.org/docs/rules/no-multi-str
96 | "no-native-reassign": 2, // http://eslint.org/docs/rules/no-native-reassign
97 | "no-new": 2, // http://eslint.org/docs/rules/no-new
98 | "no-new-func": 2, // http://eslint.org/docs/rules/no-new-func
99 | "no-new-wrappers": 2, // http://eslint.org/docs/rules/no-new-wrappers
100 | "no-octal": 2, // http://eslint.org/docs/rules/no-octal
101 | "no-octal-escape": 2, // http://eslint.org/docs/rules/no-octal-escape
102 | "no-param-reassign": 2, // http://eslint.org/docs/rules/no-param-reassign
103 | "no-proto": 2, // http://eslint.org/docs/rules/no-proto
104 | "no-redeclare": 2, // http://eslint.org/docs/rules/no-redeclare
105 | "no-return-assign": 2, // http://eslint.org/docs/rules/no-return-assign
106 | "no-script-url": 2, // http://eslint.org/docs/rules/no-script-url
107 | "no-self-compare": 2, // http://eslint.org/docs/rules/no-self-compare
108 | "no-sequences": 2, // http://eslint.org/docs/rules/no-sequences
109 | "no-throw-literal": 2, // http://eslint.org/docs/rules/no-throw-literal
110 | "no-with": 2, // http://eslint.org/docs/rules/no-with
111 | "radix": 2, // http://eslint.org/docs/rules/radix
112 | "vars-on-top": 2, // http://eslint.org/docs/rules/vars-on-top
113 | "wrap-iife": [2, "any"], // http://eslint.org/docs/rules/wrap-iife
114 | "yoda": 2, // http://eslint.org/docs/rules/yoda
115 |
116 | /**
117 | * Style
118 | */
119 | "indent": [2, 2], // http://eslint.org/docs/rules/indent
120 | "brace-style": [2, // http://eslint.org/docs/rules/brace-style
121 | "1tbs", {
122 | "allowSingleLine": true
123 | }],
124 | "quotes": [
125 | 2, "single", "avoid-escape" // http://eslint.org/docs/rules/quotes
126 | ],
127 | "camelcase": [2, { // http://eslint.org/docs/rules/camelcase
128 | "properties": "never"
129 | }],
130 | "comma-spacing": [2, { // http://eslint.org/docs/rules/comma-spacing
131 | "before": false,
132 | "after": true
133 | }],
134 | "comma-style": [2, "last"], // http://eslint.org/docs/rules/comma-style
135 | "eol-last": 2, // http://eslint.org/docs/rules/eol-last
136 | "func-names": 1, // http://eslint.org/docs/rules/func-names
137 | "key-spacing": [2, { // http://eslint.org/docs/rules/key-spacing
138 | "beforeColon": false,
139 | "afterColon": true
140 | }],
141 | "new-cap": [2, { // http://eslint.org/docs/rules/new-cap
142 | "newIsCap": true,
143 | "capIsNew": false
144 | }],
145 | "no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
146 | "max": 2
147 | }],
148 | "no-nested-ternary": 2, // http://eslint.org/docs/rules/no-nested-ternary
149 | "no-new-object": 2, // http://eslint.org/docs/rules/no-new-object
150 | "no-spaced-func": 2, // http://eslint.org/docs/rules/no-spaced-func
151 | "no-trailing-spaces": 2, // http://eslint.org/docs/rules/no-trailing-spaces
152 | "no-extra-parens": [2, "functions"], // http://eslint.org/docs/rules/no-extra-parens
153 | "no-underscore-dangle": 0, // http://eslint.org/docs/rules/no-underscore-dangle
154 | "one-var": [2, "never"], // http://eslint.org/docs/rules/one-var
155 | "padded-blocks": [2, "never"], // http://eslint.org/docs/rules/padded-blocks
156 | "semi": [2, "always"], // http://eslint.org/docs/rules/semi
157 | "semi-spacing": [2, { // http://eslint.org/docs/rules/semi-spacing
158 | "before": false,
159 | "after": true
160 | }],
161 | "keyword-spacing": 2, // http://eslint.org/docs/rules/space-after-keywords
162 | "space-before-blocks": 2, // http://eslint.org/docs/rules/space-before-blocks
163 | "space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren
164 | "space-infix-ops": 2, // http://eslint.org/docs/rules/space-infix-ops
165 | "spaced-comment": 2 // http://eslint.org/docs/rules/spaced-comment
166 | }
167 | }
168 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | *.log
3 |
4 | .lock-wscript
5 | .idea/
6 | *~
7 | \#*#
8 | .#*
9 | *.keystore
10 | *.sw*
11 | .DS_Store
12 | ._*
13 | Thumbs.db
14 | .cache
15 | *.sublime-project
16 | *.sublime-workspace
17 | *swp
18 | *swo
19 | *swn
20 | package
21 | build
22 | temp
23 | .tmp
24 | node_modules
25 | bower_components
26 | jspm_packages
27 | .test
28 | www
29 | lib/
30 | dist
31 | lib
32 | coverage
33 | *.tgz
34 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | test
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Neil Fenton
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # redux-ui-router
2 |
3 | > ngRedux bindings for Angular UI Router - Keep your router state inside your ngRedux store.
4 |
5 | - Maintains router state inside your store
6 | - Use actions to transition your UI instead of `$state`
7 | - Use your store state to access route params instead of `$stateParams`
8 |
9 | ## Getting Started
10 |
11 | ### Installation
12 | ```bash
13 | $ npm install redux-ui-router
14 | ````
15 |
16 | ## Table of Contents
17 |
18 | - [Reducer](#reducer)
19 | - [Actions](#actions)
20 | - [Middleware](#middleware)
21 | - [Listener](#listener)
22 | - [Example](#example)
23 |
24 | ## Reducer
25 |
26 | ngRedux UI Router includes a reducer which is responsible for managing the current route parameters inside your store.
27 |
28 | ### Usage:
29 |
30 | Include this reducer by importing it from `redux-ui-router`:
31 |
32 | ```
33 | import {combineReducers} from 'redux';
34 | import {router} from 'redux-ui-router';
35 | import myReducer from './myReducer';
36 |
37 | const rootReducer = combineReducers({
38 | myReducer,
39 | router
40 | });
41 |
42 | export default rootReducer;
43 | ```
44 |
45 | This will provide you the ability to tap into the current route parameters from `state.router`. Typically route parameters would come from `$stateParams`, instead you will now use `state.router` to grab these parameters. This makes it easier when you derive new data from your store, or when you perform an action that requires a state parameter.
46 |
47 | **Note:** This pattern will require you to enforce it yourself, there is nothing preventing you from using `$stateParams`.
48 |
49 | In a controller or selector, we can now access the state of the router:
50 |
51 | ```
52 | class SomeController {
53 | constructor($ngRedux,$scope) {
54 | let disconnect = $ngRedux.connect(state => ({router: state.router}))(this);
55 | ...
56 | }
57 | }
58 | ```
59 |
60 | **Note:** As of v0.4.0, Immutable.js is no longer used. To access router properties, use `router.currentParams[myParam]` instead of `router.getIn(['currentParams', 'myParam'])`.
61 |
62 | ## Actions
63 |
64 | ngRedux UI Router includes several actions which mimic functionality that Angular UI Router provides. These actions should be used instead of interacting directly with `$state`. These actions can be imported directly from `redux-ui-router`.
65 |
66 | ### Usage:
67 |
68 | #### stateGo(to, params, options)
69 |
70 | This action create will trigger a $state.go in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.go function.
71 |
72 | [Documentation Reference](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options)
73 |
74 | #### stateReload(to, params, options)
75 |
76 | This action create will trigger a $state.reload in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.reload function.
77 |
78 | [Documentation Reference](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statereload)
79 |
80 | #### stateTransitionTo(to, params, options)
81 |
82 | This action create will trigger a $state.transitionTo in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.transitionTo function.
83 |
84 | [Documentation Reference](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statetransitiontoto-toparams--options)
85 |
86 | ## Middleware
87 |
88 | ngRedux UI Router includes a middleware for performing `$state` interactions based on the above actions being fired. Whenever one of the above actions is fired, the corresponding `$state` function is called. For example, firing the `stateGo` action will cause the middleware to perform a `$state.go` function under the hood, and then inform the system that upon resolving the transition, that the action was fired.
89 |
90 | ### Usage:
91 |
92 | The middleware should be used when creating your ngRedux store, this should be done as follows:
93 |
94 | ```
95 | $ngReduxProvider.createStoreWith(reducers, [
96 | 'myOtherMiddleware',
97 | 'ngUiRouterMiddleware',
98 | thunk,
99 | logger
100 | ]);
101 | ```
102 |
103 | For additional information, refer to the [ngRedux documentation](https://github.com/wbuchwalter/ng-redux#api).
104 |
105 | ## Listener
106 |
107 | ngReudx UI Router provides a listener which taps into Angular UI Router's `$stateChangeStart`, `$locationChangeSuccess`, `$stateChangeError`, and `$stateNotFound` events. The listener is responsible for firing actions whenever one of these events occur. This allows us to track the state of the router whenever it is interacted with.
108 |
109 | ### Usage:
110 |
111 | This listener is in the run block of the ngReduxUiRouter module. Including it in your app module will automatically set this up to begin listening to UI Router events.
112 |
113 | ```
114 | // Import Angular
115 | import angular from 'angular';
116 | import ngRedux from 'ng-redux';
117 | import ngReduxUiRouter from 'redux-ui-router';
118 |
119 | // Import Angular Components
120 | import components from './components';
121 |
122 | // Import Configuration
123 | import configNgReduxProvider from './config/ng-redux';
124 |
125 | export default angular
126 | .module('myApp', [
127 | ngRedux,
128 | ngReduxUiRouter,
129 | components
130 | ])
131 | .config(configNgReduxProvider)
132 | .name;
133 |
134 | ```
135 |
136 | ## Example
137 |
138 | For a more complete example, take a look at [the example here](https://github.com/neilff/redux-ui-router/tree/master/example).
139 |
140 | To run the example:
141 |
142 | ```
143 | git clone https://github.com/neilff/redux-ui-router/
144 | npm install
145 | cd example
146 | npm install
147 | npm run start
148 | ```
149 |
--------------------------------------------------------------------------------
/example/devTools.js:
--------------------------------------------------------------------------------
1 | import { createDevTools} from 'redux-devtools';
2 | import { render } from 'react-dom';
3 | import LogMonitor from 'redux-devtools-log-monitor';
4 | import DockMonitor from 'redux-devtools-dock-monitor';
5 | import SliderMonitor from 'redux-slider-monitor';
6 | import React from 'react'
7 | import { Provider } from 'react-redux';
8 |
9 | const DevTools = createDevTools(
10 |
13 |
14 |
15 |
16 | );
17 |
18 | export function runDevTools($ngRedux, $rootScope) {
19 | render(
20 |
21 |
22 |
23 |
24 | ,
25 | document.getElementById('devTools')
26 | );
27 |
28 | //Hack to reflect state changes when disabling/enabling actions via the monitor
29 | $ngRedux.subscribe(_ => {
30 | setTimeout($rootScope.$apply.bind($rootScope), 100);
31 | });
32 | }
33 |
34 | export default DevTools;
35 |
36 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ng-redux-ui-router
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import angular from 'angular';
2 | import uiRouter from '@uirouter/angularjs';
3 |
4 | import ngRedux from 'ng-redux';
5 | import { combineReducers } from 'redux';
6 | import thunk from 'redux-thunk';
7 | import createLogger from 'redux-logger';
8 | import { default as DevTools, runDevTools } from './devTools';
9 |
10 | import ngReduxRouter from '../src';
11 |
12 | import { router, stateGo, stateReload, stateTransitionTo } from '../src';
13 |
14 | const routerActions = {
15 | stateGo,
16 | stateReload,
17 | stateTransitionTo,
18 | };
19 |
20 | export default angular
21 | .module('demoApp', [uiRouter, ngRedux, ngReduxRouter])
22 | .config(($urlRouterProvider, $stateProvider) => {
23 | $urlRouterProvider.otherwise('/app');
24 |
25 | $stateProvider
26 | .state('app', {
27 | url: '/app',
28 | views: {
29 | main: {
30 | template: `
31 | {{ globalState | json }}
32 |
33 |
Main View
34 |
35 |
46 |
47 |
75 |
Child View 1
76 |
77 |
78 |
79 |
80 | `,
81 | },
82 | },
83 | })
84 | .state('app.child2', {
85 | url: '/child2',
86 | views: {
87 | child: {
88 | controller: ($scope, $ngRedux) => {
89 | const disconnect = $ngRedux.connect(
90 | state => state,
91 | routerActions
92 | )($scope);
93 |
94 | $scope.$on('$destroy', disconnect);
95 | },
96 | template: `
97 |
98 |
Child View 2
99 |
100 |
101 |
102 |
103 | `,
104 | },
105 | },
106 | })
107 | .state('app.child3', {
108 | url: '/child3?id',
109 | params: {
110 | hello: 'world',
111 | },
112 | reloadOnSearch: false,
113 | views: {
114 | child: {
115 | controller: ($scope, $ngRedux) => {
116 | const disconnect = $ngRedux.connect(
117 | state => state,
118 | routerActions
119 | )($scope);
120 |
121 | $scope.$on('$destroy', disconnect);
122 | },
123 | template: `
124 |
125 |
Child View 3
126 | ID: {{router.currentParams.id}}
127 |
128 |
129 |
130 |
131 | `,
132 | },
133 | },
134 | })
135 | .state('app.child4', {
136 | url: '/child4',
137 | prohibited: true,
138 | views: {
139 | child: {
140 | template: `
141 |
142 |
Child View 4
143 |
This state is prohibited. You should've been redirected to the root.
144 |