Turn off URL manipulation in AngularJS

Oren picture Oren · Sep 4, 2013 · Viewed 14.5k times · Source

I'm trying to write my first web-app with Angular.

In the normal mode (html5Mode off), Angular forces the address's hash part to look like a "path" (adding a leading "/"), and encodes special characters - for example, it allows a single "?" and "#" in the hash and replaces the others with %3F and %23.

Is there a way to turn this feature off? I don't want to use the $locationProvider / $routeProvider features - I want to parse the hash myself (In my case, the user's will enter some "free text" in the hash to search inside my website).

I read that the routeProvider cannot be configured to use regular expressions...

If htmlMode is turned on, then the address's hash part is not forced to look like a path (no leading "/"), but it still encodes special characters.

I'm aware that some browsers might encode/escape the special characters anyway, but if the user managed to enter some special characters in its address bar then I don't want to change it.

Thanks

Answer

grae.kindel picture grae.kindel · Nov 7, 2013

Not sure of the side effects of this, but it gets the job done. Note that it will disable all location manipulation from the angular app, even if intended.

angular.module('sample', [])
    .config( ['$provide', function ($provide){
        $provide.decorator('$browser', ['$delegate', function ($delegate) {
            $delegate.onUrlChange = function () {};
            $delegate.url = function () { return ""};
            return $delegate;
        }]);
    }]);

ES6 variant:

angular.module('sample', [])
    .config(["$provide", $provide => {
        $provide.decorator("$browser", ["$delegate", $delegate => {
            $delegate.onUrlChange = () => { };
            $delegate.url = () => "";

            return $delegate;
        }]);
    }]);

Tested in Chrome 30, IE9, IE10.
Inspired by https://stackoverflow.com/a/16678065/369724