Coder Social home page Coder Social logo

dsr's Introduction

Deep State Redirect

DSR for UI-Router 1.0  Build Status

With Deep State Redirect, a parent state remembers whatever child state was last activated. When the user directly reactivates the parent state, they are redirected to the nested state (which was previously activated).

Overview and Use Case

Deep State Redirect (DSR) is a marker you can add to a state definition.

When a child state of the DSR marked state is activated, UI-Router Extras remembers the child and its parameters. The most-recently-activate child is remembered no matter where the user navigates in the state tree. When the DSR marked state is directly activated, UI-Router Extras will redirect to the remembered child state and parameters.

One use case for DSR is a tabbed application. Each tab might contain an application module. Each tabs' state is marked as deepStateRedirect. When the user navigates into the tab, and drills down to a substate, DSR will remember the substate. The user can then navigate to other tabs (or somewhere else completely). When they click the original tab again, it will transition to the remembered ehild state and parameters of that tab, making it appear that the tab was never destructed.

Deep State Redirect can be used with StickyStates, or on its own. If used with a Sticky State, the states will be reactivated, and the DOM will be unchanged (as opposed to the states being re-entered and controllers re-initialized)

Using

See: http://christopherthielen.github.io/ui-router-extras/#/dsr

TODO: Move docs here

Using a custom DataStore

By default DSR stores the most recent redirects in memory. Alternatively, you can store the redirects in Local Storage using LocalStorageDataStore or create your own DataStore.

When registering the DSRPlugin, pass an options object with a dataStore property, i.e.:

router.plugin(DSRPlugin, { dataStore: new LocalStorageDataStore() });

Example Builds

The /examples directory contains example setups for:

  • Angular-CLI
  • AngularJS + bower + script tags
  • AngularJS + npm + script tags
  • AngularJS + webpack
  • Create-React-App

dsr's People

Contributors

dependabot-preview[bot] avatar christopherthielen avatar dependabot[bot] avatar uirouterbot avatar daneget avatar DavideCordella avatar greenkeeper[bot] avatar

Stargazers

Sven avatar Ben Merchant avatar Mark Pruett avatar Mr. Andrey avatar Seo Seokjin avatar Christopher Cortes avatar  avatar Yang Zhou avatar  avatar Rémy Dufour avatar Peter Leibiger avatar Jim Cummins avatar Chris Guerrero avatar  avatar

Watchers

James Cloos avatar Chris Thielen avatar Artem avatar

dsr's Issues

Feature Request: Release 1.0.3 to npm registry

We use ui-router/dsr in our angularJs frontends and are impacted by Issue #2

I just noticed that the issue has already been closed and is in the 1.0.3 milestone - which does not contain further issues.

Would you mind doing a release of that to npmjs.com registry? This would simplify working around that problem heavily for us. I'd like to avoid to npm install ui-router/dsr directly from github or creating a fork just to publish with a different name.

Wrong StateDeclaration override

I have included this library in a typescript project and tsc has started throwing compile errors because I'm using missing fields in StateDeclaration.

This doesn't happend with sticky-states which I've included before this one, so after looking at StateDeclaration overrides in two project I've seen that StateDeclaration it's defined with different module names:

StateDeclaration in @uirouter/dsr

declare module "@uirouter/core" {
  interface StateDeclaration {
    dsr?: any;
    deepStateRedirect?: any;
  }
}

StateDeclaration in @uirouter/sticky-states

declare module "@uirouter/core/lib/state/interface" {
  interface StateDeclaration {
    sticky?: boolean;
    onInactivate?: TransitionStateHookFn;
    onReactivate?: TransitionStateHookFn;
  }
}

I suggest to modify this declaration to have the same module name as in sticky-states module, because with that change tsc would compile projects correctly

NPM Package?

Hi,
We'd love to use this but I couldn't find an NPM package. Any chance you could publish one?
Thanks for all the great work, @christopherthielen !
Cheers

AngularJS example

Thanks UI router team and @christopherthielen for updating DSR to work with UI-Router 1.x!

I didn't see any note on usage with AngularJS, but this is what I'm using with v1.6:

/**
 * @module $deepStateRedirect
 */

import angular from 'angular';
import uiRouter from '@uirouter/angularjs';
import { DSRPlugin } from '@uirouter/dsr';

export const name = 'ct.ui.router.extras.dsr';

export default angular.module(name, [uiRouter])
	.provider('$deepStateRedirect', $uiRouterProvider => {
		'ngInject';
		const $deepStateRedirect = $uiRouterProvider.plugin(DSRPlugin);
		Object.defineProperty($deepStateRedirect, '$get', {
			value: () => $deepStateRedirect,
		});
		return $deepStateRedirect;
	})
	.config($deepStateRedirectProvider => {
		'ngInject';
	})
	.run($deepStateRedirect => {
		'ngInject';
	})
	.name;

Would be nice to have some documentation (per #5) explaining AngularJS (and other integrations), or even include integrations in this repo.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.