Is it feasible to conceal certain parameters within a URL using Angular UI Router?

Looking to pass two values to a new ui-view via parameters:

  • item id
  • list of objects

However, I want the new view to display 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 there a way to either a) pass the array of objects hidden to the ui-view or b) pass both but hide one from the browser URL?

I came across information about the squash parameter, but was unable to achieve the desired outcome.

Below is my current view setup:

  $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 keep the list of objects hidden from the URL while displaying the id?

Answer №1

You are heading in the right direction. To conceal parameters, you must specify them in the params section without using squash.

Your code example should appear as follows:

  $stateProvider
  .state('show', {
    url: "/show?itemId",
    views: {
      'mainView': {
        templateUrl: 'views/itemView.html',
        controller: 'showController'
        // Params will not function here! They must be defined below...
        // $stateProvider.state('show', {url:'/show/:url_param',views:{}, params: {}})
      }
    },
    resolve: {},
    params: {
      itemList: {
        value: null
      }
    }
  })

Check out this live example: http://plnkr.co/edit/wEjwCVWMKTyuSdyLr0og?p=preview

Answer №2

One way to achieve this is by following these steps:

SomeController:

$state.go(newState, {
 'newItemId'   : newitem._id,
 'newItemName' : newitem.title
});

SomeRoute function anotherRoute($stateProvider) {

    $stateProvider
      .state('newState', {
        url : '/:newItemName',
        params : {
          'newItemId' : null //hides newItemId param
        }
      });
}

Result: .../newitemnumber1

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use Javascript to deactivate the mouse cursor and rely solely on the keyboard cursor for navigation

I am facing an issue with a div that contains a textarea. The cursor is automatically positioned at the beginning of the text within the textarea. I would like to disable the mouse cursor when hovering over the textarea but still be able to navigate within ...

Troubleshooting guide for resolving parse error when installing Open MCT

Hi there! I'm currently in the process of installing NASA's Open MCT (Link) but have hit a roadblock with errors during installation. Upon running npm install, I encountered the following error message: { Error: Parse error using esprima for fil ...

Exploring the data types of dictionary elements in TypeScript

I have a model structured like this: class Model { from: number; values: { [id: string]: number }; originalValues: { [id: string]: number }; } After that, I initialize an array of models: I am trying to compare the values with the o ...

Having difficulty applying a style to the <md-app-content> component in Vue

Having trouble applying the CSS property overflow:hidden to <md-app-content>...</md-app-content>. This is the section of code causing issues: <md-app-content id="main-containter-krishna" md-tag="div"> <Visualiser /> </md-app ...

Is Node.js and Express a suitable server-side package for a WebGL web application?

Currently, I am in the process of creating a webgl application. While using mongoDB for my database and three.js as my webgl library has been helpful during development, I find myself unsure about which server-side technology to incorporate into the appl ...

Modifications to the selected input do not impact the current state of the model

Declare 3 select inputs with hierarchical data to be chosen: <select data-ng-model="current.manufacturer" data-ng-options="c.name for c in manufactures"></select> <select data-ng-model="current.mark" data-ng-options="c.name for c in current ...

Once the template is fully loaded and rendered, I am looking for an event to trigger

Just dipping my toes into the world of AngularJS and feeling a bit lost. I'm on a mission to discover how to determine when a view has finished rendering its template. I've tried countless suggestions from all over the internet, but nothing seem ...

Troubleshooting: The issue with json_encode in Ajax calls

I am facing an issue with my ajax call and the json response. The console is indicating that my php file is not returning a json format, but I am unable to pinpoint the exact reason behind it. Below is my ajax function: function showEspece(espece, categori ...

Assign Attribute to a Different Data Transfer Object

I have a query regarding my nestjs project - is it possible to assign a value Attribute to another Dto? Specifically, I'm looking to assign idData to the id in IsUniqueValidator. I attempted the following code but it resulted in 'undefined&apos ...

What is the best way to receive a single response for various API endpoints?

I need to retrieve a single response from an API that has multiple page URLs. How can I accomplish this with just one API call? Here is my code: async function fetchArray () { // Fetch `urlArray` from object parameter let urlArray = []; ...

Perform the cloning process for each item listed in my JSON file

I'm trying to display a list of names from a JSON file on my webpage, each in their own separate div. However, I've been unsuccessful in getting it to work so far. Currently, this is what I have attempted: var cloneTeam = $('.team').c ...

Show a notification when an object is removed by the ng-repeat filter

Among my group, there are individuals with ninja skills while others do not possess such abilities. If they do not have ninja skills, I want to show the message this guy isn't a ninja. Currently, nothing is being displayed. Could it be that I am usi ...

Validate input strings in Node.js using Joi to detect and return an error if there are leading or trailing spaces

Looking to set up JOI validation in Node.js that flags errors if a string begins or ends with an empty space. For example: name = "test123" //valid name = "test(space)" or "(space)test" // invalid ...

XML and numerous, distinct DIV elements

Is it possible to display content from an XML file in a DIV upon clicking, without using IDs and involving multiple DIVs? For instance, when clicking on the first link in the following code snippet, the content from an XML file should only appear in the r ...

Get detailed coverage reports using Istanbul JS, Vue JS, Vue CLI, Cypress end-to-end tests, and Typescript, focusing on specific files for analysis

I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the docum ...

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Creating a Responsive Layout <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> CSS Styling .box1, .box2, .box3{ display: block; f ...

Trigger the UseEffect() function in a Material UI Dialog only when the dialog is open

In my project, I have a parent component that includes a Material UI Dialog as a child component. The purpose of this dialog is to fetch and display data from a REST API. Currently, I am using the UseEffect() function in the Dialog component to achieve th ...

Choose2 incorporate on change

I have a Laravel project where I am using the vuexy theme. I've been trying to add an onchange event to my select2 input, but so far I haven't had any success. Here is my select2 input: <div class="col-12 mb-2"> <label class ...

Issue with text input field causing the Enter key to not create a new line

In the example above, the text is placed in the middle of the text area. Here is the CSS code : .form-control { height: 300px; display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-heig ...

The E.js Template encountered an error with an unexpected token "else"

I am in the process of creating a website quickly using e.js & Express. However, I am encountering some problems when trying to use an if-else statement within e.js tags. The if statement works fine, but as soon as I add an else statement, things start t ...