angularjs - ui-router not displaying properly ($stateProvider)

Question

I'm trying to set up my app. It was working fine, but then I had to change some URLs on the ui-router in order to have some sub-views.

Unfortunately, now, I cannot see all my pages properly and I don't understand why.

Here's an example: http://codepen.io/anon/pen/LNQavV?editors=1010

Basically, I have different templates, and when URL changes, I display a different template into appContent view. Inside my details, I need to have a subView called zone, in which I can display detailsOverview template or detailsEdit template.

With my current setup,I'm not able to change page. Well, the page changes according to the URL, but detailsOverview is always displayed!

I think that the problem is somehow related with the subview rather than the URLs, but not 100% sure.

I'm pasting $stateProvider code here as well:

angular.module('ionicApp', ['ionic']).config([
  '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app', {
      name: 'app',
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menuTemplate.html'
    }).state('app.details', {
      name: 'appDetails',
      url: '/:zoneID',
      views: {
        'appContent': {
          templateUrl: 'templates/mainDetails.html'
        }
      }
    }).state('app.details.overview', {
      name: 'appDetailsOverview',
      url: '/details',
      views: {
        'appContent': {
          templateUrl: 'templates/mainDetails.html'
        },
        'zone': {
          templateUrl: 'templates/detailsOverview.html'
        }
      }
    }).state('app.details.edit', {
      name: 'appDetailsEdit',
      url: '/edit/day/:timerEditDay',
      views: {
        'appContent': {
          templateUrl: 'templates/mainDetails.html'
        },
        'zone': {
          templateUrl: 'templates/detailsEdit.html'
        }
      }
    }).state('app.setup', {
      name: 'setup',
      url: '/setup',
      views: {
        'appContent': {
          templateUrl: 'templates/setup.html'
        }
      }
    }).state('app.about', {
      name: 'about',
      url: '/about',
      views: {
        'appContent': {
          templateUrl: 'templates/about.html',
          controller: 'aboutPageInfo'
        }
      }
    });
    $urlRouterProvider.otherwise('app/');
  }
]);

DanEEStar · Accepted Answer · 2016-04-21 14:59:37Z

1

The problem is that with the url: '/:zoneID', in the app.details state you "swallow" all the possible parameters.

Thats means the url #/app/about and #app/setup URLs get also handled by the app.details state and don't seem to work.

In order to get them working, you have to define the app.about and app.setup state before the app.details state:

$stateProvider.state('app', {
  name: 'app',
  url: '/app',
  abstract: true,
  templateUrl: 'templates/menuTemplate.html'
}).state('app.setup', {
  name: 'setup',
  url: '/setup',
  views: {
    'appContent': {
      templateUrl: 'templates/setup.html'
    }
  }
}).state('app.about', {
  name: 'about',
  url: '/about',
  views: {
    'appContent': {
      templateUrl: 'templates/about.html',
      controller: 'aboutPageInfo'
    }
  }
}).state('app.details', {
  name: 'appDetails',
  url: '/:zoneID',
  views: {
    'appContent': {
      templateUrl: 'templates/mainDetails.html'
    }
  }
}).state('app.details.overview', {
  name: 'appDetailsOverview',
  url: '/details',
  views: {
    'appContent': {
      templateUrl: 'templates/mainDetails.html'
    },
    'zone': {
      templateUrl: 'templates/detailsOverview.html'
    }
  }
})

See the updated codepen with a working details and setup page: http://codepen.io/anon/pen/BKPyMd?editors=1010

answered Apr 21, 2016 at 14:59

DanEEStar

6,3707 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nick Over a year ago

From your updated pen, why it works with setup but not with about even if about is before details as well? Thank for the explanation i'm now just trying to understand a bit better :)

DanEEStar Over a year ago

Yes, the about page seems not to work. I did not look into that problem... :)

Nick Over a year ago

Oh don't worry about it. it works in my real project. Thank a lot, I would have never figure it out myself!

Collectives™ on Stack Overflow

angularjs - ui-router not displaying properly ($stateProvider)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related