ui-router-extras | LONGER MAINTAINED -- Extras for UI-Router for AngularJS | Router library

by christopherthielen JavaScript Version: 0.1.3 License: MIT

X-Ray Key Features Code Snippets Community Discussions(2)Vulnerabilities Install Support

kandi X-RAY | ui-router-extras Summary

ui-router-extras is a JavaScript library typically used in Networking, Router applications. ui-router-extras has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub, Maven.

THIS PROJECT IS NO LONGER MAINTAINED -- Extras for UI-Router for AngularJS. Sticky States (a.k.a. parallel states), Deep State Redirect (for tab-like navigation), Future States (async state definition)

Support

Quality

Security

License

Reuse

Support

ui-router-extras has a medium active ecosystem.

It has 938 star(s) with 217 fork(s). There are 42 watchers for this library.

It had no major release in the last 12 months.

There are 94 open issues and 235 have been closed. On average issues are closed in 55 days. There are 8 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of ui-router-extras is 0.1.3

Quality

ui-router-extras has 0 bugs and 0 code smells.

Security

ui-router-extras has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

ui-router-extras code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

ui-router-extras is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

ui-router-extras releases are available to install and integrate.

Deployable package is available in Maven.

Installation instructions are available. Examples and code snippets are not available.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of ui-router-extras

Get all kandi verified functions for this library.

ui-router-extras Key Features

No Key Features are available at this moment for ui-router-extras.

ui-router-extras Examples and Code Snippets

No Code Snippets are available at this moment for ui-router-extras.

Community Discussions

Trending Discussions on ui-router-extras

Ui-router State Change: Keep Controller and Scope but Destroy DOM

what's the difference between child state and sticky state?

QUESTION

Ui-router State Change: Keep Controller and Scope but Destroy DOM

Asked 2017-Mar-28 at 22:23

I am using ui-router 1.0.0-beta.3, angular 1.5. So far, ui-router is awesome!

I have a root state, with some child states so far, but I noticed switching between siblings (children of the same root parent) causes complete recreation of the state I transition/go to.

I'd like to keep the scope variables around because, in my app, users may toggle some buttons, enter dates, etc, then maybe switch to another state, do something, and switch back but now all their partial work is gone. I'd also like the option to be able to destroy DOM for "inactive" states since in practice some of the states can get pretty large or users might create a lot of DOM so I'd like to keep the DOM as light as possible for some states.

I understand that ui-router-extras sticky-states feature is exactly this! And I could use the $state.includes function to target when I want to destroy DOM on some components. However, it seems ui-router-extras does not work with ui-router 1.0.0-beta.3. The author did make a port for the newer ui-router, but the release is in typescript and I am not sure how to compile that into a single js file. See: https://github.com/ui-router/sticky-states/issues/4

Perhaps I need a solution that does not use sticky-states --- any ideas? I was thinking of using a service to cache the scope values, and indeed read some other SO answers to that affect. This means that, per component, I'd need to handle which scope values to cache, etc. This is definitely a possibility, but I am wondering if anyone has any other techniques or knowledge about ui-router such that maybe there is another way to accomplish what I am after: cached controller/scope on transition change.

...

ANSWER

Answered 2017-Mar-28 at 22:23

After reading the author's typescript source code (which was a pleasure, very well-written code) from:

https://github.com/ui-router/sticky-states/blob/master/src/stickyStates.ts

I decided to migrate it to my own service in javascript, which would be compatible with ui.router 1.0.0-beta.3. By the way, ui.router 1.0.0-beta.3 is available at:

https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js

My approach was: because 1.0.0-beta.3 appears to not have the onCreate transition hook, I would decorate the $transitions.create function itself. To do this, I needed to inject a lot of helper functions and the core functionality of sticky states into the decoration. So I made the StickyStatesUtil provider to do this for me.

The migration consists of 2 parts: (1) a module called sticky-states-util, which creates the StickyStatesUtil provider, as well as a useful service for checking if a state/state-name is inactive, and an inactiveEvent, which, if set to a value, will cause $rootScope to broadcast a json map of inactive state-names for anything in the app to consume. If not set, that is skipped. And (2), the actual config block in the angular app that injects $provide and uses that to decorate the $transitions service with a new "create" function.

Since a couple others are in the same spot as me, I made this code available on github:

https://github.com/dsills22/sticky-states-ui-router-1-js

Source https://stackoverflow.com/questions/42914806

QUESTION

what's the difference between child state and sticky state?

Asked 2017-Jan-13 at 05:00

I have a good use of angular 1.5 states (nested states, tab states, modal stats)

Ui-router-extras has sticky states, but I dont see the difference with a classic parent/child state architecture ?

The basic example of sticky state is something we can do without sticky ? http://plnkr.co/edit/SCHExh4DYKFd9Kq3UbaA?p=preview

If you remove the sticky: true, you get the same behavior

...

ANSWER

Answered 2017-Jan-13 at 05:00

No, not really. What ui-router does is actually that it transforms your app into a state machine. And a strict definition of a state machine is that you can only have one state active at any point of time.

Now what that means is whenever you transit from stateA to stateB, stateA's scope (and other assets like controllers etc) will be destroyed, while stateB ones being instantiated. So literally, you cannot have stateA's and stateB's controller and scope being active simultaneously. Conclusion is, no parallel (aka sticky) states are allowed in a strict state machine.

ui-router-extras let's you do this. You can have multiple states active at a time.

Let's have an example scenario.

You first go to stateA.
In stateA, you started to countdown from 100 seconds to 0.
Halfway through 57th second, you go to stateB to retrieve some data. You spend 10 seconds at stateB.
You go back to stateA

Now, for a normal ui-router. When you are at step4 going back to stateA, your countdown restarts from 100 seconds. Where as with sticky states, your coundown starts from 57-10 = 47 seconds.

This is important because for the normal ui-router, when you transit to stateB, your stateA's scope is destroyed. Transiting back to stateA will re-instantiate everything, hence countdown start from 100 again. If you are using sticky states, the scopes are preserved.

Here is plnkr demo forked from yours. Try comment out the sticky:true, and go and forth from tab1 and tab 2, and you will see the difference.

Source https://stackoverflow.com/questions/41616276

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install ui-router-extras

download the files NPM run npm install ui-router-extras --save-dev Bower (alternatively) bower install ui-router-extras --save-dev
Include the files in your app ct-ui-router-extras.min.js
Include the module as an angular dependency (i.e. in app.js) - ct.ui.router.extras
download the files NPM run npm install ui-router-extras --save-dev Bower (alternatively) bower install ui-router-extras --save-dev
Choose the modules you want. You must include core. core Core requirement. Adds state.$$state() decorator (undocumented) sticky Sticky states dsr Deep State Redirect future Future states previous Previous state (depends on transition) statevis D3 based State visualization as seen on the demo site (undocumented) transition Injectible transition promise (undocumented)
Include the files for the modules you want into your app modular/ct-ui-router-extras.core.min.js modular/ct-ui-router-extras.sticky.min.js modular/ct-ui-router-extras.dsr.min.js modular/ct-ui-router-extras.future.min.js modular/ct-ui-router-extras.previous.min.js modular/ct-ui-router-extras.statevis.min.js modular/ct-ui-router-extras.transition.min.js
Include the submodules as an angular dependency (i.e. in app.js) - e.g., ct.ui.router.extras.sticky

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: