Angular JS allows you to easily remove the # symbol from a URL, improving the

I am encountering a problem with the "#" symbol in my angular js website's URL. I need to remove the # from the URL but the method provided isn't working and the site is not displaying properly. Can someone advise me on how to successfully remove the # symbol from the URL?

Below is the code snippet from route.js:-

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: 'Templates/home.html',
    })
    .when("/first", {
        templateUrl: 'Templates/first.html',
    })
    .when("/second", {
        templateUrl: 'Templates/second.html',
    })
    .when("/third", {
        templateUrl: 'Templates/third.html',
    })
    .when("/admin", {
        templateUrl: 'Templates/admin.html',
    })
    .otherwise({
        redirectTo: '/'
    });

Answer №1

If you want to enable HTML5 mode in your AngularJS application, you can utilize the $locationProvider

 var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider, $locationProvider) {
        $routeProvider
        .when("/", {
            templateUrl: 'Templates/home.html',
        })
        .when("/about", {
            templateUrl: 'Templates/about.html',
        })
        .when("/contact", {
            templateUrl: 'Templates/contact.html',
        })
        .otherwise({
            redirectTo: '/'
        });
             $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        });

Answer №3

Here's a suggestion for your app.js file:


var app = angular.module("myApp", ["ngRoute"]);
app.config('$routerProvider', '$locationProvider',function($routeProvider,$locationProvider) {

    $locationProvider.html5Mode(true).hashPrefix('*');

    $routeProvider
    .when("/", {
        templateUrl: 'Templates/home.html',
    })
    .when("/about", {
        templateUrl: 'Templates/about.html',
    })
    .when("/services", {
        templateUrl: 'Templates/services.html',
    })
    .when("/contact", {
        templateUrl: 'Templates/contact.html',
    })
    .when("/admin", {
        templateUrl: 'Templates/admin.html',
    })
    .otherwise({
        redirectTo: '/'
    });

Also, remember to include this base tag in the head section of your index.html file:

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

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

javascript implementing optional chaining for a single parameter

Is it possible to implement optional chaining on a single parameter? setAllProperties( Object.values(users).flatMap(({ properties }) => Object.values(properties) ) ); I am looking for a way to ensure that the properties folder exists in ...

A guide on sending arguments to a react function component from a JSX component via onClick event handling

Below is a brief excerpt from my extensive code: import React from "react"; const Home = () => { return ( imgFilter.map((imgs) => { return ( < Col sm = "3" xs = "12" key ...

Article: Offering CoffeeScript and JavaScript Assets Simultaneously

Currently, my web app is up and running using Node and Express. I initially developed it in JavaScript but now want to transition over to CoffeeScript. My goal is to have both file1.js and file2.coffee coexisting in the application (with both being served ...

Do commas at the end of JSON objects pose a risk of breaking

After diving into the proposed JavaScript features, one that caught my attention is the idea of supporting trailing commas in object literals and arrays. When it comes to parameters, trailing commas are not relevant, so let's put that aside for now. ...

Caution: Make sure to assign an object to a variable before exporting it as the default module

While working with react-redux, my root Reducer appears like this: import Customers from "./customers/reducer"; export default { Customers }; Recently, I encountered a warning saying: Assign object to a variable before exporting as module def ...

javascript - Utilizing the latest ES6 syntax

During my exploration of the source code for an open source project (react data grid), I came across a syntax that left me puzzled: class EditorBase extends React.Component { getStyle(): {width: string} { return { width: '100%' ...

Update the ng-view within ng-view with new content

Greetings, I am currently in the process of developing a single page application using Angular. Below is an excerpt from my index.html file: <!DOCTYPE html> <html lang="en" ng-app="onlineApp"> <head> <meta charset="UTF-8"> ...

Is it possible to retrieve the IMEI number of a mobile phone using expo?

Currently working on developing a mobile app with React Native using Expo. I need to figure out a way to access the client's mobile IMEI number and display it in the front end of the app. Unsure of how to accomplish this task. Is there a method to do ...

Leveraging $provide for service mocking

Why is $provide.value() used instead of $provide.service() in order to mock a service, as explained by this answer on Stack Overflow? ...

Before the file upload process is finished, the progress of tracking Angular files reaches 100%

I am currently developing a service that is responsible for uploading a list of files to a backend server. createFiles(formData: any, userToken: string): Observable<any> { const headers = new HttpHeaders({'Authorization': 'Bearer ...

Replacing one <div> with another <div> using a clickable link within the divs

In one of my web pages, there is a div that I'll refer to as div1. Within this div, there is a link called 'Link1'. My goal is to click on Link1, triggering the replacement of div1 with div2. Inside div2 there will be another link, let&apos ...

Increase the date by one day excluding weekends (Saturday and Sunday)

My current code is designed to add +1 day to the current date. var date = '30 Apr 2010'; var actual_date = new Date(date); var final_date = new Date(actual_date.getFullYear(), actual_date.getMonth(), actual_date.getDate()+1); Now, I am looking ...

Is there a way to create a function that can show the pathway on the Browser Console?

I am looking to create a function that will show the path in the Browser Console when a link in the menu of a sub-category is clicked. The menu setup resembles this () on an e-commerce website. For instance: Perfume => ForMen => Cologne How can I r ...

Asynchronously running a function in AngularJS

My controller passes execution to a factory -- controller.getCustomerById -> factory.getCustomerByID. The factory function is posting and retrieving data via MVC/angular.$http.post, which works fine, but the subsequent actions in my controller function ...

AngularJS drag and drop feature that allows for nesting of drop elements is available

Currently, I am utilizing the angularJS plugin found at http://ganarajpr.github.io/angular-dragdrop/ and am aiming to accomplish a similar functionality as demonstrated in this example: http://jsfiddle.net/J7azG/40/ (resembling the "greedy" feature in j ...

Webpack encounters an error while attempting to load Bootstrap v4.0.0-beta

I've encountered an issue with my webpack configuration and Bootstrap v4.0.0-alpha.6 that was working fine until I attempted to switch to v4 beta. Unfortunately, I can't seem to get it working properly now :( Here is a snippet of my config: w ...

One way to dynamically track if any radio buttons in a group have been selected is by utilizing JQuery

Even though there are many related resources for this question, I still need a flawless solution. I have dynamically generated five groups of radio buttons. Each group contains up to five radio buttons. I have separately validated "none checked in" and "a ...

Tips for dynamically creating column headings and table values using JSON arrays in AngularJS

On a web page, there are two radio buttons that produce different results: The first button shows Student Details and the corresponding JSON array is as follows : [{"Name":"A", "Class":"x", "Section":"abcd", "DOB": "XYZ"}, {"Name":"B", "Class":"x", "S ...

Error in Bootstrap table implementation leading to truncation of tbody height due to data-detail-view property

I'm currently working on integrating Bootstrap-Table's detailView feature into my project. However, when I enable data-detail-view="true" for my table, the height of the table element shrinks to 0. Strangely, clicking on any column with ...

Navigating views with ReactJS using ES5

I have been searching for ReactJs guides, but most of them are based in ES5. As a result, I have begun using ReactJS in this manner. Now that I understand how to create all my components, I am ready to build a small single-page-application. However, I am s ...