Initializing Angular UI Router

I'm facing an issue with Angular UI router in my application. Instead of getting the expected localhost:8000/#/, I am receiving localhost:8000/#!#%2F.

This is how my app.js looks like:

angular
    .module('quiz',['ngMaterial',
                    'ngMessages',
                    'ngCookies',
                    'ngResource',
                    'quiz.routes'
                    ]).config(function($resourceProvider) {
                                    $resourceProvider.defaults.stripTrailingSlashes = false;
                                    }); 

angular
    .module('quiz.routes',['ui.router']);

In my quiz.routes.js file, I have the following configuration:

(function () {
    angular
    .module('quiz.routes')
    .config(config);

    function config($urlRouterProvider,$stateProvider){
        $stateProvider
            .state('register',{
                url: '',
                templateUrl: '/static/templates/register.html'
            });
    }

})();

The URL generated has !#%2F instead of a trailing slash. Any idea why this might be happening?

Answer №1

If you're working with Angular version 1.6, the reason for this issue may be due to the alterations made to the default hashPrefix, which is now designated as !. To resolve this, ensure that you inject $locationProvider into your module's config block and reset the default hashPrefix to an empty string.

$locationProvider.hashPrefix('')

Initially reported as a bug in this GitHub thread, it was later revealed that the change was intentional and part of the design decision.

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

How can I receive a callback for loop playing in Cordova media?

In my Angular JS service, I am utilizing the cordova media plugin to access media files. MediaSrv.loadMedia(filePath, mediaSuccess, null, status).then(function(media, status, test, status1){ media.play({ numberOfLoops: 999 }); ...

What are some effective strategies for structuring code with AngularJS?

I'm currently working on an app that utilizes ui router to append all HTML data to the following tag: <div class="app" ui-view > However, I want to add a header and footer to my app. My question is, should I include them in the index.html lik ...

Guide on how to retrieve a response from an API Route and integrate it into the client side of the app router within Next.js

Transitioning from Next.js 12 to 13 has been quite perplexing, especially when it comes to handling JSON data. Every time I attempt a fetch request, I find myself needing to refer back to documentation due to the confusion surrounding JSON. Is there anyone ...

Updating the Scale of the Cursor Circle on my Portfolio Site

I attempted to find tutorials on creating a unique circle cursor that can hide the regular mouse cursor as well. After implementing it with a difference blend mode, I encountered an issue where I wanted the scale to change when hovering over a link. The ...

A nested DragSource component within a parent DragSource component in React DnD

In my project, I am working with a tree structure that consists of a root "Tree" component containing a list of root "TreeNodes". Each TreeNode can have an arbitrary number of children. Within the render method of the TreeNode component, I iterate over th ...

Get the element in a javascript array that has the smallest value

I have a collection of cities each with a "distance" value ajax = new Location('123 main street', 'city, ON', 'L9Z 0K5', '905-555-5555', '905-555-555', 43.864362, -79.011627, 6); alliston = new Location(&a ...

Exploring the Potential of Using ngIf-else Expressions in Angular 2

Here is a code snippet that I wrote: <tr *ngFor="let sample of data; let i = index" [attr.data-index]="i"> <ng-container *ngIf="sample.configuration_type == 1; then thenBlock; else elseBlock"></ng-container> <ng-template #t ...

Instructions for deploying a node application with modules

While working on deploying a node app with node modules to an embedded system, I have been facing challenges with the size of node modules. Whenever I run npm install, it not only downloads the necessary sources but also includes additional files. For exa ...

The JMeter JSR223 Sampler and WebDriver Sampler do not support the Javascript language

I am currently working on integrating Selenium Webdriver Sampler with JMeter. Although I have been following tutorials, I have encountered an issue where the script language dropdown in the sampler screen does not include an option for JavaScript, prevent ...

The Drop Down Menu feature in Bootstrap is malfunctioning within the context of a NextJS project

I've built a NEXT.JS application using VS Code. The issue I'm facing is with the drop down menu in the navigation bar - it's not sliding down to display the menu when clicked. Here is the code I'm working with: const loggedRouter = () ...

Decomposing a Vue.js API response into multiple variables

Utilizing vue to send http requests and store data in variables can be done like so: the api response will have the following structure: data: data: [id:1... etc] function: fetchOffers() { this.$http.get('http://127.0.0.1:8000/api/of ...

Assign a Value to a Hidden Input Type When a User Submits a Form

I have a straightforward form set up in the following code. I am looking to add the value entered in the rm_accounts text box to the hidden page_confirm input value at the end of the URL. I hope that explanation is clear. In simple terms, if the user type ...

Looking to extract a specific attribute from the Facebook response

Greetings, I'm facing an issue with retrieving data from the Facebook login response. Despite my efforts, I have been unsuccessful in getting the values to be returned. Below is the code I have written: function loginfb(){ var resp=[]; FB.lo ...

Testing Angular JS Components with Jasmine Framework

A factory service is defined below FamilyService.js (function(){ 'use strict'; angular.module('app') .factory('ABC', FamilyService); FamilyService.$inject = ['DEF']; function FamilyService(DEF) { function r ...

The Ajax call failed to connect with the matching JSON file

<!DOCTYPE html> <html> <body> <p id="demo"></p> <script <script> function launch_program(){ var xml=new XMLHttpRequest(); var url="student.json"; xml.open("GET", url, true); xml.send(); xml.onreadystatechange=fun ...

The initial-scale setting for the iOS viewport is not respected when the on-screen keyboard is

I have encountered a situation where I need to embed a non-responsive page using an iframe. To display the entire iframe, I adjust the viewport width and scale dynamically through JavaScript. When it is time to close the iframe, I revert the viewport width ...

Navigate through different dates with a scrolling carousel

After developing a carousel for users to flick and scroll through dates using the slick library, I've encountered some minor issues as well as a major one. Take a look at the carousel on this link: Username: test Password: test I'll outline t ...

Tips for retrieving information from a highstock chart

Imagine I have a sample highstock chart on my website, similar to the one at this link. Is there a way to extract the data from the chart itself, even if the data used for creating the chart is not accessible to others? <img src="http://www.highchart ...

Steps for building a progressive v-file-input component in Vuetify

I am utilizing a v-file-input to manage certain documents. However, whenever a user attempts to add additional files by selecting them, it ends up wiping out the previous files. Ideally, I would like the v-file-input to be able to accumulate files and only ...

How to extract and display data when clicking on a Bootstrap switch

I have integrated BootStrap Switch like this: <?php while ($arr = mysql_fetch_array($res)) { ?> <td class="center"> <?php if ($arr['status'] == 1) { ?> <input class="switch" type="checkbo ...