add 'routeSegmentChangesSuccess' event (when all segments are updated)

[hupf]

Hi Artem

Thank you for the great work. The segment router looks really promising and fits well for our scenario. We are building a mobile web app where ­– instead of side-by-side segments – we use the segments as layers.

E.g. if the user scolls down a long list (list-segment), then opens an entry (entry-segment), we store the scroll position and hide the list-segment such that only the entry-segment is visible. When he gets back to the list, we restore the scroll position such that the user is at the exact same spot as before.

For this I have to know the name of the current segment in the 'segmentChange' event. That's why I've added a 'routeSegmentChangesSuccess' event, that gets fired when all the segments have been updated. I think this might be useful for other scenarios as well and is the complement to the '$routeChangeSuccess' event of ngRoute.

If you're willing to support the "layer" scenario with the segment router, we might also try to integrate some of our (yet ongoing) work we're doing to get this running.

Mathis

[hupf]

I'm updating the tests...

[artch]

@hupf Interesting scenario. I didn't think about the possibility to use route-segment module in conjunction with third-party view instead of app-view-segment, but it seems really feasible.

For this I have to know the name of the current segment in the 'segmentChange' event.

Have you checked routeSegmentChange event args? There is index and segment properties there, and it is fired for each segment level independently, even for null-ing the segments which are gone as well. Isn't it enough for you purposes?

https://github.com/artch/angular-route-segment/blob/master/src/route-segment.js#L350-L354

[hupf]

(...) to use route-segment module in conjunction with third-party view instead of app-view-segment

@artch We don't have to use third-party views, that the really nice thing about your project. We can just style the normal app-view-segments as layers:

<div class="layer" app-view-segment="0"></div>
<div class="layer" app-view-segment="1"></div>
<div class="layer" app-view-segment="2"></div>

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
}

It's great, I don't know any other router that can do this :-)

Have you checked routeSegmentChange event args?

Yes I did. The problem with it is that there are multiple events and one doesn't know which segment is the currently loaded (i.e. corresponds to the current route). I think equivalent to ngRoute's $routeChangeSuccess and $routeChangeError it would certainly be a good thing to have an event that gets fired after all segments are ready. It would let you update the window title according to the segment or do any other stuff that you only want to do once after all segments are updated (just as you would do with $routeChangeSuccess when using ngRoute).

[artch]

@hupf Well, an important thing here is that wrapping updateSegment(i, null) into $q.all() is meaningless because of this. There are no resolving to be done, hence, it would be executed immediately always.

I admit that it would be helpful to have the single event confirming all the segments are done. However, it should not provide any event arguments (because there are no particular segment linked to the event, and segments could be accessed via $routeSegment.chain), and I would name it 'routeSegmentChangeFinish' ('routeSegmentChangeSuccess' is rather an opposite to '...ChangeError' but here are no way to handle errors somehow). And it should be fired synchronously right after all updateSegment(i, null) are executed.

If you amend your PR like that, I would be happy to merge it.

[hupf]

@artch You're right about wrapping updateSegment(i, null), this is meaningless indeed. When I think about it now, I'd suggest to maybe separate these two different behaviors, to lets say, a removeSegment(i) and a updateSegment(i, segment) function of which only the latter call must be wrapped.

About the event: I'd strongly suggest to also add a routeSegmentChangeError instead of firing a normal routeSegmentChange with a resolveFailed parameter. This would comply with ngRoute's behavior. And then the name of the routeSegmentChangesSuccess event will make sense. I've almost implemented this, but I wasn't able to cover all error cases (the resolve part is quite tricky).

What do you think?

[artch]

routeSegmentChange is single-segment event. You propose routeSegmentChangeError - OK, it's about single segment as well. But routeSegmentChangesSuccess is kinda overall finishing event, not related to any of them, so it should not intersect with the "error" meaning of single-segment routeSegmentChangeError. We have no way to determine a "failure" of the overall updating process, at the moment. Some segments might be failed, but the overall process has succeed.

[sueyee]

Hi, I am new to angularjs. I am using your angular-route-segment for nested tabs layouts. I am not sure how to code the refresh for your page adding in a confirm popup, "are you sure you want to navigate away from this page?" I'd like to use this on reload and logut. I tried to use a listener in the event, $routeUpdate ($scope.$on("$routeUpate", function() confirm("are you ....")) and that did not work. I tried a listener on $stateChangeStart and that did not work. The event $routeChangeSuccess does not seem to be the right one to use since I am not changing the route segment. I like to reload in case 1 and close the window in the second case. Can you provide some direction for me? Thanks.

[rodmax]

Hi guys, I vote for this feature... my case:
segments:

"base"
"base.foo"
"base.bar.baz"

in controller of the "base":

 $scope.$on('routeSegmentChange', function() {
      $scope.activeSegment = $routeSegment.name;
})

in template of the "base":

<a ng-href="#{{ activeSegment | routeSegmentUrl}}"></a>

in navbar template:

<a ng-href="#{{ 'base.foo' | routeSegmentUrl}}"></a>

So when i stay in "base.bar.baz" and click link in navbar(go to "base.foo")
on the first "routeSegmentChange" $routeSegment.name equals to "base.foo.baz" and in console i see template related exception:
Can not get URL for segment with name "base.foo.baz", and this is true :)
currently i implement RegEx-based workaround to determine intermediate routes
but i will happy with this feature :)