Switch out the URL in an Angular setting

I'm facing an issue with modifying the URL after opening a new window and navigating to a state.

Starting from my initial page:
localhost:8000/startpage.html.
Upon loading, the URL transforms into
localhost:8000/startpage.html#/.
Now, in the new window, I navigate to a different state:

localhost:8000/startpage.html#/newstate
.

My goal is to have the URL structured as follows:

localhost:8000/startpage.html?project=1#/newstate
.

However, I am encountering an issue where instead of completely replacing the URL, it appends
?project=1#/newstate to localhost:8000/startpage.html#/.

Consequently, the outcome looks something like this:

localhost:8000/startpage.html#/%3Fproject=903%23/newstate

when what I actually need is:
localhost:8000/startpage.html?project=903#/newstate

Below is some relevant code snippet:

if ($window.history.replaceState) {
    var newUrl = '?project=903' + '#/case';
    $location.path(newUrl);
    $location.replace();
}; 

It seems that there are two main issues at play here. The extra '#/' after '.html' and the encoding of the URL. Even if I remove the additional '#/', it doesn't function properly unless I replace the encoded characters with their actual counterparts. Any assistance provided would be greatly appreciated.

Thank you.

Answer №1

It seems like the method you are using is not quite right. Instead of using $location.url, I would recommend using it to set the path, query, and hash values simultaneously. However, for more flexibility, consider setting the query and hash separately if you only need to update specific parts of the URL.

$location.search('project', '903');
$location.hash('case');

I have omitted the unnecessary / from the hash parameter.

In addition, Angular typically utilizes hash mode for navigation by default. If you wish to provide a custom hash, you may need to disable this feature.

$locationProvider.html5Mode(true);

Remember to configure this in your application settings.

For more information, check out this helpful article: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

Answer №2

In AngularJs 1, the # sign typically comes after the page that loads the ngApp Directive... please inform me if I am mistaken.

Therefore, I believe the only resolution to this issue is to place the ngApp directive on the specific page link where you desire the # tag to show up...

However, it is considered a poor practice.

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

What is the most effective way to retrieve the default value of ng model?

When working with php and angular, I am trying to set a value in ng model from a php expression. However, when I try to read the ng model value from the controller, it is showing up as null. <input ng-model="id" ng-init="id= '<?php echo $userID ...

Why might the MIME type 'application/json' be refused when the dataType is JSON?

Is it true that if the dataType is set to JSON in jQuery, it expects a JSON response? I found http://api.jquery.com/jquery.ajax/ to be informative on this topic. In the following function, I have experimented with specifying both no dataType (for jQuery&a ...

How to host two Node.js socket.io projects on one URL

My Nodejs server is hosted on Amazon Lightsail. I have successfully connected to it and configured Apache for Nodejs. I am working with 2 Nodejs socket.io projects and I want to access both of them using a single URL. Below are the links in Nextjs: const ...

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

Update the background color when a selectable option is chosen and not disabled

I am searching for a solution to modify the color of a select box if one of the disabled options is not chosen. Here is an example of the dropdown: <select class="selectoption" name="desc[]"> <option disabled="disabled" selected="sel ...

What causes the issue of undefined destructured environment variables in Next.js?

Within my application built with Next.js, I have configured a .env file containing a variable labeled API_KEY. When attempting to destructure the value of this variable, I am consistently met with undefined, as shown below: const { API_KEY } = process.env ...

Trigger next animation after the completion of current animation using Jquery animate callback

Is there a simpler way to achieve this task? var index = 0; while (index < 5) { $(this).find(".ui-stars-star-on-large:eq(" + index + ")").animate({ width: w + 'px' }, 200, "swing"); index++; } ...

The Express server is set up with CORS enabled, however, it continues to encounter issues when attempting to make asynchronous HTTP requests from

We're currently experiencing an unusual issue and are seeking assistance to resolve it. Initially, our Express server is functioning well as an API when accessed from the same domain. However, we also need to utilize this API on our computers for tes ...

Button for copying URL and pasting it to clipboard available for use on desktop, iOS, and Android platforms using JavaScript

Is it feasible to use JavaScript/jQuery to copy the current URL and paste it into the clipboard using pure JS? Specifically, I am targeting phone users, like those with iPhones running Safari. I want to create a button that can automatically retrieve the ...

End the sessions of all users sharing the identical JWT token

Currently, I am utilizing React and Nodejs while incorporating JWT for user authentication. An issue has arisen where multiple users are simultaneously logged in with the same email address such as "[email protected]". Our objective now is ...

Is it acceptable for Single Page Web Apps to have multiple requests at startup?

I've been dedicated to developing a Single Page Web App (SPA) recently. The frontend is built with BackboneJS/Marionette, while the backend is powered by Java Spring :(. However, I've noticed that the application's start time could be sluggi ...

Exploring the possibilities of integrating CSS and JavaScript in Node.js with Express

Here is the folder structure I am working with: lifecoding |login2 |index.html |css style.css |js index.js I have all the necessary modules installed for express to work properly. However, when I try to set the static path as shown below, it keeps ...

What distinguishes between employing a div versus a canvas element for a three.js display?

While it is commonly believed that three.js requires the HTML5 <canvas> element, I have found success in using a simple <div> by assigning height and width properties and then adding the WebGLRenderer.domElement as its child within the HTML str ...

How can I show a div beneath a row in an HTML table?

Check out the code snippet below: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style type="text/cs ...

Transforming pure JavaScript code into jQuery code

Currently, I am attempting to add JSON data from the last.fm API into my project. Throughout this process, I have been using the alert() function at various points to confirm that the API data is being correctly parsed. However, it appears that the getEl ...

Unlocking full content access on newapi.org is just a few simple steps away

Currently, I am in the process of building a website using the newsorg API. After sending a request to the API, below is the sample output that I received: "articles": [ -{ -"source": { "id": null, "name": "Hind ...

Clicking the save button in the modal updates the text on both the current tab and any previously clicked tabs

I'm looking to implement tabs that, when clicking on the edit icon, open a modal for editing the content of each tab. The issue I'm currently encountering is that if I open the editor for one tab, close it without saving, then open the editor fo ...

Can you explain the concept of an anonymous block in JavaScript ES6 to me?

Recently, I came across an article on pragmatists which discussed some interesting ES6 features. However, one concept that caught my attention was the use of an anonymous block within a function. function f() { var x = 1 let y = 2 const z = 3 { ...

Concealed HTML element or generated on-the-fly using JavaScript

What is considered the best practice? I have multiple windows on a page: Auth, Execution Result, and Popups. I can display them in two ways: Create them in pure HTML with CSS, set to display: none, and then fadeIn using jQuery. Create the elements ...

I am having trouble with Visual Studio Code and ESLint not recognizing spelling errors such as "style.backgroundCOlor". What steps can I take to resolve this issue?

Since I'm relatively new to Visual Studio Code, I recently encountered an issue with the "ESLint" extension where my typos were not being detected. These typos were in actual pieces of code, not just comments, which made it tricky to spot the errors. ...