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?

If you are passing between angular views, why not make itemList a service instead of trying to pass it as a param? — Claies
– Claies, Commented May 24, 2016 at 23:24
Ah good idea... maybe this would be better especially when passing big data amounts. When passing data via params between views, are they always passed via URL or does ui router just display them there but pass it smarter behind the scenes? I'm just thinking if the url field length limitations come into play eventually...? — Juhana Pietari Lehtiniemi
– Juhana Pietari Lehtiniemi, Commented May 25, 2016 at 9:30

Tyler Wall · Accepted Answer · 2018-02-20 22:50:41Z

7

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

edited Feb 20, 2018 at 22:50

Tyler Wall

3,7987 gold badges39 silver badges52 bronze badges

answered May 24, 2016 at 23:44

przemod

4593 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Juhana Pietari Lehtiniemi Over a year ago

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 Over a year ago

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

Ram_T Over a year ago

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

AndreaM16 · Accepted Answer · 2016-11-28 08:33:27Z

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

edited Nov 28, 2016 at 8:33

answered Sep 9, 2016 at 10:19

AndreaM16

4,0055 gold badges37 silver badges78 bronze badges

6 Comments

Ram_T Over a year ago

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

AndreaM16 Over a year ago

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

Ram_T Over a year ago

How can I set them?

AndreaM16 Over a year ago

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.

Ram_T Over a year ago

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?

|

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related