1. ¿Qué hace?
El servicio de ubicación $ analiza la URL en la barra de direcciones del navegador (basada en la ventana. Ubicación), lo que nos permite usar la URL más convenientemente en la aplicación. Cambiar la URL en la barra de direcciones responderá al servicio de ubicación $, y modificar la URL en la ubicación $ responderá a la barra de direcciones.
$ Servicio de ubicación:
Exponga la URL de la barra de dirección del navegador actual, para que podamos
1. Presta atención y observa URL
2. Cambiar URL
Cuando el usuario haga lo siguiente, sincronice la URL con el navegador:
1. Cambie la barra de direcciones
2. Haga clic en el botón Atrás o hacia adelante (o haga clic en un enlace histórico).
3. Haga clic en un enlace
Un método que describe un objeto URL como una serie de métodos (protocolo, host, ruta, búsqueda, hash).
1. Compare $ ubicación y ventana.
1) Propósito: Ambos servicios de ubicación de ventana y ubicación permiten el acceso de lectura y escritura a la ubicación del navegador actual.
2) API: Window. La ubicación expone un objeto sin procesar con algunas propiedades que pueden modificarse directamente; Mientras que el servicio de ubicación $ expone algunos métodos de Getter/Setter de estilo jQuery.
3) Integración con ciclo de declaración de aplicación angular: $ ubicación sabe sobre todas las etapas del ciclo de declaración interna e integra con $ reloj, etc.; mientras que la ubicación de ventana no funciona.
4) Combinar sin problemas con la API HTML5: con una alternativa para los navegadores heredados, ¿hay algún método de compatibilidad para versiones más bajas de los navegadores?); mientras que la ventana. La ubicación no.
5) Conozca el directorio o el contexto raíz del documento cargado por la aplicación: Window.location no funciona, y wnidow.location.path devolverá "/docroot/subpath"; y $ ubicación.path () Devuelve el Docroot real.
2. ¿Cuándo debo usar $ ubicación?
En una aplicación, cada vez que necesita responder a los cambios en la URL actual, o desea cambiar la URL del navegador actual.
3. ¿Qué no hace?
Cuando cambia la URL del navegador, la página no será recargada. Si necesita hacer esto (cambiar la dirección e implementar la recarga de la página), use una API de nivel inferior, $ window.location.href.
2. Descripción general general de la API (descripción general de la API)
El servicio de ubicación $ puede comportarse de manera diferente según la configuración cuando se inicializa. La configuración predeterminada es adecuada para la mayoría de las aplicaciones, y se personalizan otras configuraciones, lo que puede habilitar algunas características nuevas.
Cuando se inicializa el servicio de ubicación $, podemos usarlo en los métodos de Getter y Setter de JQuery Style, lo que nos permite obtener o cambiar la URL del navegador actual.
1. Configuración del servicio de ubicación $
Para configurar el servicio de ubicación $, debe obtener $ UbicationProvider (http://code.angularjs.org/1.0.2/docs/api/ng.$$locationProvider) y establece los siguientes parámetros:
html5mode (modo): {boolean}, true - ver el modo html5; FALSO - Vea el modo Hashbang, predeterminado: falso. (Los siguientes capítulos explicarán varios modos)
Hashprefix (prefijo): {String}, el prefijo utilizado por Hashbang (cuando html5Mode es falso, use el modo Hashbang para adaptarse a los navegadores que no admiten el modo HTML5), predeterminado: '!'
2. Métodos de Getter and Setter
El servicio de ubicación $ proporciona métodos Getter para piezas de URL de solo lectura (absurl, protocolo, host, puerto), y también proporciona métodos de Getter y Setter para URL, Ruta, búsqueda y hash.
// Obtener la ruta actual $ ubicación.path (); // Cambiar la ruta $ ubicación.path ('/newValue')Todos los métodos setter devuelven el mismo objeto de ubicación $ para implementar la sintaxis encadenada. Por ejemplo, modifique múltiples atributos en una oración, el método setter encadenado es similar:
$ ubicación.path ('/newValue'). Search ({Key: Value});
Hay un método de reemplazo especial que se puede usar para decirle al servicio $ ubicación que use una ruta en lugar de crear un nuevo historial cuando se sincroniza con el navegador la próxima vez que esté sincronizado con el navegador. El método de reemplazo es útil cuando queremos implementar la redirección, pero no queremos invalidar el botón de retroceso (el botón de retroceso está retrocediendo y recuperar la redirección). Si desea cambiar la URL actual sin crear un nuevo historial, podemos hacer esto:
$ ubicación.path ('/somenewpath'). reemplazar ();
Tenga en cuenta que el método Setter no actualizará Window.location de inmediato. En cambio, el servicio de ubicación $ conocerá el ciclo de vida del alcance y fusionará múltiples cambios de ubicación $ en uno y lo enviará a la ventana. Objeto de ubicación en la etapa de alcance $ Digest. Debido a que los cambios en múltiples estados de $ ubicación se fusionarán en un solo cambio, en el navegador, el método reemplazar () se llama solo una vez, de modo que todo el confirmación tiene solo un reemplazo (), lo que no hará que el navegador cree un historial adicional. Una vez que se actualiza el navegador, el servicio de ubicación $ restablecerá el bit de indicador a través del método reemplazar (), y los cambios futuros crearán un nuevo historial a menos que se llame a reemplazar () nuevamente.
Codificación de setter y personajes
Podemos pasar caracteres especiales al servicio $ ubicación, y el servicio los codificará automáticamente de acuerdo con el estándar RFC3986. Cuando accedemos a estos métodos:
3. Modos Hashbang y Html5
El servicio de ubicación $ tiene dos modos de configuración que pueden controlar el formato de URL de la barra de direcciones del navegador: modo Hashbang (predeterminado) y el modo HTML5 en función del uso de la API del historial HTML5. En ambos modos, la aplicación usa la misma API. El servicio de ubicación $ colaborará con el fragmento de URL correcto y la API del navegador para ayudarnos a realizar cambios de URL del navegador y la gestión del historial.
1. Modo hashbang (modo predeterminado)
En este modo, $ ubicación utiliza la URL Hashbang en todos los navegadores. Consulte el siguiente fragmento de código para obtener más información:
it ('debería mostrar ejemplo', inyect (function ($ ubicaciónprovider) {$ ubicaciónprovider.html5mode = false; $ ubicaciónprovider.hashprefix = '!';}, function ($ ubicación) {// abre http://host.com/base/index.html#!/a $ ubicación.absurl () == 'http://host.com/base/index.html#!/a'; Objeto vacío $ ubicación.search ({a: 'b', c: true}); $ ubicación.absurl () == 'http://host.com/base/index.html#!/new?x=y';Rastrear su aplicación (permite que Google indexe nuestra aplicación)
Si queremos que se indexe nuestra aplicación AJAX, necesitamos agregar una metaetiqueta especial a la cabeza:
<meta name = "fragment" content = "!" />
Hacerlo permitirá que el Robot Crawler solicite el enlace actual utilizando el parámetro _escaped_fragment_, informe a nuestro servidor el robot Crawler y proporcione la instantánea HTML correspondiente. Para obtener más información sobre esta tecnología, visite https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=en-cn
4. Modo HTML5
En el modo HTML5, los obtenedores y los setters del servicio de ubicación $ interactúan con la URL del navegador a través de la API del historial HTML5, lo que permite el uso de la ruta regular y los módulos de búsqueda para reemplazar el modo hashbang. Si algunos navegadores no admiten la API del historial HTML5, el servicio de ubicación $ volverá automáticamente al modo utilizando la URL Hashbang. Para permitirnos deshacernos de las preocupaciones de que no está claro si el navegador que muestra que nuestra aplicación admite la API del historial, usar el servicio $ ubicación es la mejor y la mejor opción.
Abrir una URL regular en un navegador más antiguo se convertirá en Hashbangurl.
Abrir una URL Hashbang en un navegador moderno se reescribirá a una URL regular.
1. Compatibilidad hacia adelante con navegadores más antiguos
Para los navegadores que admiten HTML5 History API, $ ubicación regresa a escribir ruta y búsqueda. Si el navegador no admite la API del historial, la ubicación $ se convertirá para proporcionar una URL de hashbang. Esto se convierte automáticamente en el servicio $ ubicación.
2. Reescritura de enlaces HTML
Cuando usamos el modo API de la historia, necesitamos diferentes enlaces para diferentes navegadores, pero solo necesitamos proporcionar una URL regular, por ejemplo <a href = "/some? Foo = bar"> enlace </a>
Cuando el usuario hace clic en este hipervínculo:
En el antiguo navegador, la URL se cambiará a /index.html#!/some?foo=bar
En los navegadores modernos, la URL se cambiará a /algunos? Foo = bar
En el siguiente caso, el enlace no se reescribirá, pero hará que la página se cargue en la URL correspondiente:
Hyperlink que contiene objetivo: <a href = "/ext/link? A = b" target = "_ self"> enlace </a>
Enlace absoluto a diferentes dominios: <a href = "http://angularjs.org/"> enlace </a>
Después de configurar la ruta base, use el enlace que comienza con "/" a los hipervínculos de diferentes rutas base: <a href = "/no-my-base/link> link </a>
3. Lado del servidor
Usando este método, solicitando la redirección de URL en el servidor, generalmente necesitamos redirigir todos nuestros enlaces a nuestra aplicación. (Por ejemplo, index.html).
4. Gateo de tu aplicación
Lo mismo que antes
5. Enlaces relativos
Asegúrese de verificar todos los enlaces relativos, imágenes, scripts, etc. Tenemos que especificar la URL base (<base href = " /my-base">) en <HEAD> y usar URL absoluta (comenzando con /) en todas partes. Porque la URL relativa se convertirá en una URL absoluta basada en la ruta inicial del documento (generalmente diferente de la raíz de la aplicación). (Las URL relativas se resolverán a URL absolutos utilizando la URL absoluta inicial del documento, que a menudo es diferente de la raíz de la aplicación).
Estamos muy alentados a ejecutar aplicaciones angulares que permitan la API de la historia en la raíz del documento, porque esto tiene en cuenta bien los problemas de enlace relativo.
6. Enviar enlaces entre diferentes navegadores
(Esto explica que las direcciones de los dos modos se pueden adaptar a diferentes navegadores, convertir automáticamente y repetirse nuevamente ...)
7. Ejemplo
En este ejemplo, puede ver dos instancias de ubicación $, las cuales son el modo HTML5, pero en diferentes navegadores, por lo que podemos ver las diferencias entre los dos. Estos servicios de ubicación $ están conectados a dos "navegadores" falsos. Cada entrada representa la barra de direcciones del navegador.
Tenga en cuenta que cuando ingresamos la dirección Hashbang al primer "navegador" (¿o el segundo?), No reescribirá ni redirigirá otra URL, y este proceso de conversión solo sucederá cuando la página se vuelva a cargar.
<! DocType html> <html ng-app> <head> <base href = ""/> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> falso-browser </title> <meta content = "ie = edge, crome = 1" "http-equiv =" x-uuiv "x-uuhiv" <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-non-non-bindable> <div id = "html5-mode" ng-confontroller = "html5cntl"> <h4> navegador con la historia api </h4> <div-address-bar browser = "html5"> <piv> <ivr> <br> $ lugar. {{$ ubicación.protocol ()}} <br> $ ubicación.host () = {{$ ubicación.host ()}} <br> $ ubicación.port () = {{$ ubicación.port ()}} <br> $ ubicación () = {{{$ ubicación {{$ ubicación.search ()}} <br> $ ubicación.hash () = {{$ ubicación.hash ()}} <br> <a href = "http://www.host.com/base/first?a=b">/base/primero? A = b </a> | | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? Flag#hash </a> | <a href = "/otra-base/otra? Search"> Exterior </a> </viv> <div id = "Hashbang-Mode" ng-Controller = "Hashbangcntl"> <h4> Browser sin historia API </ H4> <Div-AdDress-Bar Browser = "Hashbang"> </iv> <BR> <BR> $ Ubicación. {{$ ubicación.protocol ()}} <br> $ ubicación.host () = {{$ ubicación.host ()}} <br> $ ubicación.port () = {{$ ubicación.port ()}} <br> $ ubicación () = {{{$ ubicación {{$ ubicación.search ()}} <br> $ ubicación.hash () = {{$ ubicación.hash ()}} <br> <a href = "http://www.host.com/base/first?a=b">/base/primero? A = b </a> | | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? Flag#hash </a> | <a href = "/otra-base/otra? Search"> externo </a> </div> </div> <script src = "../ angular.js" type = "text/javascript"> </script> <script type = "text/javaScript"> function falseBrowser (initurl, basehref) {this.onurlchange = function (fn) {this este.urlange; }; this.url = function () {return initurl; }; this.defer = function (fn, demora) {setTimeOut (function () {fn ();}, demora || 0); }; this.basehref = function () {return BaseHref; }; this.notifyWhenOutstenseRequests = Angular.Noop; } var Browsers = {html5: new FakeBrowser ('http://www.host.com/base/path?a=b#h', '/base/index.html'), hashbang: nuevo falso ('http://www.host.com/base/index.html#!/path? '/base/index.html')}; función html5cntl ($ alcance, $ ubicación) {$ scope. $ ubicación = $ ubicación; } function hashbangcntl ($ scope, $ ubicación) {$ scope. $ ubicación = $ ubicación; } función Initenv (name) {var root = angular.element (document.getElementById (name + '-mode')); angular.bootstrap(root, [ function ($compileProvider, $locationProvider, $provide) { debugger; $locationProvider.html5Mode(true).hashPrefix('!'); $provide.value('$browser', browsers[name]); $provide.value('$document', root); $provide.value('$sniffer', {History: name == 'html5'}); KeyUp Keydown ', Function () {if (! }); root.bind ('click', function (e) {e.stoppropagation ();}); } initenv ('html5'); Initenv ('Hashbang'); </script> </body> </html>V. Instrucciones adicionales
1. Navegación de recarga de la página
El servicio de ubicación $ solo nos permite cambiar la URL; No nos permite volver a cargar la página. Cuando necesitamos cambiar la URL y recargar la página o saltar a otras páginas, debemos usar el punto de bajo nivel para obtener la API, $ Window.location.href.
2. Uso de $ ubicación fuera del ciclo de vida del alcance
$ ubicación conoce el ciclo de vida de alcance de Angular. Cuando cambia la URL del navegador, actualiza la ubicación de $ y las llamadas $ se aplican, por lo que se notifican todos los $ Watcher y $ Observer. Cuando modificamos la ubicación $ en la etapa $ Digest, no habrá problema; $ La ubicación propagará esta modificación al navegador y notificará a todos los $ Watcher y $ Observer. Cuando necesitamos cambiar la ubicación $ fuera de Angular (por ejemplo, en eventos DOM o en pruebas), tenemos que llamar a $ aplicar para propagar este cambio.
3. $ Luation.path () y! o / prefijos
La ruta se puede iniciar directamente con "/"; El setter $ ubicación.path () se llenará automáticamente cuando el valor no comience con "/".
Tenga en cuenta el "!" El prefijo, en modo Hashbang, no pertenece a una parte de $ ubicación.path (). Es solo hashprefix.
6. Pruebas con el servicio de ubicación $
Cuando se usa el servicio de ubicación $ en la prueba, está fuera del ciclo de vida del alcance angular. Esto significa que debemos ser responsables de llamar a Scope.apply ().
Describa ('ServiceUnterStest', function () {antes que el módulo (módulo (function ($ proporcione) {$ prop. el servicio debe hacer ...}));});7. migrando de las versiones anteriores de Angularjs
En Angular temprano, la ubicación $ usó Hashpath o HashSearch para procesar la ruta y los métodos de búsqueda. En esta versión, cuando es necesario, el servicio de ubicación $ procesa la ruta y los métodos de búsqueda, y luego utiliza la información obtenida para formar una URL hashbang (por ejemplo, http://server.com/#!/path?search=a).
8. Bidireccional de bidireccional a $ ubicación
El compilador Angular actualmente no admite la unión de métodos de dos vías (https://github.com/angular/angular.js/issues/404). Si queremos implementar un enlace bidireccional al objeto $ ubicación (usando la directiva ngmodel en la entrada), necesitamos especificar una propiedad modelo adicional (por ejemplo: ubicación) y agregar dos relojes $ para escuchar las actualizaciones de ubicación de $ en ambas direcciones, por ejemplo:
<input type = "text" ng-model = "ubicaciónpath" />
// js - controlador $ scope. $ watch ('ubicaciónpath', function (ruta) {$ ubicación.path (ruta);); $ scope. $ watch ('$ ubicación.path ()', function (rath) {scope.locationPath = ruta;});Lo anterior es la información sobre AngularJS utilizando la ubicación $. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!