Concealing URL parameters in ui-sref (using ui.router)

Here is the HTML code I am working with:

<a ui-sref="videoParent.Display.video({videoName:'[[sVid.slug]]', videoId:'[[sVid.videoID]]'})"><p>[[sVid.name]]</p></a>

The parameters videoName and videoId are retrieved in the JavaScript file like this:

.state("videoParent.Display.video", { 
            url: "/video/:videoName/:videoId", 
            views: {
                'video_info@videoParent': { 
                    templateUrl: "/partials/starred_video.html", 
                    controller: "starredVideoController",
                    controllerAs: "starredVidsCtrl",
                    resolve: {
                        retrivedVideo: ['videosService', '$stateParams', function(videosService, $stateParams) {
                            if ($stateParams.videoId) {                                   
                                var video = videosService.getVideoById($stateParams.videoId);
                                return video;
                            }
                        }]
                    }
                },

When my URL is generated, it looks like this:

../video/data-statistician/5

However, I want to hide the videoId (5) and have the output as:

../video/data-statistician

I can achieve this by changing the url part of my state to:

url: "/video/:videoName

But the issue is that if I do that, the videoId will not be included in the $stateparams object.

Is there a way for me to pass the video ID to the state without showing it in the URL?

javascriptangularjsangular-ui-router

Answer №1

To avoid displaying ID in the URL but still pass it using state params, you can follow this method:

.state("videoParent.Display.video", { 
            url: "/video/:videoName",
           params:{videoId:null}, 
            views: {
            'video_info@videoParent': { 
                templateUrl: "/partials/starred_video.html", 
                controller: "starredVideoController",
                controllerAs: "starredVidsCtrl",
                resolve: {
                    retrivedVideo: ['videosService', '$stateParams', function(videosService, $stateParams) {
                        if ($stateParams.videoId) {                                   
                            var video = videosService.getVideoById($stateParams.videoId);
                            return video;
                        }
                    }]
                }
                }

NOTE: The way to declare parameters in a state definition has changed to params: { id: {} } from params: ['id']

<a ui-sref="videoParent.Display.video({videoName:{sVid.slug}, videoId:{sVid.videoID}})"><p>[[sVid.name]]</p></a>

UI-router version: ~v.0.2.10

Answer №2

As recommended, passing parameters without exposing them in the URL can be done by setting the URL to:

url: "/media/:mediaTitle

To include additional parameters (not visible in the URL), you can define them as follows:

    params: {
        mediaId: null
    }

If you intend to navigate to the state and provide the parameters, you have two options:

Using HTML:

<a ui-sref="mediaParent.Display.media({mediaTitle: 'Inception', mediaId: 8})">Go to media</a>

Or using JavaScript:

$state.go('mediaParent.Display.media', {mediaTitle: 'Inception, mediaId: 8});

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

How can I effectively assign model data to a service property in an AngularJS controller?

I have established a service to facilitate the sharing of data/state across multiple controllers. One of the controllers updates certain properties within the service using scope data through a save function. The updated data is then accessed by other cont ...

javascriptangularjsangularjs-scopeangularjs-serviceangularjs-controller

"Organizing Your Content: A Guide to Grouping Information under Specific

How can I organize content under different headings? I am using two methods to retrieve data: 1. axios.get('/api/get/headers') 2. axios.get('api/get/contents') I am struggling with how to properly structure this, especially since the ...

javascriptarraysvue.js

Tips for eliminating unwanted white space underneath your webpage while zooming on a mobile device

Currently developing a responsive website, everything is running smoothly except for one issue. When I pinch zoom in on mobile and scroll down, a large white bar appears below the entire page, stretching across the screen width. How can this be fixed? Belo ...

javascriptjqueryhtmlcss

The inheritance caused this scope to be lost

Here is an illustration of code with two files and "classes". In the CRUD class, there is a problem with this.modelName when setting routes as it changes the context. The question arises on how to maintain the same scope within the CRUD where modelName is ...

javascriptnode.jsoop

How to retrieve client's hostname using Node and Express

How can the client's hostname be retrieved in a Node / Express server? Is there a method similar to req.connection.remoteAddress that can be used to obtain the client's hostname? ...

javascriptnode.jsexpresshostname

Discover the steps to obtain a READY status for your uploaded video using the Kaltura VPaaS API

After uploading the video, it will show as CONVERTING in the media status on the KMC dashboard. Eventually, it will change to READY. Is there a way for me to verify the status and make sure it is READY? ...

javascriptnode.jsvideokalturakaltura-player

Unable to retrieve information from the wiki API

Here is the link to my codepen project: https://codepen.io/mlestina/pen/OZpOQW?editors=1111 I am having trouble retrieving data from the Wiki API. When I check the Contr-Shift-J readout, I see: Loading failed for the <script> with source “https: ...

javascriptajaxapi

"Issue with Material-ui Autocomplete where the defaultValue does not function properly

The defaultValue was set to "Chairs" but it doesn't seem to be working as expected. Here is the code snippet: import React, { useState } from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomple ...

javascriptreactjsmaterial-ui

Unexplained disappearance of div element in Vue Router's Navbar

I have been working on integrating a Vue Router into my navbar and everything seemed to be going well. You can check out the code here. The navigation menu I created works perfectly, allowing users to navigate between the home template and about template w ...

javascriptvue.jsvuejs2vue-componentvue-router

What is the best way to transfer a querystring received in Node.js to a page being shown through res.render?

I have a nodejs file where I am rendering a page named foo.html. Within foo.html, I am using ajax to retrieve variables from a querystring and load an appropriate xml document based on those variables. The issue arises when I run my nodejs server, which is ...

javascriptajaxnode.js

The error message "THREE is not defined" indicates a problem

Hey there! I've been experimenting with running some three.js examples on my local machine. I ran into some security issues, so I set up a local server using Python. While the background image and text appear as expected, the animations are not workin ...

javascriptthree.js

Tips for sending multiple variables to PHP using jQuery

Hello everyone, I could really use some assistance with a jQuery and AJAX issue I'm facing. I admit that I am not very well-versed in these technologies, so it's likely that I am missing something simple here. My problem lies in trying to pass mo ...

javascriptphpjquerymysqlajax

Node/ejs not recognizing Javascript files

I have been working on implementing a JavaScript code to create a hamburger menu when the screen is at a specific size, but unfortunately, nothing seems to happen. Here is how my directory structure looks like: public imgs javascript menu. ...

javascriptnode.jsexpress

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

javascripthtmlcss

What steps can be taken to fix a syntax error in a NodeJS express server code?

I am currently facing a syntax error in the code below, and I'm struggling to fix it. The specific error message is as follows: node staticapi.js /Users/v/Desktop/CS-Extra/EIP/A5/staticapi.js:123 res.status(200).send("Api is running") ...

javascriptexpress

Exploring a different method for implementing animations during UI-router state transitions

My product owner presented me with a seemingly impossible challenge to create animations between states. I utilized ngAnimate and thought I had a brilliant solution - only to be told it wasn't what they wanted. "This isn't what I had in mind," h ...

javascriptangularjsanimationangularjs-directiveangular-ui-router

How can I show only the final four digits of an input field using Angular Material and AngularJS?

As a newcomer to Angular Material and Angular JS, I am striving to create an md-input field that displays only the last 4 digits in a masked format, such as "********1234". While my experience is currently limited to using md-input password fields where ...

javascripthtmlcssangularjsangular-material

Tips for troubleshooting a timeout issue in electron-html-to with node.js

Encountering a timeout issue while attempting to convert an html file to pdf using electron. The js app is being run through node. `{ Error: Worker Timeout, the worker process does not respond after 10000 ms at Timeout._onTimeout (C:\Users\Owner ...

javascriptnode.jselectron

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

jspdf generates blank PDF files

I am trying to use JsPDF to generate a PDF from content within a Section tag. I have followed various guides but none of them seem to be working for me. Since there is no demo code available, I am turning to this platform in hopes of finding a solution. A ...

javascriptjqueryjspdf