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

Creating chained fetch API calls with dependencies in Next.js

I am a novice who is delving into the world of API calls. My goal is to utilize a bible api to retrieve all books, followed by making another call to the same api with a specific book number in order to fetch all chapters for that particular book. After ...

What is causing my JavaScript not to load properly within Bootstrap tabs?

I am facing an issue with my website which has Bootstrap 4 tabs implemented in a blade template. The problem arises when there are tabs within tabs, and upon clicking one tab, the slicks Javascript plugin that I created does not load on other tabs. It on ...

What is the method for implementing an Inset FAB with Material UI in a React project?

Currently, I am working on a project that requires an "Inset Fab" button to be placed between containers. After referencing the Material Design documentation, I discovered that the component is officially named "Inset FAB". While I was able to find some tu ...

Error: Primefaces ajax status failure (dialog has not been defined)

I incorporated the same code found on primefaces.org, specifically this link: http://www.primefaces.org/showcase/ui/ajaxStatusScript.jsf <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/> <p:dialog modal="true" ...

Problem arises with table nth-child selector following the addition of grid-gap

Our current table looks like this: The first row has a background color and the second row is white - which is correct. Now I would like to align the attributes to the right. I added the following code to the table: .table-wrapper tbody { font-size: ...

Numerous perspectives within an angular.js application

Issue I'm currently working on creating a product list with the following initial features: Server-side pagination Server-side filtering I am facing several challenges with my current setup, but the main issue is that I can't figure out how to ...

Retrieve dynamic data from a website using jQuery's AJAX functionality

I am trying to retrieve the data from example.com/page.html. When I view the content of page.html using Chrome Browser, it looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> & ...

Determine the presence of a Facebook user by using JavaScript

I am trying to find a method to verify the existence of a Facebook user based on their ID. As far as I understand, there is a Graph API that can provide a Facebook user's profile picture using their ID in this format: I have noticed that if an inval ...

I have been working on creating a hangman game, and although I have figured out the logic behind it, I am experiencing an issue where it is not functioning properly. After inspect

I am currently working on a basic hangman game using only HTML and JavaScript. I have the logic in place, but it doesn't seem to be functioning correctly. When I inspected the element, it showed an error saying 'undefined toUppercase.' As a ...

Employing the powerful Math.pow() function within the setState() method

In this ReactJS code example, the goal is to update the value of a div element with every click of a button using the Math.pow() method. However, it seems that the method is not working as intended. Can someone explain why? The handlerButton function in ...

Unable to access the website's source code

It's frustrating when I can't view the source code of certain websites, such as this one: . When I try to right-click and select "View Source", only a portion of the code is displayed, which isn't the proper source code for the page. Alth ...

What is the preferred default value for a property awaiting assignment from a GET response: Undefined or Null?

Say I need to display information about a product, but first I must make a GET request to get the data and assign it to the product. I'm wondering, should the default value for product in the data() function be undefined or null, and is there a differ ...

A guide on utilizing AngularJS to extract data from a webpage

I'm attempting to transfer the information from a specific page on my website and paste it into a file. I know how to post a sample text stored in a variable from Angular and save it in a file in the backend using Node Express, so writing a file isn&a ...

Setting the selected value of a static select menu in Angular 2 form

I'm having an issue with my Angular 2 form that includes a static select menu. <select formControlName="type" name="type"> <option value="reference">Referentie</option> <option value="name">Aanhef</option> &l ...

Where do I find the resultant value following the completion of a video production through editly?

Hey there, I have a quick question... I was following the instructions in the README for editly, and I successfully created videos by calling editly like this: // creating video editly(editSpec) .catch(console.error); The only issue is that I am using Ex ...

Running two blocks of scripts (utilizing lab.js as a loading manager)

I am currently facing an issue where I am trying to load two separate blocks of `lab.js` in different locations. However, when I attempt to utilize functions from the second block that are called from files loaded in the first block, they are showing as un ...

Display the value of an array based on the current position of another array in AngularJS

When working with javascript, there are two arrays that have equal lengths that are determined by a database value which is unknown. For example: colName=['col1','col2','col3']; fieldValue=['abc','def',&apo ...

Do iframes not utilize parental jquery?

I have a homepage that utilizes jQuery by loading it from the ajax google APIs in the head> tag. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script> I attempted to use jQuery functio ...

The issue of a parent list item onclick function overpowering the onclick function of a sub list item within AngularJS

Here is an excerpt from the template I am working on: <ul> <li ng-repeat="a in alist" ng-click="toggleShowItems(a)"> {{a.name}} <ul ng-if="a.showItems" > <li ng-repeat="item in a.items" ng-click="show ...

Avoid triggering the onClick event on multiple submit buttons when the form data is deemed invalid by vee-validate

How can I ensure that the onClick event on a button is only called if certain input fields are valid, using vee-validate ValidationObserver? The validation should apply to individual buttons within a form, rather than the entire form itself, as there are m ...