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

Question

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?

Solution 1

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 do not work here! They need to be attached below ...
        // $stateProvider.state('show', {url:'/show/:url_param',views:{}, params: {}})
      }
    },
    resolve: {},
    params: {
      itemList: {
        value: null
      }
    }
  })

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

Solution 2

It's also possible doing that

SomeController:

$state.go(someState, {
 'itemId'   : item._id,
 'itemName' : item.title
});

SomeRoute function someRoute($stateProvider) {

    $stateProvider
      .state('someState', {
        url : '/:itemName',
        params : {
          'itemId' : null //hides itemId param
        }
      });
}

Output: .../itemnumber1

Comments

[Juhana Pietari Lehtiniemi]

Ah, thanks! Hmm, I can't get it work exactly yet, maybe it's because I have to use dynamic links so I can't use ui-sref in the source file. For some reason I can't see the itemList in the new state, only itemId is being passed. Here's how I'm passing it: <a ng-href="{{ $state.href('show', { itemList: filteredSearchResults, itemId: item.id }) }}"> The config is like this: url: "/show/{itemId}" and params: { itemList: null }

[przemod]

You have to pass itemList as an object: <a ng-href="{{ $state.href('show', { itemList: {filteredSeachResults: filteredSearchResults}, itemId: item.id }) }}">

[Mr_Perfect]

if I mention null I am loosing its value. What if want to use it in the someState's controller?

[Mr_Perfect]

if I mention null I am loosing its value. What if want to use it in the someState's controller?

[AndreaM16]

They get just initialized to null. One you set them, you can easily access them through $state.params, $state.params.itemName.

[Mr_Perfect]

How can I set them?

[AndreaM16]

Doing like I did in SomeController. If you do, var item = new Object(); item._id = "hey"; and item.title = "Johnny"; and Then you do that precise $state.go, you'll get .../hey/Johnny.

[Mr_Perfect]

I am sending parameters using $state.go('myState', {name: 'ram', id: 2}) Now, state should be .state('myState', {url: '/home/:name', params: {id: null}}), if I mention null like this I am loosing its value. how to set it and how to use it in the controller?

[Mr_Perfect]

Try to understand my problem. I am trying to send two params to stateParams. one should be shown in the url and other should be used in the controller