Using AngularJS routing for a website located in a subfolder, causing the URL to display #!/ before each page

Struggling with setting up AngularJS routing for a website within a subdirectory of another site. Each time I click on a link, the URL displays unwanted characters #!/ before the page name, causing unexpected redirections. Here's a snippet of the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
...

And here is the script.js file:

var app = angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap"]);

app.config(function ($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "main.html"
    })
    ...
});

Despite setting the base URL in the head section, the issue persists. This is my first attempt at configuring Angular routing for a subdirectory - am I overlooking something? How can I eliminate these unwanted characters and navigate to pages smoothly without URL interference?

Your assistance would be greatly appreciated.

Answer №1

Set up the $locationProvider in your configuration and ensure that html5Mode is set to true.

Check out the following code snippet-

app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
    templateUrl: "main.html"
})
.when("/About", {
    templateUrl: "about.html"
})
.when("/Contact", {
    templateUrl: "contact.html"
});

$locationProvider.html5Mode(true);

});

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

I seem to be facing an issue in my Reactjs script, but the exact cause of the problem eludes me

I'm currently coding in React and I have an icon that I want to add a hover effect to, similar to CSS. However, I need to achieve this within my React application. Below is the code snippet I've been working on: import React from 'react&apo ...

The horizontal axis displays the hours from 12:00 to 12:55 instead of specific calendar dates

This script creates a highchart that includes 2 Y axes and 1 X axis: $('#main_chart').highcharts({ chart: { zoomType: 'xy' }, title: { text: 'Overview' }, xAxis: [{ ...

Using an AngularJS filter to modify the contents of a table

<tbody> <tr ng-repeat="y in Summary"> <td>{{y.ID}}</td> <td>{{y.submitTime}}</td> <td>{{y.timeTaken}}</td> <td>{{y.descript ...

An error of type `TypeError`: attempting to call `[0,1]` as a function arises while using an IIFE

Check out the following code: var numberArray = [0, 1] (function() { numberArray.push(2) function nestedFunction() { numberArray.push(3) function anotherNestedFunction() { numberArray.push(4) } console.log(num ...

Concealing a menu once the mouse moves away from both the menu header and the menu content

When hovering over a parent element with a dropdown menu, the menu body appears. The goal is to hide the menu body only when the mouse leaves either the menu head or the menu body itself. So far, the issue is that the body disappears when the mouse leaves ...

Developing a modal with various hyperlinks

I'm currently working on a website that features multiple news articles, each linking to a separate page. Is it possible to use modal windows to have the articles pop up on the same page instead of opening in a new window? If so, I would greatly appre ...

Having trouble finding a web element using protractor within the jasmine framework

I attempted to find a specific element on the page using various methods, but was unsuccessful. element(by.css('.organizer-text.ng-binding')).click(); element(by.className('organizer-text')).click(); element(by.linkText('All Cases ...

Tips for utilizing props in a Vue component

When trying to incorporate a prop into a computed value, I encounter the following error: [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined" found in ---> at src/cmps/space-details/space-imgs.vue at src/pa ...

Is there a way to efficiently transform an 'Array of Objects' with values 'Array of Object' into an array of Objects with individual array values using JS/lodash?

I utilized the lodash library to divide arrays into chunks (batches). let values = { 'key1' : [lotsOfValues1], 'key2' : [lotsOfValues2] }; let keys = ['key1', 'key2']; let arrObj = []; keys.forEach((key) => ...

Do not delay, MongoJS function is ready to go!

I have a function set up in my Express JS endpoint that uses 'await' to retrieve data from a Mongo DB using Mongo JS. Function:- async function getIntroducer(company){ const intro = await dbIntro.collection('introducers').findOne({c ...

Unable to navigate through information received from API

I need assistance in mapping the API data. Can you provide guidance? https://i.sstatic.net/wlYH6.png https://i.sstatic.net/TW7hv.png https://i.sstatic.net/3aZGz.png ...

Having trouble with JavaScript's variable scoping?

Currently, I am using Node.js and mongoose, but I have encountered a challenging issue: var dbvar; doc_model .findOne({aadhar}) .then(()=>{ dbvar=1; }); paramedic_model .findOne({aadhar}) .then(()=>{ dbvar=2; }); console.log(dbva ...

Extensive data entry command

I need to add around 12500 lines to my database for a game server map. This script helps me generate the query: sql = "INSERT INTO `legends`.`map` (`x`, `y`, `land`, `collision`, `impedance`, `effect`) VALUES " for (y=0;y<ig.game.collisionMap.data.leng ...

Using ng-click to trigger a controller execution

.controller('uniqueRandomImageController', function($scope, $http, Image) { $scope.loading = true; Image.random() .success(function(data) { $scope.image = data[0]; $scope.loading = false; console.log(data); ...

What is the best way to adjust the size of an image as I navigate down a webpage?

I've been working on designing a navigation bar for a website, but I'm running into some issues. My goal is to have the logo shrink as the user scrolls down the site. I've experimented with webkit animations and various javascript/jQuery fun ...

Disable HoverZoom feature for images on the website

Currently building a website that includes various images. I have Imagus (similar to HoverZoom) installed for automatic image enlargement on hover, but I do not want this function for my specific images. I've noticed it works for some images and not ...

Present intricate JSON data using only one ng-repeat in AngularJS

I am currently attempting to showcase all the books within a specific series. Initially, I utilized nested ng-repeat and achieved the desired outcome. However, with recent modifications to the layout requirements, I am no longer able to use nested ng-repea ...

Decompressing an array within a function invocation

Is there a method to pass an array's elements as arguments to a function? For instance, in Python I can accomplish this using: user = ["John", "Doe"] def full_name(first_name, last_name): return first_name + last_name Therefore, full_name(*user ...

Utilize MongoDB and Mongoose to efficiently delete data using the findByIdAndRemove() method and redirect users accordingly

Currently, I am facing an issue with the DELETE method as the res.redirect doesn't seem to be working. The code in question involves trying to remove a record from MongoDB using findByIdAndRemove(): app.delete("/car", (req, res) => { Car.fi ...

Merge effects into a single NgRx store

I am trying to merge similar effects into one, but I'm not sure how to do it. Below are the effects I have (I need to pass different id depending on the action type): setTopics$ = createEffect( () => this.actions$.pipe( ofType(setTopics), ...