I noticed that my Angular routes are prefixed with a '#%2F' before the specified URL in my app.js file

My Angular routes are set up in the app.js file like this:

.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/characters', {
        templateUrl: 'views/characters.html',
        controller: 'AboutCtrl',
        controllerAs: 'characters'
      })
      .when('/framedata', {
          templateUrl: 'views/framedata.html',
          controller: 'FrameDataCtrl',
          controllerAs: 'frame'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

The URLs work fine when manually entered as localhost:9000/framedata or /characters. However, using the navigation bar with defined links adds a '#%2F' like so: http://localhost:9000/#!/#%2Fcharacters

<ul class="nav navbar-nav">
          <li class="active"><a href="#/">tekkenMitzu?</a></li>
          <li><a ng-href="#/characters">Characters</a></li>
          <li><a ng-href="#/framedata">Frame Data</a></li>
        </ul>

I believe this information should be sufficient, but let me know if you need more details. If necessary, I can provide access to a live version on a domain for further inspection.

Answer №1

Give this code snippet a try

.config(function ($routeProvider,$locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/characters', {
        templateUrl: 'views/characters.html',
        controller: 'AboutCtrl',
        controllerAs: 'characters'
      })
      .when('/framedata', {
          templateUrl: 'views/framedata.html',
          controller: 'FrameDataCtrl',
          controllerAs: 'frame'
      })
      .otherwise({
        redirectTo: '/'
      });
        // utilize the HTML5 History API
        $locationProvider.html5Mode(true);// this will eliminate the #
  });

If your URL contains white spaces, removing them will clear the %2F.

For more information, check it out here

AngularJS converting my ng-href url "slash" into "%2f"

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

Show the time in hours and minutes (00:00) while rounding off seconds to the nearest minute

I need the time to always display with leading zeros when less than 10. For example, if a task took 3 hours, 7 minutes, and 33 seconds, it should be shown as 03:08. Currently, I have the buttons disabled after they are clicked to prevent restarting the ti ...

Javascript Error: Object Expected

Recently, I have encountered an error in my code that says "object expected" in JavaScript. Surprisingly, the code was working perfectly fine before this issue arose. Strangely, the code is still functioning properly in another solution. Even after making ...

Arrange two arrays by organizing them based on the contents of one in JavaScript

Consider the following two arrays: priceArray= [1, 5, 3, 7] userIdArray=[11, 52, 41, 5] The goal is to sort the priceArray in such a way that the userIdArray also gets sorted accordingly. The desired output should look like this: priceArray= [1, 3, 5, ...

"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

After following a tutorial on YouTube, going over the code multiple times, and still experiencing issues with the calculator. Sometimes it works fine, other times certain buttons like (+, -, x, ⁄) don't function properly. I've provided the enti ...

Is there a way to receive notifications on an Android device when the real-time data updates through Firebase Cloud Messaging (FC

I am attempting to implement push notifications in an Android device using Firebase Realtime Database. For example, if an installed app is killed or running in the background, and a user posts a message in a group (resulting in a new child being added in t ...

Creating a new array set by utilizing the map method

How can I filter and return a new array using the map function based on 2 conditions: The array must not be empty The role should be "moderator" This is an example of my initial response: https://i.sstatic.net/UeVn3.png Below is a React function that ...

What is the best way to align my header buttons in the center and move items to the far right of my toolbar?

My header currently displays as follows: https://i.sstatic.net/h8zDQ.png I am aiming to center the [LEARN MORE, ABOUT, RESOURCES, CONTACT] buttons in the middle of the navbar and align the profile icon and switch button to the far right of the page! I en ...

Tips for obtaining a binary file sent through an HTTP:POST request using angular.js

I'm currently working on a project that involves using an Angular.js based viewer with a custom server. My goal is to implement an "execute & download" button. To send the request for execution, I am using an HTTP:POST method with specific headers: ...

Issue with MomentJS inBetween function consistently displaying incorrect results

I'm currently working on Vue Datatable and I have a specific requirement to search for records between two dates. I am using the moment.js library and the inBetween function to achieve this. Strangely, when I hardcode the dates, the function returns t ...

Issues rendering ThreeJS geometry data imported from Json file

Having been a dedicated user of this website for some time now, I must admit that this is the first instance where I find myself in need of posting a question. The issue at hand revolves around a Json file from which I extract data and manipulate it with m ...

Is there anyone available to assist me with this contact validation form?

I'm struggling to make this contact form highlight red and display 'not valid' inside the boxes. Despite my efforts, I just can't seem to get it to work! I'm unable to change the existing HTML tags, but I can add to the HTML. I wan ...

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

Combining and forming a distinctive case-sensitive array in JavaScript

Explaining a complex scenario, I have one object or array and one array. My goal is to compare selectedmodel values with mappedmodels. If the value (case insensitive) matches any key in the object, I need to fetch all associated values and push them into t ...

The data type 'StaticImageData' cannot be converted to type 'string'

I've hit a roadblock with interfaces while working on my NextJS and TypeScript project. I thought I had everything figured out, but I'm encountering an issue with the src prop in my Header component. The error messages I keep receiving are: Typ ...

How can I iterate through multiple rows in JavaScript?

Feeling stuck, the simple yet dreaded for loop has become my nemesis and I could really use some guidance. Currently, I have a Google sheet with 3 rows (excluding headers) and 8 columns. As users input data via a web app, the number of rows will dynamicall ...

I am currently working on creating a system for displaying rating stars for products. The rating value, which ranges from 0 to 5, has already been provided

class PostBodyRatingStars extends React.Component { render() { const { classes } = this.props var rating = this.props.rating function createMappingArray(rating) { var arr = [] for (i = 0; i < 5; i++) { if (rating >= ...

What is the reason that this jQuery code is exclusive to Firefox?

I am currently working on a code snippet that enables users to navigate back and forth between images by displaying them in a lightbox at full size. The code functions flawlessly in Firefox, however, it does not seem to have any effect on IE, Chrome, and S ...

Sending colored output from stdout to grunt's output stream

Having trouble creating a custom grunt task that runs mocha tests and displays colored output? I'm running into an issue where grunt is stripping out the colors from the mocha command's output. Here's the code for the grunt task: var exec = ...

JQuery: Adding new table cells and iterating through them functions correctly in Firefox and Chrome, but encounters issues in Internet Explorer

I am facing a challenge in the following scenario: My objective is to add at least 2 input fields to a table. Then, I need the ability to loop through the newly generated cells to retrieve values from the new fields. The code snippet is as follows: Call ...

Creating a JSON object using various inputs through AngularJS

Just starting out with Ionic, Angular, and Firebase. This might be a silly question :) I'm working on an app using Ionic + Firebase, and I want to create a JSON object from multiple inputs. The interface looks like the image below: https://i.stack.i ...