1. Что это делает?
Сервис $ Location анализирует URL -адрес в адресной строке браузера (на основе Window.Location), что позволяет нам более удобно использовать URL -адрес в приложении. Изменение URL -адреса в адресной строке будет отвечать на службу местоположения $, а изменение URL -адреса в месте $ будет отвечать на адресную строку.
$ Местоположение Сервис:
Разоблачить URL текущего адресного строки браузера, чтобы мы могли
1. Обратите внимание и наблюдать за URL
2. Изменить URL
Когда пользователь делает следующее, синхронизируйте URL с браузером:
1. Измените адресную строку
2. Нажмите кнопку «Назад или вперед» (или нажмите историческую ссылку).
3. Нажмите на ссылку
Метод, который описывает объект URL как серию методов (протокол, хост, путь, поиск, хэш).
1. Сравните $ location и window.location
1) Цель: как Window.Location, так и службы $ Location разрешают доступ к чтению и записи к местоположению текущего браузера.
2) API: Window.Location обнаруживает необработанный объект с некоторыми свойствами, которые могут быть непосредственно изменены; В то время как $ location Service обнажает некоторые методы Getter/Setter в стиле jQuery.
3) Интеграция с угловым циклом объявления приложений: $ Местоположение знает обо всех этапах цикла внутренних объявлений и интегрируется с $ Watch и т. Д.; В то время как Window.Location не работает.
4) Бесплано сочетать с API HTML5: с запасением для устаревших браузеров, есть ли методы совместимости для нижних версий браузеров?); В то время как Window.Location нет.
5) знать корневой каталог или контекст документа, загруженный приложением: window.location не работает, и wnidow.location.path вернется "/docroot/subpath"; и $ location.path () возвращает настоящий доклейтер.
2. Когда мне следует использовать местоположение $?
В приложении в любое время вам необходимо реагировать на изменения в текущем URL или хотите изменить URL -адрес текущего браузера.
3. Что это не делает?
При изменении URL -адреса браузера страница не будет перезагружена. Если вам нужно это сделать (измените адрес и реализацию перезагрузки страницы), используйте API более низкого уровня, $ window.location.href.
2. Общий обзор API (общий обзор API)
Служба местоположения $ может вести себя по -разному в зависимости от конфигурации, когда она инициализирована. Конфигурация по умолчанию подходит для большинства приложений, и настраиваются другие конфигурации, которые могут включить некоторые новые функции.
Когда служба местоположения $ инициализируется, мы можем использовать его в методах Getter и Setter в стиле jQuery, позволяя нам получить или изменить URL -адрес текущего браузера.
1. $ Configuration Service Service
Чтобы настроить службу местоположения $, вам необходимо получить $ location -provider (http://code.angularjs.org/1.0.2/docs/api/ng.dlocationprovider) и установите следующие параметры:
html5mode (mode): {boolean}, true - см. Html5 Mode; False - см. Режим Hashbang, по умолчанию: false. (Следующие главы объяснят различные режимы)
hashprefix (prefix): {string}, префикс, используемый Hashbang (когда html5mode является false, используйте режим Hashbang в соответствии с браузерами, которые не поддерживают режим HTML5), по умолчанию: '!'
2. Методы Getter и Setter
Служба местоположения $ предоставляет методы Getter для частей URL-адреса только для чтения (Absurl, протокол, хост, порт), а также предоставляет методы Getter и Setter для URL, пути, поиска и хэша.
// Получить текущий путь $ location.path (); // Изменить путь $ location.path ('/newvalue')Все методы сеттера возвращают один и тот же объект местоположения $ для реализации синтаксиса цепочек. Например, изменить несколько атрибутов в одном предложении, метод сеттера цепочки аналогичен:
$ location.path ('/newvalue'). search ({key: value});
Существует специальный метод замены, который можно использовать для того, чтобы сообщить службе местоположения $ для использования пути вместо создания новой истории при синхронизации с браузером в следующий раз, когда вы синхронизируются с браузером. Метод замены полезен, когда мы хотим реализовать перенаправление, но не хотим аннулировать кнопку на заднем плане (кнопка на спине возвращается и получает перенаправление). Если вы хотите изменить текущий URL без создания новой истории, мы можем сделать это:
$ location.path ('/somenewpath'). replict ();
Обратите внимание, что метод сеттера не будет обновлять Window.Location немедленно. Вместо этого служба местоположения $ будет знать жизненный цикл охвата и объединить несколько изменений местоположения в один и отправить его в объект окна. Поскольку изменения в нескольких состояниях местоположения $ будут объединены в одно изменение, в браузере метод reply () вызывается только один раз, так что весь коммит имеет только одну замену (), что не заставит браузер создать дополнительную историю. После обновления браузера служба местоположения $ сбросит бит флага с помощью метода reply (), а будущие изменения создадут новую историю, если только reply () снова не вызван.
Кодирование сеттера и символов
Мы можем передать специальные символы в службу местоположения $, и служба автоматически кодирует их в соответствии со стандартом RFC3986. Когда мы получаем доступ к этим методам:
3. Моды Hashbang и HTML5
Служба местоположения $ имеет два режима конфигурации, которые могут управлять форматом URL -адреса адресной строки браузера: режим Hashbang (по умолчанию) и режим HTML5 на основе использования API HTML5 History API. В обоих режимах приложение использует один и тот же API. Служба местоположения $ будет сотрудничать с правильным URL -фрагментом и API браузера, чтобы помочь нам выполнить изменения URL -адреса браузера и управление истории.
1. Режим хашбанг (режим по умолчанию)
В этом режиме $ location использует URL Hashbang во всех браузерах. Проверьте следующий фрагмент кода, чтобы узнать больше:
Это ('должен показать пример', inject (function ($ location provider) {$ locationprovider.html5mode = false; $ locationprovider.hashprefix = '!';}, функция ($ location) {// open http://host.com/base/index.html# 'http://host.com/base/index.html#!/a'; Пустой объект $ location.search ({a: 'b', c: true}); $ location.absurl () == 'http://host.com/base/index.html#!/new?x=y';Ползание вашего приложения (позволяет Google индексировать наше приложение)
Если мы хотим, чтобы наше приложение Ajax было проиндексировано, нам нужно добавить специальный метатет в голову:
<meta name = "fragment" content = "!" />
Это позволит роботу Crawler запросить текущую ссылку, используя параметр _escaped_fragment_, пусть наш сервер узнает робота Crawler и предоставит соответствующий снимок HTML. Для получения дополнительной информации об этой технологии, пожалуйста, посетите https://developers.google.com/webmasters/ajax crawling/docs/speciation?hl=en-cn
4. Режим HTML5
В режиме HTML5, Getters и Setters службы $ Location взаимодействуют с URL -адресом браузера через API HTML5 History, что позволяет использовать обычные модули пути и поисковых модулей для замены режима хэшбанга. Если некоторые браузеры не поддерживают API HTML5 History, служба местоположения $ автоматически вернется в режим, используя URL Hashbang. Чтобы позволить нам избавиться от опасений, что неясно, является ли браузер, который показывает, что наше приложение поддерживает API истории, использование услуги $ местоположения является правильным и лучшим выбором.
Открытие обычного URL в более старом браузере будет преобразован в Hashbangurl.
Открытие URL Hashbang в современном браузере будет переписано на обычный URL.
1. Совместимость вперед со старыми браузерами
Для браузеров, которые поддерживают HTML5 History API, $ Location возвращается, чтобы написать путь и поиск. Если браузер не поддерживает API истории, местоположение $ будет конвертировано для предоставления URL -адреса Hashbang. Это автоматически конвертируется службой местоположения $.
2. Переписывание ссылок HTML
Когда мы используем режим API History, нам нужны разные ссылки для разных браузеров, но нам нужно только предоставить обычный URL, например, <a href = "/некоторые? Foo = bar"> link </a>
Когда пользователь нажимает эту гиперссылку:
В старом браузере URL будет изменен на /index.html#!/some?foo=bar
В современных браузерах URL будет изменен на /некоторые? Foo = bar
В следующем случае ссылка не будет переписана, но приведет к загрузке страницы в соответствующий URL:
Гиперссылка, содержащая цель: <a href = "/ext/link? A = b" target = "_ self"> link </a>
Абсолютная ссылка на разные домены: <a href = "http://angularjs.org/"> ссылка </a>
После настройки базового пути используйте ссылку, начиная с «/» для гиперссылок разных базовых путей: <a href = "/not-my-base/link"> link </a>
3. Серверная сторона
Используя этот метод, запрашивая перенаправление URL на сервере, нам обычно нужно перенаправить все наши ссылки на наше приложение. (например, index.html).
4. Ползание вашего приложения
То же, что и раньше
5. Относительные ссылки
Обязательно проверьте все относительные ссылки, изображения, сценарии и т. Д. Мы должны указать базовый URL (<base href = " /my-base">) в <head> и использовать абсолютный URL (начиная с /) везде. Потому что относительный URL будет преобразован в абсолютный URL -адрес на основе начального пути документа (обычно отличается от корня приложения). (Относительные URL -адреса будут разрешены для абсолютных URL -адресов с использованием начального абсолютного URL -адреса документа, который часто отличается от корня приложения).
Нас очень рекомендуется запускать угловые приложения, которые позволяют историю API в корне документа, потому что это учитывает относительные проблемы.
6. Отправка ссылок между различными браузерами
(Это объясняет, что адреса двух режимов могут быть адаптированы к разным браузерам, автоматически преобразованы и повторяются снова ...)
7. Пример
В этом примере вы можете увидеть два экземпляра местоположения $, оба из которых являются режимом HTML5, но в разных браузерах, поэтому мы можем увидеть различия между ними. Эти услуги по местоположению $ подключены к двум поддельным «браузерам». Каждый вход представляет адресную строку браузера.
Обратите внимание, что когда мы введем адрес хэшбанг в первый «браузер» (или второй?), Он не переписывает и не перенаправляет другой URL, и этот процесс преобразования произойдет только при перезагрузке страницы.
<! Doctype html> <html ng-app> <head> <base href = ""/> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> поддельный браузер </title> <meta = "ie = chrome = 1" http-equiv = "x-ua-совместимый"> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-non-bindable> <div id = "html5-mode" ng-controller = "html5cntl"> <h4> браузер с историей API </h4> <div ng-address-bar browser = "html5"> </div> <br> <br> $ $ $ $. {{$ location.protocol ()}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {{$ location.port ()}} <br> $ location.path () = {$ location.path ()}} <br> $ {{$ location.search ()}} <br> $ location.hash () = {{$ location.hash ()}} <br> <a href = "http://www.host.com/base/first?a=b">/base/first? a = b </a> | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? Flag#hash </a> | <a href = "/fore-base/ore? search"> внешний </a> </div> <div id = "hashbang-mode" ng-controller = "hashbangcntl"> <h4> браузер без истории API </h4> <div ng-address-bar browser = "hashbang"> </h4> <br> $ waddress-bar = "hashbang"> </h4> <br> $ waddress-bar = {{$ location.protocol ()}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {{$ location.port ()}} <br> $ location.path () = {$ location.path ()}} <br> $ {{$ location.search ()}} <br> $ location.hash () = {{$ location.hash ()}} <br> <a href = "http://www.host.com/base/first?a=b">/base/first? a = b </a> | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? Flag#hash </a> | <a href = "/fore-base/ore? search"> extred </a> </div> </div> <script src = "../ angular.js" type = "text/javascript"> </script> <script type = "text/javascript"> functbrowser (initurl, baseHref) {this.onUrlChrage = fnuctrur) (fn. FN; }; this.url = function () {return initurl; }; this.defer = function (fn, delay) {settimeout (function () {fn ();}, задержка || 0); }; this.basehref = function () {return basehref; }; это. } var browsers = {html5: new Fakebrowser ('http://www.host.com/base/path?a=b#h', '/base/index.html'), hashbang: new Fakebrowser ('http://www.host.com/base/index.htmale (' http://www.host.com/base/index.htmale? '/base/index.html')}; Функция html5cntl ($ scope, $ location) {$ scope. $ location = $ location; } function hashbangcntl ($ scope, $ location) {$ scope. $ location = $ location; } function initenv (name) {var root = angular.Element (document.getElementById (name + '-Mode')); Angular.BootStrap (root, [function ($ compileprovider, $ location -provider, $ предоставление) {Debugger; $ location provider.html5mode (true) .hashprefix ('!'); $ предоставление. Value ('$ browser', браузеры [name]); {История: name == 'html5'}); Keyup ', function () {if (! Dolement) }; root.bind ('click', function (e) {e.stoppropagation ();}); } initenv ('html5'); initenv ('hashbang'); </script> </body> </html>V. Дополнительные инструкции
1. Пейдж перезагрузка навигации
Служба местоположения $ позволяет нам изменить URL; Это не позволяет нам перезагрузить страницу. Когда нам нужно изменить URL и перезагрузить страницу или перейти на другие страницы, нам нужно использовать точку низкого уровня, чтобы получить API, $ window.location.href.
2. Использование местоположения $ за пределами сфере жизненного цикла
$ location знает жизненный цикл Angular. Когда URL -адрес браузера меняется, он обновляет местоположение $ и вызывает применение $, поэтому все $ watcher и $ stemver уведомляются. Когда мы изменим местоположение $ на стадии $ Digest, проблем не будет; Расположение $ будет распространять эту модификацию в браузер и уведомит всех $ Watcher и $ stemer. Когда нам нужно изменить местоположение $ за пределами угловой (например, в событиях DOM или в тестах), мы должны позвонить в $, применить к распространению этого изменения.
3. $ location.path () и! или / префиксы
Путь можно начать напрямую с "/"; Сеттер $ location.path () будет автоматически заполнен, когда значение не начнется с "/".
Обратите внимание на "!" Префикс, в режиме Хашбанг, не принадлежит части $ location.path (). Это просто хэшпрофикс.
6. Тестирование с помощью услуги местоположения $
При использовании услуги $ местоположения в тесте он находится вне жизненного цикла Angular Sope. Это означает, что мы должны нести ответственность за вызов scope.apply ().
Опишите ('serviceUndEST', function () {ofeeach (module (function ($ предоставление) {$ предоставление.factory ('serviceUndTest', function ($ location) {// Как бы то ни было ...});}); it ('должен ...', inject (function ($ location, $ rootscope, serviceUndest) {$ location.path ('/new/pather; служба должна сделать ...});});7. мигрируя из более ранних выпусков AngularJS
В раннем угловом, $ местоположение, используемое хэшпат или хэш -исследование для обработки пути и методов поиска. В этом выпуске, когда это необходимо, служба местоположения $ обрабатывает путь и методы поиска, а затем использует полученную информацию для формирования URL -адреса HASHBANG (например, http://server.com/#!/path?search=a).
8. Двусторонняя привязка к месту $
Угловой компилятор в настоящее время не поддерживает двустороннее связывание методов (https://github.com/angular/angular.js/issues/404). Если мы хотим реализовать двустороннюю привязку к объекту $ Location (используя директиву NGModel при входе), нам необходимо указать дополнительное свойство модели (например: LocationPath) и добавить два $ часов для прослушивания обновлений $ в обоих направлениях, например: например:
<input type = "text" ng-model = "locationpath" />
// js - контроллер $ rack.
Выше приведено информация об angularjs с использованием местоположения $. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!