Deaktivieren Sie die URL-Manipulation in AngularJS

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

Im normalen Modus (html5Mode aus) erzwingt Angular, dass der Hash-Teil der Adresse wie ein “Pfad” aussieht (ein führendes “https://stackoverflow.com/” hinzugefügt) und Sonderzeichen kodiert – zum Beispiel erlaubt es ein einzelnes “?” und “#” im Hash und ersetzt die anderen durch %3F und %23.

Gibt es eine Möglichkeit diese Funktion auszuschalten? Ich möchte das nicht benutzen $locationProvider / $routeProvider Funktionen – Ich möchte den Hash selbst analysieren (In meinem Fall wird der Benutzer einen “Freitext” in den Hash eingeben, um auf meiner Website zu suchen).

Ich habe gelesen, dass der routeProvider nicht für die Verwendung von regulären Ausdrücken konfiguriert werden kann …

Wenn htmlMode aktiviert ist, muss der Hash-Teil der Adresse nicht wie ein Pfad aussehen (kein führendes “https://stackoverflow.com/”), sondern codiert dennoch Sonderzeichen.

Mir ist bewusst, dass einige Browser die Sonderzeichen sowieso verschlüsseln/escapen, aber wenn der Benutzer einige Sonderzeichen in seine Adressleiste eingegeben hat, möchte ich dies nicht ändern.

Danke

Ich bin mir der Nebenwirkungen nicht sicher, aber es erledigt die Arbeit. Beachten Sie, dass alle Standortmanipulationen durch die Winkel-App deaktiviert werden, selbst wenn sie beabsichtigt sind.

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

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 Überwachung auf Standort-URL-Änderungen.

Vielen Dank für die Antwort von @greg.kindel, Sie helfen mir, eine Lösung für das Ankerproblem zu finden. Mit diesem Code kann die AngularJS-App einige Hash-Muster IGNORIEREN, damit sie wie die Browser-Standardeinstellung funktioniert. Ich muss html5Mode nicht aktivieren 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 (...args) {
            if (ignoredPattern.test($window.location.hash)) return;
            originalOnUrlChange.apply($delegate, args);
        };
        let originalUrl = $delegate.url;
        $delegate.url = function (...args) {
            if (ignoredPattern.test($window.location.hash)) return $window.location.href;
            return originalUrl.apply($delegate, args);
        };
        return $delegate;
    }]);
}]);

Getestet in Chrome 69, Firefox 62

AngularJS 1.7.4

Der Workaround von @greg.kindel (die akzeptierte Lösung) hat bei mir nicht funktioniert. Es warf viele Fehler über eine Endlosschleife. Ich verwende Angular 1.5.8.

Ich konnte diese Problemumgehung wie folgt anpassen, damit die Dinge funktionieren. Ich hoffe, es erspart anderen den Kummer.

angular.module('sample', [])
  .config(['$provide', function ($provide) {
    $provide.decorator('$browser', ['$delegate', '$window', function ($delegate, $window) {
      $delegate.onUrlChange = function () {};
      //
      // HACK to stop Angular routing from manipulating the URL
      //
      // The url() function seems to get used in two different modes.
      //
      // Mode 1 - Zero arguments
      // There are no arguments given, in which case it appears that the caller is expected the
      // browser's current URL (a string response).
      //
      // Mode 2 - Three arguments
      // It receives three arguments (url, some_boolean, null).  It seems the caller is expecting
      // the browser's URL to be updated to the given value.  The result of this function call is
      // expected to be the $delegate itself, which will subsequently get called with no arguments
      // to check the browser's URL.
      //
      // The Hack:
      // We save the URL so that we can lie to the caller that the URL has been updated to what was
      // requested, but in reality, we'll do nothing to alter the URL.
      //
      var savedUrl = null
      $delegate.url = function (url, ...args) {
        if (!!url) {
          savedUrl = url;
          return $delegate;
        } else {
          return !!savedUrl ? savedUrl : $window.location.href;
        }
      };
      return $delegate;
    }]);
  }])

Wenn ich mich richtig erinnere, ist das Routing von Angular nicht obligatorisch, aber dann muss man sich um das Nachladen von Controllern, Views usw.