Better history management, possible tabs service

[ajoslin]

Allow user to save a copy of current history and use it again later.

Use case: tab bar. User starts app. User is on tab 1. User navigates through pages on tab 1 and ends up with 3 pages in history. User then clicks tab 2. Current history (tab 1's history) should be saved, and then start fresh for tab 2. User does some things for tab 2, and goes back to tab 1. The earlier history and the page tab 1 was on should be restored.

Perhaps I should even write a service for this (navHistoryManager or something) It's rather complicated. Thoughts?

[ajoslin]

In an app I am currently doing, I wrote something like this for $routeProvider, then a tabs service parses $route.routes:

$routeProvider
  .when('/search', {
    templateUrl: 'app/search.html',
    controller: 'SearchCtrl',
    tabs: { isTab: true }
  })
  .when('/search/:query', {
    templateUrl: 'app/search-results.html',
    controller: 'SearchCtrl',
    //Search results page still matches search tab
    tabs: { matches: '/search' }
  });

Then I do <a class="tab" ng-class="{active: tabs.activeTab() == '/search'}">Hello</a>

I am still working on proper tabs history management in that app... but I'm thinking of implementing tabsService.goToTab or something for clicking tabs, which will do all the proper tab history management inside the service.

This $routeProvider API I made up is kind of ugly to use, but I think it could be cool to implement something like this in a prettier way. Perhaps just have a tabsProvider, or just think of a prettier way to configure $routeProvider to work with the tabs.

Thoughts anyone? @jrowny @revolunet @whitneyland @everyone 😄

[topearn]

Andy, does this help:
http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

[ajoslin]

Hi @topearn,

Nested views aren't really my problem - but thanks!

[revolunet]

oops. didnt get the notification :)

I don't get what you really mean with a separate history for each tab. History is global, you want to "group" history events based on some context ?

some thoughts

$routeProvider
  .when('/search', {
    templateUrl: 'app/search.html',
    controller: 'SearchCtrl',
    navigation: { 
        'in': 'slide-left', // optional in animation style, could be overriden in $navigate.go()
        'out': 'slide-right', // optional out animation style, could be overriden in $navigate.go()
        'history': true, // default=true, could be false to prevent being in history,
        'scrollable': true // default=false, remember scroll state when restoring that view
    }
  })
  .when('/search/:query', {
    templateUrl: 'app/search-results.html',
    controller: 'SearchCtrl',
    navigation: { 
        'route': '/search'  // default to real route but could be something else, to "group" routes ?
    }
  });

my 2 cents

[ajoslin]

Well try out a native app with tabs on your phone.

If you're in tab 1 and you navigate to page A then B then C, all within tab 1.

Now switch to tab 2, you will get a new page. Now when you're on tab 2 and press back (on android) the app closes.

Now if you switch back to tab 1 you will be back on page C. If you press back you will go back to page B, etc.

[revolunet]

ok so you want (optional) context based history ?

[ajoslin]

Yes I guess

[ultrawebsites]

It strikes me that the approach given in the Nested Views example would allow you to do exactly what you want with a 'tabs history' and more...

[ultrawebsites]

Or perhaps better yet, base it on the work being implemented in https://github.com/angular-ui/ui-router/ when it makes it in to the primary branch of Angular

[ajoslin]

Oh you're right - I didn't really think of that correctly. Nested views could be a good solution...

[revolunet]

may be interesting to add your view on angular-ui/ui-router#38 (comment)

[ajoslin]

I will be making this a fork of ui-router once they add animate support. Or perhaps I will just add back-button-detectability to ui-router.