CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Juhana Pietari Lehtiniemi
Juhana Pietari Lehtiniemi

Reputation: 449

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

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

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?

Upvotes: 3

Views: 12939

Answers (2)

przemod
przemod

Reputation: 459

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

Upvotes: 7

AndreaM16
AndreaM16

Reputation: 3975

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

Upvotes: 2

Related Questions