web-dev-qa-db-fra.com

Désactiver la manipulation d'URL dans AngularJS

J'essaie d'écrire ma première application Web avec Angular.

En mode normal (html5Mode off), Angular oblige la partie de hachage de l'adresse à ressembler à un "chemin" (en ajoutant un "/" initial) et code les caractères spéciaux, par exemple, elle autorise un seul "?" et "#" dans le hachage et remplace les autres par% 3F et% 23.

Est-il possible de désactiver cette fonctionnalité? Je ne souhaite pas utiliser le $ locationProvider / $ routeProvider features - Je souhaite analyser le hachage moi-même (dans mon cas, l'utilisateur entre du "texte libre" dans le hachage pour effectuer une recherche à l'intérieur Mon site internet).

J'ai lu que routeProvider ne peut pas être configuré pour utiliser des expressions régulières ...

Si htmlMode est activé, alors la partie de hachage de l'adresse n'est pas obligée de ressembler à un chemin (aucun "/" en tête), mais elle code toujours des caractères spéciaux.

Je suis conscient que certains navigateurs peuvent quand même encoder/échapper les caractères spéciaux, mais si l'utilisateur parvient à entrer des caractères spéciaux dans sa barre d'adresse, je ne souhaite pas le modifier.

Merci

javascriptangularjsaddress-barlocation-providerroute-provider
44
Oren

Pas sûr des effets secondaires, mais le travail est fait. Notez qu'il désactivera toutes les manipulations d'emplacement de l'application angulaire, même si cela est prévu.

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

Variante ES6:

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

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

Testé sur Chrome 30, IE9, IE10.
Inspiré par https://stackoverflow.com/a/16678065/369724

63
greg.kindel

J'utilise une copie locale de angular.js. Rechercher 

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

et 

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

commentez les lignes correspondantes et angularjs arrêtera de surveiller les changements d'URL d'emplacement. 

5
Yang Zhang

Si je me souviens bien, le routage d'Angular n'est pas obligatoire, mais vous devez alors vous charger de recharger les contrôleurs, les vues, etc.

1
Adam

Merci @ greg.kindel pour sa réponse, vous m'aidez à trouver une solution pour résoudre le problème d'ancrage . Ce code laisse l'application AngularJS IGNORER un motif de hachage, continue à fonctionner comme le navigateur par défaut. Je n'ai pas besoin d'activer html5Mode, et ngRoute fonctionne toujours. :)

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;
    }]);
}]);

Testé sous Chrome 69, Firefox 62

AngularJS 1.7.4

0
Dragon