html5mode doesn't remove hashbangs

Question

I have a gulp connect server running and want to remove hashbangs from the routeProvider I am using in my AngularJS project.

I have this in my app.js:

//Setting HTML5 Location Mode
companiesApp.config(['$locationProvider',
    function ($locationProvider) {
        $locationProvider.hashPrefix('!');
        $locationProvider.html5Mode(true);
    }
]);

I know that if I remove the hashPrefix it will work still with http://www.example.com/#example-uri but how do I get rid of that entirely. isn't html5Mode(true) supposed to do that?

Does this help - http://stackoverflow.com/questions/18811003/angularjs-locationprovider-hashprefix — callmekatootie, Jul 05 '15 at 13:23
@callmekatootie sorry - no it doesn't. I'm trying to make hashbang-less URLs, not add characters. I want the result to be `http://www.example.com/example-uri` — itamar, Jul 05 '15 at 13:24
Then just remove the code `$locationProvide.hashPrefix('!')` - only keep `$locationProvider.html5mode(true)` . Doesn't that work? — callmekatootie, Jul 05 '15 at 13:28
@callmekatootie no it doesn't. the # is still required. I am trying to be able to access the url without that. — itamar, Jul 05 '15 at 13:29
HTML5 mode allows the browser to silently treat URI without the hash as if they do have the hash, via the HTML5 history API. the hash URI still exists, and is used by non HTML5 browsers, and by the location provider internally. If you aren't able to call these URI directly, then the answer provided by @MuhammadReda is probably correct, you are not handling these URI correctly on your server. — Claies, Jul 05 '15 at 14:48
also, HTML5Mode in Angular requires you to have a `base href=` set in your HTML. — Claies, Jul 05 '15 at 14:50

score 0 · Answer 1 · answered Jul 05 '15 at 14:28

Yes, $locationProvider.html5Mode(true); should do that.

But to be able to access pages directly from the browser, you should configure your server to redirect the request to the index page, then call the partial internally. Check this document on angular-ui documentation for how to configure the document to do so.

Divyesh Bhalodiya · Answer 2 · 2017-06-23T05:47:22.007

Try this if may be useful in your scenario

Add only has prefix like $locationProvider.hashPrefix('') to remove Bang prefix...

var app = angular.module('app', []);
app.config(['$routeProvider', '$locationProvider', 

    function ($routeProvider, $locationProvider)
    {
        $routeProvider.when('/', {
            templateUrl: "app1.html",
            controller: "App1Ctrl"
        })
        .when('/Program1', {
            templateUrl: "app2.html",
            controller: "App2Ctrl"
        });

        $locationProvider.hashPrefix("");
    }
]);

first add $routeProvider in dependency and then add in last of hashPrefix is null to remove tha bang prefix.

html5mode doesn't remove hashbangs

2 Answers2