角度为ID的UI-Router嵌套路由

Question

I've got two routes in my app, nested into each other with ui-router:

app/locations/locations.js

'use strict';

angular.module('treasuremapApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('locations', {
        url: '/locations',
        templateUrl: 'app/locations/locations.html',
        controller: 'LocationsCtrl'
      });
  });

and app/locations/location/location.js

'use strict';

angular.module('treasuremapApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('location', {
        url: '/locations/:id',
        templateUrl: 'app/locations/location/location.html',
        controller: 'LocationCtrl'
      });
  });

This works fine flawless most of the time, but when I first on my list of locations, click on one, it gets displayed just fine, even the back button works, but when I then just type /locations into the URL bar (any other way without the back button), the router seems to try to open the "lower" route with controller and template but of course is missing the ID from the url then.

I have the feeling my understanding of the ui-router is a bit flawed, so can someone please explain to me, what I am doing wrong here.

Answer 1

Perhaps you entered /locations/ into the URL instead of /locations . Entering /locations/ will trigger the second route, because the ui-router would expect that :id equals (empty) .

Also look this FAQ if you want it to behave differently: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes

How can I have my routes be activated when the url contains either a trailing slash or not?

Set strictMode to false in your config block:

$urlMatcherFactoryProvider.strictMode(false)