Angularjs URL parmeters gets passed as Query Parameters

Question

I have a $state configured as below:

.state('app.subjects.current', {
    abstract: true,
    url: "/:subjectId",
    template: "<div ui-view />",
    ncyBreadcrumb: {
        skip: true
    }
})
.state('app.subjects.current.home', {
    url: '/home',
    templateUrl: "assets/src/subject/subjectHome.html",
    resolve: loadSequence('subjectHomeCtrl'),
    ncyBreadcrumb: {
        label: 'View'
    },
    string: 'sidebar.nav.pages.SUBJECTHOME'
})

I transit to this state using $state.go('app.subjects.current.home', {subjectId: '999'});

The url appears in the address bar as “http://localhost:12253/#/app/subjects//home?subjectId=999”. It should have been actually “http://localhost:12253/#/app/subjects/999/home”.

Thanks for any help.

Answer 1

I created working example with exactly the same mapping - to show you that your approach is working

So, these are the states

    .state('app', {
      template: '<div ui-view=""></div>',
    })
    .state('app.subjects', {
      template: '<div ui-view=""></div>',
    })
    .state('app.subjects.current', {
      abstract: true,
      url: "/:subjectId",
      template: "<div ui-view />",
      ncyBreadcrumb: {
        skip: true
      }
    })
    .state('app.subjects.current.home', {
      url: '/home',
      templateUrl: "assets/src/subject/subjectHome.html",
      //resolve: loadSequence('subjectHomeCtrl'),
      ncyBreadcrumb: {
        label: 'View'
      },
      string: 'sidebar.nav.pages.SUBJECTHOME'
    })

And this way we can call them

// $state.go
<button ng-click="$state.go('app.subjects.current.home', {subjectId: '999'});">

// ui-sref
<a ui-sref="app.subjects.current.home({subjectId: '888'})">

Check it here. It should help to find out what is different in your app...