1. Was macht es?
Der $ location Service analysiert die URL in der Adressleiste des Browsers (basierend auf der Fenster. Durch das Ändern der URL in der Adressleiste reagiert auf den $ -Port -Service und die Änderung der URL im $ Standort auf die Adressleiste.
$ Standortservice:
Stellen Sie die URL der aktuellen Browseradressleiste frei, damit wir können
1. achten Sie auf URLs und beobachten Sie sie
2. URL ändern
Wenn der Benutzer Folgendes macht, synchronisieren Sie die URL mit dem Browser:
1. Ändern Sie die Adressleiste
2. Klicken Sie auf die Schaltfläche zurück oder vorwärts (oder klicken Sie auf einen historischen Link).
3. Klicken Sie auf einen Link
Eine Methode, die ein URL -Objekt als eine Reihe von Methoden beschreibt (Protokoll, Host, Pfad, Suche, Hash).
1. Vergleichen Sie $ location und window.location
1) Zweck: Sowohl Fenster.location als auch $ location Services ermöglichen das Lesen und Schreiben von Zugriff auf den Standort des aktuellen Browsers.
2) API: Fenster. Die Lokalisierung enthält ein unverarbeiteter Objekt mit einigen Eigenschaften, die direkt geändert werden können. Während $ location Service einige Getter/Setter-Methoden im Jquery-Stil enthält.
3) Integration mit Angular Application Deklaration Cycle: $ Standort weiß über alle internen Deklarationszyklusstadien und integriert sich in $ watch usw.; während window.location nicht funktioniert.
4) Geben Sie nahtlos mit HTML5 -API: Mit einem Fallback für Legacy -Browser gibt es Kompatibilitätsmethoden für niedrigere Versionen von Browsern?); während window.location nicht.
5) Kennen Sie das Root -Verzeichnis oder den Kontext des von der Anwendung geladenen Dokuments: Fenster. und $ location.Path () gibt das echte Trottel zurück.
2. Wann sollte ich $ location verwenden?
In einer Anwendung müssen Sie jederzeit auf Änderungen an der aktuellen URL reagieren oder die URL des aktuellen Browsers ändern.
3. Was macht es nicht?
Wenn sich die Browser -URL ändert, wird die Seite nicht neu geladen. Wenn Sie dies tun müssen (ändern Sie die Adresse und implementieren Sie die Seite Reload), verwenden Sie eine API mit niedrigerer Ebene, $ window.location.href.
2. Allgemeiner Überblick über die API (Gesamtüberblick über die API)
Der $ -Port -Service kann sich je nach Initialisierung unterschiedlich verhalten. Die Standardkonfiguration ist für die meisten Anwendungen geeignet, und andere Konfigurationen werden angepasst, wodurch einige neue Funktionen ermöglicht werden können.
Wenn der $ location Service initialisiert wird, können wir ihn in Getter- und Setter -Methoden im Jquery -Stil verwenden, sodass wir die URL des aktuellen Browsers erhalten oder ändern können.
1. Konfiguration von $ location Service
Um den $ -Position -Service zu konfigurieren, müssen Sie $ locationProvider (http://code.angularjs.org/1.0.2/docs/api/ng.$LocationProvider) erhalten und die folgenden Parameter festlegen:
html5Mode (Modus): {boolean}, true - siehe HTML5 -Modus; Falsch - Siehe Hashbang -Modus, Standard: Falsch. (In den folgenden Kapiteln werden verschiedene Modi erläutert)
Hashprefix (Präfix): {String}, das von Hashbang verwendete Präfix (wenn HTML5Mode falsch ist, verwenden Sie den Hashbang -Modus für Browser, die den HTML5 -Modus nicht unterstützen), Standard: '!
2. Methoden Getter und Setter
Der $ -Port-Service bietet Getter-Methoden für schreibgeschützte URL-Teile (Absurl, Protokoll, Host, Port) und bietet auch Getter- und Setter-Methoden für URL, Pfad, Suche und Hash.
// den aktuellen Pfad $ location.Path () erhalten; // Ändern Sie den Pfad $ location.path ('/newValue')Alle Setter -Methoden geben das gleiche $ -Port -Objekt zurück, um gekettete Syntax zu implementieren. Ändern Sie beispielsweise mehrere Attribute in einem Satz. Die Kettensetter -Methode ist ähnlich:
$ location.Path ('/newValue'). Suche ({Schlüssel: Wert});
Es gibt eine spezielle Ersatzmethode, mit der der $ -Port -Service einen Pfad verwenden soll, anstatt einen neuen Verlauf zu erstellen, wenn Sie das nächste Mal mit dem Browser mit dem Browser synchronisiert werden. Die Ersatzmethode ist nützlich, wenn wir eine Umleitung implementieren möchten, aber die Rückstufe nicht ungültig machen möchten (die Rückstocktaste ist zurück und ruft die Umleitung ab). Wenn Sie die aktuelle URL ändern möchten, ohne eine neue Geschichte zu erstellen, können wir dies tun:
$ location.Path ('/somewpath'). ersetzen ();
Beachten Sie, dass die Setter -Methode das Fenster nicht aktualisiert. Stattdessen kennt der $ standortdienst den Lebenszyklus um den Umfang und fügt mehrere $ -Sort -Änderungen in einen zusammen und übermittelt ihn an das Fenster. Da die Änderungen in mehreren Zuständen des Standorts $ zu einer Änderung zusammengeführt werden, wird im Browser die Ersatz () -Methode nur einmal aufgerufen, so dass das gesamte Commit nur einen Ersatz () hat, wodurch der Browser nicht zusätzliche Geschichte erstellt. Sobald der Browser aktualisiert wurde, wird der $ location -Service das Flag -Bit über die Ersatz () -Methode zurücksetzen, und zukünftige Änderungen werden einen neuen Verlauf erstellen, sofern Ersatz () erneut aufgerufen wird.
Setter- und Charaktercodierung
Wir können Sonderzeichen in den $ -Port -Service übergeben, und der Dienst wird sie automatisch gemäß dem RFC3986 -Standard codieren. Wenn wir auf diese Methoden zugreifen:
3. Hashbang- und HTML5 -Modi
Der $ -Position -Service verfügt über zwei Konfigurationsmodi, mit denen das URL -Format der Adressleiste des Browsers steuern kann: Hashbang -Modus (Standard) und HTML5 -Modus basierend auf der Verwendung der HTML5 -Historie -API. In beiden Modi verwendet die Anwendung dieselbe API. Der $ -Port -Service wird mit der richtigen URL -Snippet- und Browser -API zusammenarbeiten, um uns zu helfen, Browser -URL -Änderungen und Historienmanagement vorzunehmen.
1. Hashbang -Modus (Standardmodus)
In diesem Modus verwendet $ Standort die Hashbang -URL in allen Browsern. Schauen Sie sich das folgende Code -Snippet an, um mehr zu erfahren:
IT ('Sollte Beispiel', Inject (function ($ locationProvider) {$ locationProvider.html5Mode = false; $ locationProvider.hashprefix = '!}, function ($ location) {// öffnen http://host.com/base/index.html#! 'http://host.com/base/index.html#! $ location.search ({a: 'b', c: true}); $ location.absurl () == 'http://host.com/base/index.html#!/new?x=y';Kriecheln Sie Ihre App (ermöglicht Google, unsere App zu indizieren)
Wenn wir möchten, dass unsere AJAX -Anwendung indiziert wird, müssen wir dem Kopf ein spezielles Meta -Tag hinzufügen:
<meta name = "Fragment" content = "! />
Auf diese Weise kann der Crawler -Roboter den aktuellen Link mit dem Parameter _escaped_fragment_ anfordern, unser Server über den Crawler -Roboter informieren und den entsprechenden HTML -Snapshot bereitstellen. Weitere Informationen zu dieser Technologie finden Sie unter https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=en-cn
4. HTML5 -Modus
Im HTML5 -Modus interagieren die Getter und Setter des $ -Position -Dienstes mit der Browser -URL über die HTML5 -Historie -API, sodass die Verwendung von regulären Pfad- und Suchmodulen den Hashbang -Modus ersetzen kann. Wenn einige Browser die HTML5 -Historie -API nicht unterstützen, kehrt der $ standort -Service automatisch mit der Hashbang -URL zum Modus zurück. Damit wir die Bedenken beseitigen können, dass unklar ist, ob der Browser, der unsere Anwendung zeigt, die History -API unterstützt, ist die richtige und beste Wahl.
Das Öffnen einer regulären URL in einem älteren Browser wird in Hashbangurl konvertiert.
Das Öffnen einer Hashbang -URL in einem modernen Browser wird in eine reguläre URL umgeschrieben.
1. Die Kompatibilität mit älteren Browsern vorwärts
Für Browser, die die HTML5 -Historie -API unterstützen, kehrt $ location zurück, um Pfad und Suche zu schreiben. Wenn der Browser die History -API nicht unterstützt, wird der Standort $ um konvertiert, um eine Hashbang -URL bereitzustellen. Dies wird automatisch vom $ location Service konvertiert.
2. HTML -Link -Umschreiben
Wenn wir den API -Modus des Verlaufs verwenden, benötigen wir unterschiedliche Links für verschiedene Browser, aber wir müssen nur eine reguläre URL bereitstellen, z. B. <a href = "/einige? Foo = bar"> link </a>
Wenn der Benutzer auf diesen Hyperlink klickt:
Im alten Browser wird die URL in /index.html#!/some?foo=bar geändert
In modernen Browsern wird die URL in /einige? Foo = bar geändert
Im folgenden Fall wird der Link nicht umgeschrieben, sondern veranlasst, dass die Seite in die entsprechende URL geladen wird:
Hyperlink enthält Ziel: <a href = "/ext/link? A = b" target = "_ self"> link </a>
Absolute Link zu verschiedenen Domänen: <a href = "http://angularjs.org/"> Link </a>
Verwenden Sie nach dem Einstellen des Basispfads die Verbindung mit "/" zu den Hyperlinks verschiedener Basispfade: <a href = "/not-my-base/link"> link </a>
3. Serverseite
Mit dieser Methode, bei der die URL -Umleitung auf dem Server angefordert wird, müssen wir normalerweise alle unsere Links zu unserer Anwendung umleiten. (Zum Beispiel index.html).
4.. Krabbeln Sie Ihre App
Gleich wie zuvor
5. Relative Links
Stellen Sie sicher, dass Sie alle relativen Links, Bilder, Skripte usw. überprüfen. Wir müssen die Basis-URL (<Basis href = " /my-base">) in <kopf> angeben und verwenden Sie überall absolute URL (beginnend mit /). Da die relative URL basierend auf dem anfänglichen Pfad des Dokuments in eine absolute URL konvertiert wird (normalerweise unterscheidet sich von der Wurzel der Anwendung). (Relative URLs werden unter Verwendung der anfänglichen absoluten URL des Dokuments auf absolute URLs gelöst, die sich häufig von der Wurzel der Anwendung unterscheidet.)
Wir sind sehr ermutigt, eckige Anwendungen auszuführen, die die Historie -API in Dokumentwurzel ermöglichen, da dies relative Verknüpfungsfragen gut berücksichtigt.
6. Senden von Links zwischen verschiedenen Browsern
(Dies erklärt, dass die Adressen der beiden Modi an verschiedene Browser angepasst werden können, automatisch konvertiert und erneut wiederholt werden ...)
7. Beispiel
In diesem Beispiel können Sie zwei $ -Position -Instanzen sehen, die beide den HTML5 -Modus sind, jedoch in verschiedenen Browsern, sodass wir die Unterschiede zwischen den beiden sehen können. Diese $ Standortdienste sind mit zwei gefälschten "Browsern" verbunden. Jeder Eingang repräsentiert die Adressleiste des Browsers.
Beachten Sie, dass beim Eingeben der Hashbang -Adresse in den ersten "Browser" (oder in den zweiten?) Ein weiterer URL nicht umschreiben oder umleiten wird, und dieser Konvertierungsprozess wird nur beim Nachladen von Seite geschehen.
<! DocType html> <html ng-App> <head> <base href = ""/> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <title> fake-browser </title> <meta content = "ie = edge, Chrome = Edge, Chrome = EDGE, Chrome = 1 1" 1 1 " http-äquiv = "x-ua-kompatible"> <style type = "text/css"> .ng-cloak {display: keine; · {{$ location.protocol ()}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {{$ location.port ()}} <br> $ location.path () = {{{$ location.path ()}} <br> $ locial.Search () oder <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? Flag#Hash </a> | <a href = "/other-Base/Another? Search"> extern </a> </div> <div id = "Hashbang-mode" ng-controller = " {{$ location.protocol ()}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {{$ location.port ()}} <br> $ location.path () = {{{$ location.path ()}} <br> $ locial.Search () oder <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? Flag#Hash </a> | <a href = "/other-Base/Another? Search"> extern </a> </div> </div> <script src = "../ angular.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> Funktion fakeBrowser (initurl, base.urlh. }; this.url = function () {return initurl; }; this.defer = function (fn, delay) {setTimeout (function () {fn ();}, delay || 0); }; this.basehref = function () {return basehref; }; this.notifywheouththingRequests = angular.noop; } var browsers = {html5: neuer fakeBrowser ('http://www.host.com/base/path?a=b#h', '/base/index.html'), Hashbang: New Fakeser ('http://www.host.host.com/base/index.html#! '/base/index.html')}; Funktion HTML5CNTL ($ scope, $ location) {$ scope. $ location = $ location; } Funktion Hashbangcntl ($ scope, $ location) {$ scope. $ location = $ location; } function initenv (name) {var root = angular.element (document.getElementById (name + '-mode')); Angular.bootstrap (root, [function ($ compileProvider, $ locationProvider, $ conzi) {Debugger; $ locationProvider.html5Mode (true) .hashprefix ('!'); {Geschichte: name == 'html5'}); keydown ', function () {if (! Delay) {Delay = setTimeout (Fireurlchange, 250); }; root.bind ('click', function (e) {e.Stoppropagation ();}); } initenv ('html5'); initenv ('Hashbang'); </script> </body> </html>V. Zusätzliche Anweisungen
1. Seite neu laden Navigation
Mit dem $ -Port -Service können wir nur die URL ändern. Es erlaubt uns nicht, die Seite neu zu laden. Wenn wir die URL ändern und die Seite neu laden oder auf andere Seiten springen müssen, müssen wir den Punkt mit niedriger Ebene verwenden, um die API $ window.location.href zu erhalten.
2. Verwenden Sie $ Standort außerhalb des Lebenszyklus des Umfangs
$ location kennt Angulars Umfangszyklus. Wenn sich die URL des Browsers ändert, aktualisiert es $ LOCE und $ $ bewerben, sodass alle $ watcher und $ beobserver benachrichtigt werden. Wenn wir den Standort $ in der $ Digest -Phase ändern, wird es kein Problem geben. $ location wird diese Änderung in den Browser ausbreiten und alle $ Watcher und $ Observer benachrichtigen. Wenn wir $ den Standort außerhalb von Angular (z. B. in DOM -Ereignissen oder in Tests) ändern müssen, müssen wir $ beantragen, um diese Änderung zu verbreiten.
3.. $ Location.path () und! oder / Präfixe
Der Pfad kann direkt mit "/" gestartet werden; Der $ location.Path () Setter wird automatisch gefüllt, wenn der Wert nicht mit "/" beginnt.
Beachten Sie das "!" Präfix gehört im Hashbang -Modus nicht zu einem Teil von $ location.path (). Es ist nur Hashprefix.
6. Testen mit dem $ Stort -Service
Bei der Verwendung des $ -Port-Service im Test liegt er außerhalb des Lebenszyklus des Winkels-Bereichs. Dies bedeutet, dass wir dafür verantwortlich sein müssen, Scope.Apply () anzurufen.
beschreiben ('servicederTest', function () {voran (modul (function ($ ciplice) {$ ciples.factory ('servicederTest', function ($ location) {// was auch immer es tut ...}); Der Dienst sollte ...}));});7. Aus früheren AngularJs -Veröffentlichungen migrieren
In einem frühen Angular, der $ location, hat Hashpath oder HashSearch verwendet, um Pfad- und Suchmethoden zu verarbeiten. In dieser Version verarbeitet der $ location Service bei Bedarf die Pfad- und Suchmethoden und verwendet dann die erhaltenen Informationen, um eine Hashbang -URL zu bilden (z. B. http://server.com/#!/path?search=a).
8. Zwei-Wege-Bindung an $ Standort
Der Angular Compiler unterstützt derzeit keine Zwei-Wege-Bindung von Methoden (https://github.com/angular/angular.js/issues/404). Wenn wir eine bidreihige Bindung an das $ -Position-Objekt (unter Verwendung der NGModel-Direktive in Eingaben) implementieren möchten, müssen wir eine zusätzliche Modelleigenschaft (z. B.: StandortPath) angeben und zwei $ Uhren hinzufügen, um $ Standort-Updates in beide Richtungen zu hören, z. B.:
<Eingabe type = "text" ng-model = "locationPath" />
// JS - Controller $ scope. $ watch ('locationPath', function (path) {$ location.Path (path);); $ scope.Die oben genannten sind die Informationen zu AngularJs mit $ location. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!