angularjsangular-ui-routersession-state-provider

Angularjs URL parmeters gets passed as Query Parameters


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.


Solution

  • 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...