Juhana Pietari Lehtiniemi Juhana Pietari Lehtiniemi - 2 months ago 89
AngularJS Question

Possible to hide some parameters in URL with Angular UI Router?

I want to pass two values to new ui-view via params:


  • item id

  • list of objects



However, I'd like the new view to show only the id in the browser URL and not the stringified array of objects:

http://www.myapp.com/#/my-view/4

INSTEAD OF

http://www.myapp.com/#/my-view/4?flskdjalfjaewoijoijasdlfkjösldakjföliwejöorijo


Is it possible to either a) pass the array of objects hidden to the ui-view or b) pass both but hide the other from the browser URL?

I found something about the squash parameter, but couldn't get it to do what I'm trying.

Here's my view:

$stateProvider
.state('show', {
url: "/show/{itemId}?{itemList}",
views: {
'mainView': {
templateUrl: 'views/itemView.html',
controller: 'showController',
params: {
itemList: {
value: null,
squash: true
},

itemId: -1
}
}
}


How can I hide the list of objects from the URL, without hiding the id?

Answer

You are on the right path. To hide params you have to define them in params as you do, without squash.

Your example should look like:

  $stateProvider
  .state('show', {
    url: "/show?itemId",
    views: {
      'mainView': {
        templateUrl: 'views/itemView.html',
        controller: 'showController',
        params: {
          itemList: {
            value: null
          }
        }
      }
    }

See example: http://plnkr.co/edit/wEjwCVWMKTyuSdyLr0og?p=preview