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

Angular component equipped with knowledge of event emitter output

I have a custom button component: @Component({ selector: "custom-submit-button" template: ` <button (click)="submitClick.emit()" [disabled]="isDisabled"> <ng-content></ng-content> </butto ...

javascriptangular

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

javascriptjqueryhtml

Parallel ajax function

After creating a form for registering new accounts, I wanted to ensure that the chosen email is available by checking it against a webservice. However, this process takes a few seconds. Let's take a look at the method used: function validateEmail(ema ...

javascriptjqueryajax

Client-Side Isomorphic JS: A Guide to Using HTTP Requests

Seeking advice on data population for isomorphic flux apps. (Using react, alt, iso, and node but principles are transferable) In my flux 'store' (), I need to fetch data from an api: getState() { return { data : makeHttpRequest(url) ...

javascriptnode.jsreactjsfluxisomorphic-javascript

MongoDB: Restrict the number of records returned to an increasing count within a specified range

Currently, I am working on a Node project that uses Mongoose. In my code, I have the following query: var query = Model.aggregate( { $match: { id: id } }, { $sort: { created: -1 } }, { $project: { name: ...

javascriptnode.jsmongodbmongooseaggregation-framework

Error 404: Angular version 18 - Request not found

After upgrading my Angular application to version 18 (18.0.1), I've encountered issues with http requests on localhost. The majority of my requests are returning a 404 error. I am operating behind a corporate proxy and have a configuration file in pla ...

angularangularjshttpnpmproxy

Failed to transfer form data to server using ajax in Node.js

I am attempting to utilize AJAX to send form data to a Node.js server. I had previously inquired about this on the following post. Below is a glimpse of my code: <div id="inputid" style="width: 400px; height:400px"> <p> Kindly input value ...

javascriptjqueryajaxnode.jsforms

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2). I'm loading the data in the ionViewWillEnt ...

javascriptangulartypescriptionic-frameworkionic6

In my experience, the GET request is functioning properly within Postman, but for some reason the POST method continues to send requests repeatedly

ISSUE: I am encountering a problem while making a POST request in Postman. The application keeps sending requests without receiving any response. I have read through various solutions for Postman hanging during a POST request, but none of them seem to sol ...

javascriptrestexpressmongoosepostman

Leverage predefined JavaScript functions within an Angular template

I have been attempting to execute an eval function within my angular template in the following manner: <div *ngFor="..."> <div *ngIf="eval('...')"></div> </div> You understand what I'm trying to ...

javascripthtmlangular

I am looking to retrieve the body's background color using Regular Expressions

Trying to extract the background color from a CSS string: "body{ background-color: #dfdfdf; } " The color could also be in rgba(120,120,120) format. I am looking for a way to extract that color using regular expressions. I have tried using this patt ...

javascriptregexcolorsexpression

What is the origin of this MouseEvent attribute?

In my jsfiddle project, there is a white square that can be moved around by the mouse. When the mouse button is released, it displays the x and y coordinates of the square. To see the project in action, visit: http://jsfiddle.net/35z4J/115/ One part of t ...

javascriptangularjsdommouseevent

Reconstruct the altered block with the help of external scripts

I am in a situation where I must utilize a framework that modifies the DOM structure of my HTML. An example snippet of the HTML code being used is as follows: <div id="testID" ng-show="example === 'show'">Some Content</div> The fram ...

javascriptjqueryangularjsdom

XML is struggling to load content when using ajax requests

I am attempting to utilize ajax to load an xml file. I have made adjustments to the sample code provided by W3Schools <html> <head> <script> function showBus(str) { if (str == "") { ...

javascriptphpajaxxml

The search function in Typeahead is not activating the API request while typing

Having some trouble implementing a typeahead search feature in my nodejs application with mysql. I can't seem to figure out what's wrong with my code. When I manually access http://localhost:5000/search?key=s, I'm able to see the results an ...

javascriptnode.jsajaxtypeahead.jstypeahead

Is there a simple method to refresh a JSP or Spring MVC page using AJAX?

I'm tackling a seemingly basic question in Java web development here, but I could use some guidance. How can I refresh data on a JSP page? I understand the fundamentals (utilize jQuery for AJAX, Spring MVC for the "Controller" & handle data reque ...

javajavascriptajaxjspspring-mvc

Using websockets in a React client application

Attempting to establish a connection with a backend layer running on localhost, here is the provided source code: const { createServer } = require("http"); const cors = require("cors"); const photos = require("./photos"); const app = require("express")( ...

javascriptnode.jsreactjsexpresswebsocket

Tips for Uploading Large Images to Backend API in Next.js

As I work on building my portfolio using NextJS, I encountered an issue with the Project Functionality. When converting images to base64 and sending them to an API for uploading on Cloudinary, everything runs smoothly as long as the total size of the req ...

javascriptnode.jsreactjsnext.jscloudinary

What is the best method for accessing the HTML element specified in React JSX?

Consider this custom component example: import React, { Component } from 'react'; class Canvas extends Component { componentDidMount() { let canvas = this.refs.canvas; const ctx = canvas.getContext('2d'); ctx.fillRect(0, ...

javascriptreactjsjsx

Sketch a line extending from one element to the next

Is there a way to create a styled line that starts from the center of one <td> element and ends at the center of another? I attempted to use the jQuery Connections plugin but it only connects the edges of the elements, not their centers. The plugin ...

javascriptjqueryhtmldomshapes