Retrieving Angular URL Parameters Containing Slashes

I'm currently in the process of developing a single page angular application.

This app retrieves a token from the URL and then sends it to an API. At the moment, my URL structure is as follows:

www.example.com/?token=3d2b9bc55a85b641ce867edaac8a979173d4446525230290fc86a0ed8ff18b95

While my code is effectively utilizing angular routes, I need to extract the token from the URL using this method:

var postToken = $location.search().token;

In my configuration, I have set up the following:

app.config(function($locationProvider, $httpProvider, $routeProvider) {
    $routeProvider
    .when('/token/:token', {
        templateUrl : 'views/select-token.html',
        controller : 'selectHold'
    })
    .when('/purchase-hold/token/:token', {
        templateUrl : 'views/purchase-token.html',
        controller : 'purchaseHold'
    });
});

My objective is to structure my URL like this:

www.example.com/token/3d2b9bc55a85b641ce867edaac8a979173d4446525230290fc86a0ed8ff18b95

How can I modify my code to search for /token/ and retrieve the corresponding data, instead of using ?token=?

Answer №1

Plan your path as you go

.when('/link/:link', {templateUrl : 'views/select-link.html', controller : 'selectLink' })

Next, make sure to inject $routeParams into your controller so you can access the route parameter

.controller('selectLink', function($scope, $routeParams){
  $scope.link = $routeParams.link
}

Answer №2

If you want to access the $routeParams in your controller, simply inject it and Angular will make it available for use.

app.controller('getAuthToken', function($scope, $routeParams) {
     console.log($routeParams.authToken);
     // Now $routeParams is accessible within this controller
});

Angular will automatically populate the $routeParams with the key 'authToken' and its corresponding value from the URL.

For example, if the URL loaded is

www.website.com/authToken/12345abcd
,

the $routeParams object will be:

{ authToken: '12345abcd' }

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

passing arguments during deferred resolve() and when() operations

I am currently working on a flash card website and I need to determine the status of preloaded images once they have finished loading or if there was an error. After obtaining the status of each image, I will proceed with further actions. My code is inspi ...

The module script failed to load due to an unexpected response from the server, which was MIME type of text/jsx instead of a javascript module script

I have recently set up an express server and created an API, as well as installed React using Vite for my frontend. However, when I attempt to connect or load my main HTML file to the server, an error is displayed in the console. This is all new to me as I ...

Retrieving saved data from LocalStorage upon page reload

<div ng-repeat="section in filterSections"> <h4>{{ section.title }}</h4> <div class="checkbox" ng-click="loaderStart()" ng-if="section.control == 'checkbox'" ng-repeat="option in section.options"> <label ...

Using Node.js with the Instagram API resulted in the error message: "Failed to decode a text frame in UTF-8 format."

For my project, I am utilizing the Instagram API with the http node.js module. The API call is quite simple: getJSON : function(options, on_result, on_error) { var req = http.request(options, function(res) { var output = ''; ...

Integrate actual credentials into S3Client using redux async thunk

My S3-like react application with redux is powered by AWS SDK v3 for JS. The client initialization in my auth.js file looks like this: auth.js export const s3Client = new S3Client({ region: 'default', credentials: { accessKeyId: 'te ...

Enhancing ReactJS functionality by incorporating custom logic prior to resolving promises

In one of my components, there is a function as follows: this.props.firebase.getDropSites("123456").then(data => { console.log(data); }); This function in turn calls the following method from my utilities class: getDropSites(dropSiteId) { return th ...

Firestore/Javascript error: FirebaseError - The data provided is invalid for the DocumentReference.set() function. An unsupported field value of 'undefined'

I keep encountering this error Error creating user: FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field diabetesComplication) After some investigation, I realized that the iss ...

Disregard periods in URLs when configuring nginx servers

While developing with Vite in development mode via Docker on my Windows 10 machine, I encountered an issue where the local custom domain would not load due to a required script failing to load. The specific script causing the problem is /node_modules/.vit ...

What is causing the duplication of leaves when using this DFS implementation?

I created an algorithm to compare if two trees have the same leaves. Both trees display matching leaf numbers in the exact order, resulting in a true outcome. Below is the code that I formulated: function leafSimilar(root1: TreeNode | null, root2: TreeNo ...

Set the class of the list item to "active" class

My approach to styling involves using a UL and li class to contain form selection options. I plan on hiding the radio button and using its value upon form submission. I have managed to enable checking the radio box when the <li> is clicked, but for s ...

Retrieving Current Map Bounds in Angular Google Maps

After searching extensively, I'm struggling to figure out how to retrieve certain markers using the angular-google-maps feature. Specifically, I am utilizing <ui-gmap-markers> tag to set markers on the map. My goal is to obtain only the markers ...

Surprising non-synchronous operation within the computed property "vue/no-async-in-computed-properties" in Vue3

I am currently working on a Vue3 project and encountering an error when running it. Below is the complete code snippet that I am using. Can anyone assist me in resolving this issue? Thank you in advance. <script> import axios from 'axios'; ...

Is there a way to utilize local resources in case CDNs are unable to load properly?

Encountering an issue with Bootstrap and jQuery loading from CDN, sometimes failing to import from the CDN source. For instance: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYii ...

AngularJS with ui-router for creating a lightbox overlay with the added functionality of deep linking

Exploring the implementation of AngularJS for creating a lightbox with URL deeplinks. The functionality works smoothly, however, assigning a name to it for every page along with the corresponding template is essential. To achieve this, I am utilizing ui-r ...

Transform the checkbox selection into an active hyperlink upon being selected

Currently, I am in the process of designing a form that allows visitors to select items they would like to view by checking relevant checkboxes. Upon clicking a Request button, the URLs of the selected items are displayed. I aim to have the URL appear as ...

Stopping a JavaScript promise.all() based on a certain condition

Here's a snippet of code I'm working with: let promiseList = [] for (let i in data) { let promise = checkIfMember(data[i].tg_id, chatId).then(res => { if (res) { //if the user has a undefined username ...

Error encountered: No matching overload found for MUI styled TypeScript

I am encountering an issue: No overload matches this call. Looking for a solution to fix this problem. I am attempting to design a customized button. While I have successfully created the button, I am facing the aforementioned error. Below is my code ...

What is preventing me from being able to effectively transmit the array using the POST method in Express?

As a newcomer trying to learn Express, I believe I am on the right path, but I am currently facing some challenges with the POST method. The issue I'm encountering is as follows: Whenever I send a POST request to an HTTP file, I receive an empty ob ...

Implementing siteSpeedSampleRate in Google Analytics with AngularJS - a step-by-step guide

I utilized the following link https://github.com/revolunet/angular-google-analytics to incorporate Google Analytics into my AngularJS 1.5 project. However, I'm having trouble setting the siteSpeedSampleRate. I injected the AnalyticsProvider and attemp ...

What is the best way to eliminate spaces in $location.search()?

While using $location.search('event', data);, I've encountered an issue where the URL displays something like this: ?event=arsenal%20fc%20 I am looking to remove these spaces in order to get: arsenalfc ...