webentwicklung-frage-antwort-db.com.de

Deaktivieren Sie die URL-Bearbeitung in AngularJS

Ich versuche, meine erste Web-App mit Angular zu schreiben.

Im normalen Modus (html5Mode off) zwingt Angular, dass der Hash-Teil der Adresse wie ein "Pfad" aussieht (und ein führendes "/" hinzufügt). Außerdem werden Sonderzeichen codiert. Beispielsweise kann ein einzelnes "?" und "#" im Hash und ersetzt die anderen durch% 3F und% 23.

Gibt es eine Möglichkeit, diese Funktion auszuschalten? Ich möchte nicht die $ locationProvider / - $ routeProvider -Funktionen verwenden - Ich möchte den Hash selbst analysieren (In meinem Fall gibt der Benutzer einen "freien Text" in den Hash ein, um darin zu suchen meine Webseite).

Ich habe gelesen, dass der routeProvider nicht für die Verwendung regulärer Ausdrücke konfiguriert werden kann ...

Wenn htmlMode aktiviert ist, muss der Hash-Teil der Adresse nicht wie ein Pfad aussehen (kein führendes "/"), aber er codiert immer noch Sonderzeichen.

Ich bin mir bewusst, dass einige Browser die Sonderzeichen trotzdem verschlüsseln können, aber wenn der Benutzer einige Sonderzeichen in seine Adressleiste eingeben konnte, möchte ich sie nicht ändern.

Vielen Dank

44
Oren

Ich bin mir nicht sicher, welche Nebenwirkungen dies haben wird, aber die Arbeit wird erledigt. Beachten Sie, dass alle Standortmanipulationen der Winkel-App deaktiviert werden, auch wenn dies beabsichtigt ist.

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

ES6-Variante:

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

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

Getestet in Chrome 30, IE9, IE10.
Inspiriert von https://stackoverflow.com/a/16678065/369724

63
greg.kindel

Ich verwende eine lokale Kopie von angle.js. Suchen nach 

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

und 

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

kommentieren Sie die entsprechenden Zeilen aus, und anglejs stoppt die Änderung der URL-Adresse. 

5
Yang Zhang

Wenn ich mich recht erinnere, ist Angulars Routing nicht obligatorisch, aber Sie müssen sich darum kümmern, Controller, Ansichten usw. neu zu laden.

1
Adam

Vielen Dank an @ greg.kindels Antwort. Sie helfen mir, eine Lösung zu finden, um das Ankerproblem zu lösen. Dieser Code lässt die AngularJS-App einige Hash-Muster IGNORIEREN. Ich brauche html5Mode nicht und ngRoute funktioniert immer noch. :)

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

Getestet in Chrome 69, Firefox 62

AngularJS 1.7.4

0
Dragon