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.

score 0 · Accepted Answer · answered Feb 22 '15 at 12:57

0

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

answered Feb 22 '15 at 12:57

Radim Köhler

122,561
47
239
335

Thanks a lot for your prompt reply. I am looking into it. Once I find out the problem I will surely post on to this. – Antriksh Patel Feb 22 '15 at 13:07
My link Subject Home appears as Subject Home – Antriksh Patel Feb 22 '15 at 13:13
The only way, how to result `url` in `home?subjectId=9` is with this setting: **`url: "?subjectId",`**, Check this updated plunker http://plnkr.co/edit/aki1Sbbryq0FLNkrLMsm?p=preview. My first plunker shows **`url: "/:subjectId",`** and that will ALWAYS result in `home/9`. Hope it helps... – Radim Köhler Feb 22 '15 at 13:17
Thanks a lot for guiding me. I found the problem but do not know its explanation. I had the parent state configured as follows .state('app.subjects', { url: '/subjects', requiresAuthentication: false, params: { searchText: "" }, reloadOnSearch: false, If I remove params line it works well. Can you please explain me the cause. – Antriksh Patel Feb 22 '15 at 13:26
In parent state if i use any optional param the problem re-occurs. – Antriksh Patel Feb 22 '15 at 13:33
Well I am glad to see that you've found the place causing the issue, but based on your 'app.subjects' I cannot judge what was causing it... simply all seems to be set proprely. Enjoy UI-Router anyhow ;) Great library ;) Play with, test it, and if later any issue will appear - ask here again. Final note: my experience is - UI-Router mostly does not behave strange... it is our wrong usage ;) – Radim Köhler Feb 22 '15 at 13:33
Yes, but how should i configure the optional params on the parent state without disturbing the url pattern. Thanks – Antriksh Patel Feb 22 '15 at 13:34
That depends on you. I prefer to specify all the params in URL always. So child url will have that that inherited from parent. But it depends on your needs. It should not effect the resulting url... I even extende the plunker with your setting: http://plnkr.co/edit/D38x7sOVGscSyp5Xfs2Y?p=preview and all seem to be working as expected. Please check it again... (be sure to close and open plunker to get latest version) – Radim Köhler Feb 22 '15 at 13:35

Angularjs URL parmeters gets passed as Query Parameters

1 Answers1