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

无人久伴 提交于 2019-12-11 00:38:18

问题


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?


回答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




回答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



来源:https://stackoverflow.com/questions/37425383/possible-to-hide-some-parameters-in-url-with-angular-ui-router

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!