Trouble with back-button display

ionic-v1
1

I have only just begun playing with Ionic and am fairly new to AngularJS – and I have a feeling my question is more about the AngularUI Router than it is a problem with Ionic.

Using Ionic 1.0.0-beta.13, I have defined my routes/states as follows:

    var meetings = {
        url         : '/meetings',
        templateUrl : 'templates/meetings.html',
        controller  : 'MeetingsCtrl'
    };

    var meetingDetails = {
        url         : '/meetings/:id',
        templateUrl : 'templates/meeting-detail.html',
        controller  : 'MeetingDetailCtrl'
    };

    $stateProvider
        .state('meetings', meetings)
        .state('meetings-details', meetingDetails);

    $urlRouterProvider.otherwise('/meetings');

My app renders correctly and works as expected. On first page load the primary view (meetings) displays, and when an item in my list is tapped I am correctly taken to the secondary view (meetings-details).

Full demo app can be seen here: https://github.com/arthurakay/meetup_angular

However, if the user gets to the secondary view and refreshes the page (or somehow navigates to it without loading the primary view) the back button is not displayed.

In a nutshell, I need a way to configure my app to have the back buttons indicating the flow of the application… not the random page access.

Help?

2

What is interesting is that if I change my routing code to the following…

    var meetings = {
        name     : 'meetings',
        url      : '/meetings',
        abstract : true,
        template : '<ui-view/>'
    };

    var meetingsList = {
        name        : 'meetings.list',
        parent      : meetings,
        url         : '/list', // url will become '/meetings/list'
        templateUrl : 'templates/meetings.html',
        controller  : 'MeetingsCtrl'
    };

    var meetingDetails = {
        name        : 'meetings.details',
        parent      : meetings,
        url         : '/:id', // url will become '/meetings/:id'
        templateUrl : 'templates/meeting-detail.html',
        controller  : 'MeetingDetailCtrl'
    };

    $stateProvider
        .state(meetings)
        .state(meetingsList)
        .state(meetingDetails);

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/meetings/list');

…then I lose the back button altogether.

Does the Ionic back button depend on the route/state setup? Or what am I missing?

3

While I’m still wrapping my head around this, I think I have figured out the root of the problem: my understanding of the “ion-nav-view”.

Per the docs, “As a user navigates throughout your app, Ionic is able to keep track of their navigation history.” And from “ion-nav-back-button”: “Will show up when the user is able to go back in the current navigation stack.”

Re-reading these a day later, it is becoming clear to me that the ion-nav-view and the ion-nav-back-button work in tandem with browser history - and really have nothing to do with the parent/child state of the routes. I had expected the functionality to be more in line with Sencha Touch’s “navigation view”, but clearly this is a different approach.

So in my case, where I want a “back button” tied to the parent/child relationship for a route (NOT necessarily the same as the browser history), it looks like I can just create a generic ion-nav-button and implement the functionality I want manually.