christopherthielen / ui-router-extras Goto Github PK

Error: No reference point given for path '.manager'
at findState (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js:1334:24)
at Object.$state.get (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js:2334:19)
at findFutureState (http://0.0.0.0:9003/bower_components/ui-router-extras/release/ct-ui-router-extras.js:686:22)

If we have a state tree similar to:

    .state('product.list', {
      deepStateRedirect: true,
      sticky: true,
      }
    })
    .state('product.list.add', {
      }
    })

If we go from product.list to product.list.add, since product.list is a DSR we cannot pop the last state (add) to go to the parent. I guess it's reasonable to skip DSRedirection when a child state wants to go to it's parent state.

To implement that we could add on

// Skip redirection if we're jumping from a child state to a parent
if (fromState.name.substring(0, toState.name.length) == toState.name) return false;

When resolve contains promise and route equals page url then it resolved twice on first page load.

  $stateProvider
    .state('foo', {
        url: '',
        resolve: {
          contextPromise: function ($timeout) {
            return $timeout(function () {
              console.log('Promise is now Resolved!');
            }, 2000);
          }  
        }
    });

In console we see "Restored paths from pending transition:" and "Promise is now Resolved!" twice. Plunker - http://plnkr.co/edit/KvHqSEZQ0LQjhe4E34kS

Current transition: : {}: -> foo: {}
Before transition, inactives are: : []
After transition, inactives will be: []
Transition will exit: []
Transition will enter: ["ENTER: __inactives", "ENTER: foo"]
SurrogateFromPath: []
SurrogateToPath: ["__inactives:__inactives", "foo"]
Restored paths from pending transition
Current transition: : {}: -> foo: {}
Before transition, inactives are: : []
After transition, inactives will be: []
Transition will exit: []
Transition will enter: ["ENTER: __inactives", "ENTER: foo"]
SurrogateFromPath: []
SurrogateToPath: ["__inactives:__inactives", "foo"]
Promise is now Resolved!
Promise is now Resolved!
Current state: foo, inactive states: []
Views: (root.locals) / (__inactives.locals) / (foo.locals: '@' (foo))

Could you please put the examples sources into the repo so that others can play around with it? Thanks.

P/S: Although we can download one by one from the browser, but it's quite a hassle to do that. Hope you don't mind.

Hey there, I just found this project and was checking out your examples. It's very interesting and I like a lot of what you've done here. I had some thoughts though if you didn't mind me being so bold:

Previous States

I actually think this feature should sort of be tossed out (it seemed by your notes that you are on the fence about this one yourself). It's a little wonky, super easy to implement manually, and kind of creates an unusual behavior.

For instance, if I hit the 'return' button multiple times, you would expect a browser-like behavior where you traverse your history. But instead we're jumping back between the last 2 states. If you chose to use a purely URL-based approach you won't run into this problem, and if you take a history-based approach it gets ridiculously convoluted.

To implement this manually, all someone would have to do is subscribe to $routeChangeSuccess and store the value at a globally accessible location.

You also hard-coded an onError behavior which might interfere with other peoples' implementation or desired behavior (although I can completely understand why this behavior is a good default). Frankly, I'd love to see the code stripped down to bare essentials and thrown onto the documentation as examples of things you can do.

Future States

I think this is kind of something you should just be capable of doing with the existing tools available in ui-router. This entire feature is kind of based around the fact that you're trying to do configuration after the config phase. There are already tricks to solve this problem, such as storing references to the provider and recalling those references when your lazy-loaded resources become available.

For instance:

app.config(function($stateProvider){
  app.$stateProvider = $stateProvider;
})
// sometime later...
app.$stateProvider.state(...)

If this doesn't work right now, I think it would be better to instead modify how ui-router works so that lazy-adding states wouldn't cause any hiccups whatsoever.

Sticky States

This is an interesting idea I've toyed with myself. I think 'sticky' is an odd name and 'parallel' makes more sense. I've actually toyed with this idea before by referring to it as something like detachable states or reusable states. It tends to be more relevant for modals. For instance, opening the login modal anywhere in the app, or under a subsection of states in the app. I need to toy with this idea though cuz I think it could make this very complicated for people.

Deep State Redirects

I actually think of THIS as 'sticky', but like 'sticky branches'. Like do you go directly to a tab, or do you go to where you were drilled down into that tab. I think of it as a flag when you do a transitionTo like setting sticky to true or resume to true. I should poke around your implementation, but if this was done in the core, I wonder having each state kept track of what it's last active immediate child (if any) is, and we leverage an async-loading of states as discussed here: angular-ui/ui-router#1170 could this feature get implemented in the core pretty efficiently?

Conclusion

Anyway, this is all just food for thought. Since angular-ui is always looking for active maintainers I was throwing out these ideas because if everyone was interested maybe you might like the idea of implementing some of this stuff in the core and helping out as a maintainer of ui-router?

Log output from examples/sticky. During the transition from modal1 back to the sticky states, the transition incorrectly says After transition, inactives: [] angular.js:9937 when there should be a bunch of inactives listed there.

Current state: modal1, inactives:  ["top.people.managerlist", "top.people", "top.inv.storelist", "top.inv", "top.cust.customerlist", "top.cust", "top"] angular.js:9937
XHR finished loading: GET "http://0.0.0.0:9005/example/stickymodal/modal1.html". angular.js:8445
Current transition:  modal1: {}:  -> top: {} angular.js:9937
exit:  ["(__inactives)", "(modal1)"] angular.js:9937
enter:  ["(__inactives)", "(top)"] angular.js:9937
After transition, inactives:  [] angular.js:9937
exitable:  top.people.managerlist angular.js:9937
exitable:  top.people angular.js:9937
exitable:  top.inv.storelist angular.js:9937
exitable:  top.inv angular.js:9937
exitable:  top.cust.customerlist angular.js:9937
exitable:  top.cust angular.js:9937
SurrogateFromPath:  ["__inactives:__inactives", "reactivate_p1:top", "modal1", "top.people.managerlist", "top.people", "top.inv.storelist", "top.inv", "top.cust.customerlist", "top.cust"] angular.js:9937
SurrogateToPath:  ["__inactives:__inactives", "reactivate_p1:top", "reactivate_p2:top"] angular.js:9937
Restored paths from pending transition angular.js:9937
Current transition:  modal1: {}:  -> top.cust.customerlist: {} angular.js:9937
exit:  ["(__inactives)", "(modal1)"] angular.js:9937
enter:  ["(__inactives)", "(top)", "(top.cust)", "(top.cust.customerlist)"] angular.js:9937
After transition, inactives:  [] angular.js:9937
SurrogateFromPath:  ["__inactives:__inactives", "reactivate_p1:top", "reactivate_p1:top.cust", "reactivate_p1:top.cust.customerlist", "modal1"] angular.js:9937
SurrogateToPath:  ["__inactives:__inactives", "reactivate_p1:top", "reactivate_p1:top.cust", "reactivate_p1:top.cust.customerlist", "reactivate_p2:top", "reactivate_p2:top.cust", "reactivate_p2:top.cust.customerlist"] angular.js:9937
Current state: top.cust.customerlist, inactives:  ["top.people.managerlist", "top.people", "top.inv.storelist", "top.inv"] angular.js:9937

Not sure if I'm missing something. It appears to me that currently there's no option to force a reload of a state that has sticky state enabled. At times during a life cycle of an app it is seldom desirable (for specific user experience requirements) to "temporarily" clear the stickiness of a state that has entered sticky state and thereby forcing a reload of the state the "next time it is transitioned to".

Any suggestions?

Remove dependency on underscorejs

Hi,

forgive me if I report a false positive problem, but as the title says when I try to use transitionTo without options I get
'TypeError: Cannot read property 'relative' of undefined'
probably because of this line:

var rel = options.relative || $state.$current; // Not sure if/when $state.$current is appropriate here.

Of course I can avoid this with an empty object but it did not cause any trouble with the official implementation.

I'm using release 0.0.6

Hi, sticky states doesn't seem to work with implicit params to states.

Example:

.state('main.product', {
      url: '/products/:product_id',
})
.state('main.product.something', {
})
.state('main.product.something.tab1', { sticky: true })
.state('main.product.something.tab2', { sticky: true })

If you're on 'main.product.something.tab1' and link to 'main.product.something.tab2' ui-router assumes that the product_id parameter is going to be the same one that the current state has, but the sticky state thinks main.product is different on fromState to the one on toState given that transition.fromParams has the product_id parameter but transition.toParams doesn't (

I think that patching that method (

if (a[k] != b[k]) return false; // Not '===', values aren't necessarily normalized

with:

if (a[k] != b[k] && a[k] !== undefined) return false; // Not '===', values aren't necessarily normalized

would fix the issue, since if the toParams doesn't have the key ui-router will use the same of the current state, but i'm unsure if it would break something else.

Any thoughts?

After updating to 0.0.7 from 0.0.6 get a js error at line 134:48 that $q is not defined in ct-ui-router-extras.js. Assuming this has to do with using http requests in the resolve? If I get moment after work this evening I'll attempt to write a failing unit test.

Per the comments in stickyState.js:94, we need access to the internal representation of the root state. Since the mechanism used to access the root state is to decorate the .parent() state function, at least one state must be defined at config time.

I have figured out an easier way to access the root state. In $provide.decorate, the internal representation of the root state is accessible as $state.$current.

Click Personnel tab, click Inventory tab, click Personnel tab. Click "Return to..."

I believe this may be related to issue #1

event, unfoundState, fromState, fromParams 
Object

Object

Object

Object
TypeError: undefined is not a function
    at findFutureState (http://christopherthielen.github.io/ui-router-extras/lib/ct-ui-router-extras.js:785:43)
    at futureState_notFound (http://christopherthielen.github.io/ui-router-extras/lib/ct-ui-router-extras.js:882:29)
    at Scope.$broadcast (http://christopherthielen.github.io/ui-router-extras/lib/angular.js:12835:28)
    at Object.transitionTo (http://christopherthielen.github.io/ui-router-extras/lib/angular-ui-router.js:1940:26)
    at Object.$state.transitionTo (http://christopherthielen.github.io/ui-router-extras/lib/ct-ui-router-extras.js:682:54)
    at Object.go (http://christopherthielen.github.io/ui-router-extras/lib/angular-ui-router.js:1854:19)
    at Object.$previousState.go (http://christopherthielen.github.io/ui-router-extras/lib/ct-ui-router-extras.js:971:21)
    at Scope.$rootScope.goPrevious (http://christopherthielen.github.io/ui-router-extras/example/previous/app.js:84:22)
    at http://christopherthielen.github.io/ui-router-extras/lib/angular.js:10694:21
    at http://christopherthielen.github.io/ui-router-extras/lib/angular.js:18882:17
Error: Could not resolve '[object Object]' from state 'top.people.managerlist'
    at Object.transitionTo (http://christopherthielen.github.io/ui-router-extras/lib/angular-ui-router.js:1971:39)
    at Object.$state.transitionTo (http://christopherthielen.github.io/ui-router-extras/lib/ct-ui-router-extras.js:682:54)
    at Object.go (http://christopherthielen.github.io/ui-router-extras/lib/angular-ui-router.js:1854:19)
    at Object.$previousState.go (http://christopherthielen.github.io/ui-router-extras/lib/ct-ui-router-extras.js:971:21)
    at Scope.$rootScope.goPrevious (http://christopherthielen.github.io/ui-router-extras/example/previous/app.js:84:22)
    at http://christopherthielen.github.io/ui-router-extras/lib/angular.js:10694:21
    at http://christopherthielen.github.io/ui-router-extras/lib/angular.js:18882:17
    at Scope.$eval (http://christopherthielen.github.io/ui-router-extras/lib/angular.js:12556:28)
    at Scope.$apply (http://christopherthielen.github.io/ui-router-extras/lib/angular.js:12654:23)
    at HTMLAnchorElement.<anonymous> (http://christopherthielen.github.io/ui-router-extras/lib/angular.js:18881:21)

When navigating to the personnel tab, and then selecting the modal tab to launch the modal, and then clicking the back button, the modal is not dismissed.

This may or may not be related to ui-router-extras, but would like to hear any opinions/solutions to this.

I can't seem to get the plugin working with my sample. I have a welcome page that navigates to a home page with a list of items. The home page is the state where I want to preserve the DOM. When I navigate back to the home page, the list is still in its previous position but the accordion is still not expanded like before.

Here's a codePen of the sample app http://codepen.io/markace1246/pen/BpzIv

Also, I noticed that the controller reloaded(I do not want the page to reload when navigating back to the home page).

Could you help me figure out where my issue lies?

I am not sure how to totally characterize the problem. I have had fair success using ocLazyLoad with futureStates in a real world application, so was trying to create an easy yet full fledged example for using futureStates with ocLazyLoad.

Example

Source code

When you launch the app, you would notice you can load apple state, or orange state but not both. Any insights as to why this would happen?

Pertinent futures code

For now, 0.2.0, 0.2.8, 0.2.10, HEAD

oops

Noticing duplicate requests when loading using resolve and $http if a sub state is loaded via URL. If I navigate to a sub state the duplicate request does not fire off.

In ngloadStateFactory you have

ngloadDeferred.resolve(result.entryState); // undefined

but I guess there should be

ngloadDeferred.resolve(result.mainState);

It shouldn't work, but it works... Does that mean, that we don't need to specify main/entry state when using ngload from angularAMD?

My project combines all scripts and uglifies them on deployment, but this code causes error when uglified. I think it's because not all angular injections are done using the array notation.

Remove sticky state debugging output

Sorry folks. My laptop was physically stolen 2 weeks ago. A very important commit that I had not yet pushed to github got stolen with the laptop. I will fix the issue and release 0.0.8 tonight or tomorrow.

TL;DR -- The view of sticky state is cleaned up after $state.go() calls.

It's really exciting to see the discussion in angular-ui/ui-router#894 become modularized and usable. It's like a dream coming into reality. Thank you so much for this @christopherthielen !

The first thing I tried to build with ui-router-extras is a modal example. It slightly differs from the one in your example because I want to support navigation between modal views without dismissing & re-initializing the existing modal dialog, as well as supporting the "back" button in the browser.

Using $stateChangeStart instead of onEnter & onExit callbacks, it can be easily achieved:
http://plnkr.co/edit/4KqUNnRaUDNZO9t3VD0e

As a follow-up, I wanted to implement pinterest-like modal window using ui-router-extras. When the URL of individual items is visited directly, it should be presented in full-size, instead of being confined inside a modal.

However, this time the try is not successful.

I followed @ashaffer 's solution in the comment of the previous thread, resulting in the followig plunker:

http://plnkr.co/edit/8r7haRWCcpmT2ZmnSQCE

The core of the technique is to nest the "modal" state and the "full-size" state under a common parent state. In the parent state we redirect the user to either "modal" or "full-size" state according to where the user is from.

The full-sized view is working perfectly, as shown in the following link. When navigating to other items from the full-sized view, they were also shown in full-sized view, which is identical to the behavior of pinterest.

http://run.plnkr.co/plunks/8r7haRWCcpmT2ZmnSQCE/#/item/5

However, when a modal dialog is opened, the view of the sticky list state beneath is cleaned up, which can be reproduced by clicking any item in the following link:

http://run.plnkr.co/plunks/8r7haRWCcpmT2ZmnSQCE/#/

It seems that the effect of sticky goes away after the state redirect. Is this an intended behavior?

Unless I'm missing something when using sticky states the resolve functionality appears to re-resolve when returning to the state. In my opinion this doesn't make sense. Very neat idea with the sticky states and the deepStateRedirect though. Haven't got a chance to play with future states yet.

I've set up a situation to lazy load a controller that requires a service. If I remove the service requirements controller is instanced if I add the service back in the controller is not instanced code follows. I am using requirejs
Controller:
define(['scripts/home/scuiHomeApp', 'scripts/home/services/scuiHomeSrv'], function () {
return ['$scope', 'scuiHomeSrv', function ($scope, scuiHomeSrv) {
var model = $scope.model = {};

    model.name = service.Name;
}];

})

Service:
define(['scripts/home/scuiHomeApp'], function () {
angular.module('scuiHomeApp')
.register.factory('scuiHomeSrv', function () {
service = {};
service.name = "My Home Service";
return service;
});
})

Json
[
{
"stateName": "home",
"urlPrefix": "/home",
"templateUrl": "views/partials/home/home.html",
"type": "requireCtrl",
"src": "scuiHomeCtrl.html",
"ctrlUrl": "scripts/home/controllers/scuiHomeCtrl",
"ctrl": "scuiHomeCtrl",
"resolve": {
"service": "scuiHomeSrv"
}
},
{
"stateName": "about",
"urlPrefix": "/about",
"templateUrl": "views/partials/home/about.html",
"type": "requireCtrl",
"src": "scuiAboutCtrl.html",
"ctrlUrl": "scripts/home/controllers/scuiAboutCtrl",
"ctrl": "scuiAboutCtrl",
"resolve": {
"service": "scuiAboutSrv"
}
}
]

Angular Module.
define(['angularAMD', 'scripts/configs/scuiConfigApp'], function () {
angular.module('scuiHomeApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'ct.ui.router.extras'
]);

angular.module('scuiHomeApp')
    .config(['$futureStateProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
        function($futureStateProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
            var app = angular.module('scuiHomeApp');

            app.register =
            {
                controller: $controllerProvider.register,
                directive: $compileProvider.directive,
                filter: $filterProvider.register,
                factory: $provide.factory,
                service: $provide.service
            };


            // Loading states from .json file during runtime
            var loadAndRegisterFutureStates = function ($http) {
                // $http.get().then() returns a promise
                return $http.get('scripts/home/scuiHomeRoutes.json').then(function (resp) {
                    angular.forEach(resp.data, function (fstate) {
                        // Register each state returned from $http.get() with $futureStateProvider
                        $futureStateProvider.futureState(fstate);
                    });
                });
            };

            $futureStateProvider.stateFactory('requireCtrl', requireCtrlStateFactory); // Register state factory that registers controller via eval.

            $futureStateProvider.addResolve(loadAndRegisterFutureStates);

        }]);

angular.module('scuiHomeApp')
    .run(function ($rootScope, $state, $window, $timeout) {
        $rootScope.$state = $state;
        $rootScope.$on("$stateChangeSuccess", function() {
            $timeout(function() {
                $window.ga('send', 'pageview', $window.location.pathname+$window.location.hash);
            } );
        });
    });

function requireCtrlStateFactory($q, futureState) {
    var d = $q.defer(); // make a deferred

    // Tell RequireJS to load lazyController
    // (leave off the .js)
    require([futureState.ctrlUrl], function (ctrl) {
        var fullstate = { controller: ctrl,
            name: futureState.stateName,
            url: futureState.urlPrefix,
            templateUrl: futureState.templateUrl
        };

        // Resolve the promise with the full UI-Router state.
        d.resolve(fullstate);
    });

    // The state factory returns the promise
    return d.promise;
}

})

@christopherthielen great work on this package.

is it possible to exploit the return value of a resolver in defining a FutureState itself. I am trying to create a hierarchy of states that has a dynamic level whose name is only known (on $rootScope) after the promise is resolved.

ui-sref-active uses === on state.self to check for state equality. I need to change how I'm munging state.self to === is true.

$previousState.go doesn't accept the ignoreDsr option included on $state.go, one workaround is to get the state with $previousState.get and then call $state.go on that.

An easy fix would be having $previousState.go accept an additional options parameter.

    go: function(memoName, options) {
      var to = $previousState.get(memoName);
      return $state.go(to.state, to.params, options);
    }

Scenario:

main.product { deepStateRedirect: true }
main.product.child
main.sibling

User goes to main.product and then to main.product.child, the user now wants to go back to the parent state so he does it with a $state.go including the ignoreDsr flag, everything seems to work.

Then the user goes to main.sibling and afterwards he wants to go back to main.product. DSR sends him to main.product.child even when the last substate on that branch was main.product.

Seems that DSR is not popping the record when jumping back to the root state.

Sticky states is conceptually confusing. Add comments to the code outlining the concepts, so other people may contribute and fix bugs.

TODO: Figure out a way to decorate $urlRouterProvider.otherwise() properly so user code can specify a final otherwise after futureState's otherwise() is run.

Wrap release ct-ui-router-extras.js in (function(){})()

It would be nice if you were already within a deep state and the state changed to the parent url that it would disregard the deep state.

For instance in the demo. If I click on the customers tab then click on a customer name, then click on the customers tab again it seems logical it would go back to the customers listing which it currently doesn't. If I was viewing a customer and clicked on customers tab from another state it should redirect back down to the customer though which it currently does.

Not sure if that's possible or not though.

The Sticky state Modal example has a $previousState service. Improve the service and publish as another UI-Router Extras feature.

I have been having a lot of fun with lazy FutureStates with ocLazyLoad loader (had to use their reconfig flag while loading my define-wrapped requirejs modules but experience mostly good).

I was wondering why urlPrefix functionality is not working at all? Navigating to a state using $state.go triggers lazy loading while visiting the url doesn't work. Did the functionality exist in the past and is currently broke?