Angular JS UI-Route Navigation

Question

I'm trying to make a simple routing using UI-Route in Angular,but when I'm typing url in browser with # like this http://localhost:8080/#/stateone it adds some weird symbols to it like this http://localhost:8080/#!#%2Fstateone. Can anybody explain me what`s wrong with that?

Here`s my code in app.js file :

angular
    .module('myApp', ["ngMaterial", "ui.router"])
    .config(function($mdThemingProvider, $stateProvider) {
    $mdThemingProvider.theme('default')
    .primaryPalette('teal')
    .accentPalette('orange');

    $stateProvider
        .state('stateone' , {
        url: '/stateone',
        template: '<h1>State One</h1>'
    })

    .state('statetwo', {
        url: '/statetwo',
        template: '<h1>State Two</h1>'
    });
});

Template`s file code:

<ui-view></ui-view>

your hash-bang is `#!`, so by introducing `#/stateone` it makes it `#!#/stateone` which is URL-encoded into `#!#%2Fstateone` — Aleksey Solovey, Dec 08 '17 at 10:10

score 0 · Answer 1 · answered Dec 08 '17 at 10:33

You can encode your urls in AngularJS and avoid the hash-bang from your overall app by enabling html5mode mode by adding this simple line in your config block of app.js

$locationProvider.html5Mode(true);

Reference link: AngularJS: how to enable $locationProvider.html5Mode with deeplinking

score 0 · Answer 2 · answered Dec 10 '17 at 08:43

This problem could appear with the migration from version 1.5 to 1.6...

One of the most notable changes are:

Changing the default $location hash-prefix to '!', as the previous empty string default was unconventional and confusing.

the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c.

If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to you application:

appModule.config(['$locationProvider', function($locationProvider) {
 $locationProvider.hashPrefix('');
}]);

Details

Angular JS UI-Route Navigation

2 Answers2