Show the URL hash as url.com/something#/ rather than url.com/something/#/

I'm encountering a peculiar issue with my Angular v1.6.5 setup. My routes seem to be acting strangely, for example:

 $routeProvider
        .when('/', { templateUrl: 'myTemplate', controller: 'myController', method: 'myMethod' })
}

When my URL is like myUrl.com/sectionName, I expect it to be:

myUrl.com/sectionName/#/

But instead, it appears as:

myUrl.com/sectionName#/

Although I can still retrieve data and my controllers work fine on this route, it leads to other issues (such as the inability to detect the onhashchange event).

I've looked into similar problems online, but most solutions relate to extra characters like '!'. While I have already used 

$locationProvider.hashPrefix('');
in my configuration, my problem seems to stem from something different.

If anyone can offer assistance on this matter, I would greatly appreciate it.

javascriptangularjsroutesangular-routing

Answer №1

    var app = angular.module('myapp', [])
       .config(function($routeProvider, $locationProvider) {

        $routeProvider
            .when('/', {
                templateUrl : 'partials/home.html',
                controller : mainController
            });
       $locationProvider.html5Mode(true);
});

CSS

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <base href="/">
</head>

Give it a try, it will enhance the appearance of your hyperlinks.

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

Can you explain the distinction between "javascript:;" and "javascript:" when used in the href attribute?

Can you explain the distinction between using "javascript:;" and just "javascript:" within an anchor tag's href attribute? ...

javascripthtml

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

What is the best way to dynamically hide a textbox in JSP based on the selection of a

On my JSP page, I have a textbox and a checkbox. I attempted to use jQuery and JavaScript to hide the textbox when the checkbox is checked, but it doesn't seem to be working. Below is the code snippet: <p class="contact"> <input id="check" n ...

javascriptjavajqueryjspcheckbox

Is it considered best practice in Laravel to utilize a combination of a GET and a POST request in a route instead of using the resource route and only implementing the index and store methods

Is it advisable to use Route::get('somewhere', function() { // show }); Route::post('somewhere/search', function() { // search }); Wouldn't it be illogical to utilize resource when only two methods are needed? Shouldn&ap ...

phplaravelroutesresources

Retrieve the text content from a JavaScript alert using WebDriver

Currently, I am utilizing Selenium WebDriver in C# to enhance my knowledge and create automated tests. I recently encountered a particular scenario that has left me puzzled: Imagine you have a website similar to this one: . When attempting to register wit ...

c#javascriptseleniumselenium-webdriver

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

I came across this snippet of code while working with ng-repeat: <div ng-show="parameter == 'MyTESTtext'">{{parameter}}</div> Here, parameter represents a string variable in the $scope... I started exploring if it was possible to c ...

javascriptangularjs

Encountered a failure while loading modules in AngularJS

When I tried opening the index.html page using Chrome, I encountered an error stating that the correct modules could not be found. Uncaught SyntaxError: Unexpected token < angular.js:1 Uncaught SyntaxError: Unexpected token < controller.js:1 ...

javascripthtmlangularjs

Retaining the data retrieved from a successful $.ajax call's done() function

After successfully retrieving the desired information in the done method, I encountered an issue when trying to assign it to a variable with broader scope. This approach had worked fine with $.each(...), leading me to assume that it would work here too. v ...

javascriptjqueryajaxcoding-stylescope

Implement AngularJS to ensure that scripts are only loaded after the page has finished rendering

I am having trouble implementing the TripAdvisor widget on my website. It functions correctly when the page is refreshed, but it does not appear when navigating through links. Additionally, an error message is displayed stating that the document could not ...

javascripthtmlangularjs

"Modify hyperlink attributes to enhance security and optimize user experience

$("a[href*='youtube']").attr('rel', 'prettyPhoto'); Having some trouble targeting links on a page containing "youtube" in the URL. I'm trying to set their rel attribute to "prettyPhoto" so they open in a lightbox window. ...

javascriptjqueryhtml

Tips for implementing multi-language URL routing in a Node.js application

I am seeking guidance on how to handle routing for multi-language URLs in Node.js, Currently, I have the following routes set up where each language generates specific routes as shown below. However, with more than 5 languages, efficiency is becoming a co ...

javascriptnode.jsexpressroutesmiddleware

The functionality of changing the checkbox to "checked" by clicking on the span is not

How can I create a toggle button with a checkbox using css and jquery? Clicking on the span representing the toggle button should change the checked property of the checkbox. Currently, the span does not change the property, even though it triggers the c ...

javascriptjqueryhtmlcss

Exploring the functionality of API Route within Next.js

Currently, I am in the process of learning about API design and utilizing next.js API routes. One of my first routes is set up as api/property/[propertyId] to fetch specific property details. My current challenge involves setting a dynamic route for the s ...

reactjsapiroutesnext.jsvercel

Identify the mouse's location in relation to its parent element, not the entire webpage

A script I've been working on detects the mouse position relative to the page, taking into account a movement threshold of 100px before triggering certain actions. // Keep track of last cursor positions var cursorDistance = 0; var lastCursorX = null; ...

javascriptjqueryoffset

What sets Gulp-Browserify apart from regular Browserify?

After switching from Grunt to Gulp recently, I find myself still learning the ropes. Can anyone shed some light on the distinction between using Gulp-Browserify versus just Browserify? I've heard that Gulp-Browserify has been blacklisted and seen som ...

javascriptnode.jsgulpbrowserify

Retrieving multiple selected row values using an ASP Repeater

Within my repeater, I have three values bound: a visible "User Name" column, a visible "Business" column, and a hidden field called "UserId". My goal is to implement the following functionality: when a row is clicked, it should highlight in a different c ...

c#javascriptjquery.netrepeater

The lightbox feature on the page is not functioning properly

On my website, I have a beautiful lightbox created using fancybox.net. You can check it out here: I also use gallery codes to display images in a gallery format. Below is the jQuery code I am using: $(document).ready(function() { $(".gallery").fancy ...

javascriptjqueryhtml

What could be the reason for the timeout function in my Angular application not working as expected?

I've created a basic controller to handle a countdown timer. Upon running the code, I notice that only one "tick" is displayed in the console. Ideally, I would like to see a "tick" every 5 milliseconds. .controller('Countdown', function($s ...

angularjs

Discovering dependencies for the Tabulator library can be achieved by following these

Can anyone provide me with a complete list of dependencies for Tabulator 4.2? I have already reviewed the package.json file, but it only contains devDependencies. ...

javascriptangulartabulator

Looking for a modular approach? Incorporate specific parts of a module into the parent component

Developing a node.js module and aiming to organize my code effectively. My goal is to have individual files/folders for different parts of the module such as authentication, users, etc. These will be required from a parent package which will then expose t ...

javascriptnode.jsexpress