Turn off URL manipulation in AngularJS

Question

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 1

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

Answer 2

I use a local copy of angular.js. Search for

$browser.onUrlChange(function(newUrl, newState) {

and

$rootScope.$watch(function $locationWatch() {

comment out the corresponding lines and angularjs will stop watch for location url changes.

Answer 3

If I recall correctly, Angular's routing is not obligatory, but then you must take care of reloading controllers, views, etc.

Answer 4

Thank @greg.kindel 's answer, you help me find a solution to solve anchor problem. This code let AngularJS app IGNORE some hash pattern, keep it working like browser default. I don't need enable html5Mode, and ngRoute still working. :)

app.config(['$provide', function ($provide) {
    $provide.decorator('$browser', ['$delegate', '$window', function ($delegate, $window) {
        // normal anchors
        let ignoredPattern = /^#[a-zA-Z0-9].*/;
        let originalOnUrlChange = $delegate.onUrlChange;
        $delegate.onUrlChange = function (newUrl, newState) {
            if (ignoredPattern.test($window.location.hash)) return;
            originalOnUrlChange.apply($delegate, arguments);
        };
        let originalUrl = $delegate.url;
        $delegate.url = function (url, replace, state) {
            if (ignoredPattern.test($window.location.hash)) return $window.location.href;
            return originalUrl.apply($delegate, arguments);
        };
        return $delegate;
    }]);
}]);

Tested in Chrome 69, Firefox 62

AngularJS 1.7.4