Weird URL ending with AngularJS routing

Question

I just noticed that for some reason, I get this:

instead of this: http://localhost/ReportsWeb/#/

exclamation sign is added... why, any ideas, cant figure the reason why its where.

Obviously, if I navigate to http://localhost/ReportsWeb, the URL becomes http://localhost/ReportsWeb/#!/

UPDATE

Thanks guys for the help. These two options work fine:
1)
set $locationProvider.html5Mode(true)
add <base href="/ReportsWeb/">
2)
set $locationProvider.html5Mode(false);
set $locationProvider.hashPrefix('');

Which option is "more correct" way to handle this?

To me the second option looks right, I dont need to make any more changes to make my project work. In first case, I need to set base element, but angular routing wont work, I probably have to change all "/#/Path" to exclude the hash tag. So, I'll take option #2 )

thanks

Possible duplicate of Why does my url contains "!" when using angular? — Pritam Banerjee
– Pritam Banerjee, Commented Feb 8, 2017 at 0:55
@Pritam Banerjee, it is similar, but not duplicate, I need to know the difference between these two options — Slava
– Slava, Commented Feb 8, 2017 at 1:09

Yaser · Accepted Answer · 2017-02-08 00:54:08Z

Hashbang mode is a trick that AngularJS uses to provide deep-linking capabilities to your Angular apps. In hashbang mode (the fallback for html5 mode), URL paths take a prepended # character. They do not rewrite tags and do not require any server-side support. Hashbang mode is the default mode that AngularJS uses if it’s not told otherwise. A hashbang URL looks like:

http://localhost/ReportsWeb/#!/

To be explicit and configure hashbang mode, it needs to be configured in the config function on an app module. We can also configure the hashPrefix, which, in hashbang mode, is the ! prefix. This prefix is part of the fallback mechanism that Angular uses for older browsers. We can also configure this character.

angular.module('myApp', ['ngRoute'])
    .config(['$locationProvider', function($locationProvider) {
           $locationProvider.html5Mode(false);
           $locationProvider.hashPrefix('');
}]);

Roadhouse · Accepted Answer · 2017-02-08 00:50:07Z

2

Try this, should work. You need to set html5Mode to true where you're handling your angular routes, here's some example code of what your app should look like

var myApp = angular.module('myApp', ['ngRoute'])
myApp.config(function ($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {

    })
    .otherwise({redirectTo: '/'})

  $locationProvider.html5Mode(true)
})

answered Feb 8, 2017 at 0:50

Roadhouse

416 bronze badges

3 Comments

Slava Over a year ago

thanks, it works, just needed to add <base href="/ReportsWeb/">

Roadhouse Over a year ago

No problem, html5Mode will remove the remaining # as well if you want that too.

Slava Over a year ago

unfortunately this broke the routing

Collectives™ on Stack Overflow

Weird URL ending with AngularJS routing

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related