1. O que isso faz?
O $ Location Service analisa o URL na barra de endereços do navegador (com base no window.location), permitindo -nos usar o URL de maneira mais conveniente no aplicativo. Alterar o URL na barra de endereços responderá ao Serviço de Localização $ e a modificação do URL no local $ responderá à barra de endereços.
$ Serviço de localização:
Expor o URL da barra de endereço do navegador atual, para que possamos
1. Preste atenção e observe URLs
2. Alterar URL
Quando o usuário fizer o seguinte, sincronize o URL com o navegador:
1. Altere a barra de endereço
2. Clique no botão traseiro ou avançado (ou clique em um link histórico).
3. Clique em um link
Um método que descreve um objeto URL como uma série de métodos (protocolo, host, caminho, pesquisa, hash).
1. Compare $ localização e janela.Location
1) Objetivo: os serviços de localização da Window.Location.Location e $ permitem ler e gravar acesso à localização do navegador atual.
2) API: Window.Location expõe um objeto não processado com algumas propriedades que podem ser modificadas diretamente; Enquanto o Serviço de Localização $ expõe alguns métodos Getter/Setter no estilo jQuery.
3) Integração com o ciclo da declaração de aplicação angular: $ Location conhece todos os estágios do ciclo de declaração interna e se integra ao $ relógio, etc.; Enquanto o Window.Location não funciona.
4) combina -se perfeitamente com a API HTML5: com um recuo para navegadores herdados, existem métodos de compatibilidade para versões mais baixas dos navegadores?); enquanto o window.Location não.
5) Conheça o diretório raiz ou o contexto do documento carregado pelo aplicativo: window.location não funciona e wnidow.Location.Path retornará "/docroot/subpath"; e $ local.Path () retorna o verdadeiro docroot.
2. Quando devo usar o local de $?
Em um aplicativo, sempre que você precisar responder às alterações no URL atual ou deseja alterar o URL do navegador atual.
3. O que isso não faz?
Quando o URL do navegador mudar, a página não será recarregada. Se você precisar fazer isso (altere o endereço e implemente a página Reload), use uma API de nível inferior, $ window.location.href.
2. Visão geral geral da API (visão geral geral da API)
O serviço de localização $ pode se comportar de maneira diferente de acordo com a configuração quando for inicializada. A configuração padrão é adequada para a maioria dos aplicativos e outras configurações são personalizadas, o que pode permitir alguns novos recursos.
Quando o serviço de localização $ é inicializado, podemos usá -lo nos métodos JQuery Style Getter e Setter, permitindo -nos obter ou alterar o URL do navegador atual.
1. $ Configuração de serviço de localização
Para configurar o serviço de localização $, você precisa obter $ LocationProvider (http://code.angularjs.org/1.0.2/docs/api/ng.$locationProvider) e defina os seguintes parâmetros:
html5mode (modo): {boolean}, true - consulte o modo html5; FALSO - Veja o modo Hashbang, padrão: false. (Os capítulos seguintes explicarão vários modos)
HashPrefix (prefixo): {String}, o prefixo usado por Hashbang (quando o html5mode é falso, use o modo Hashbang para se adequar aos navegadores que não suportam o modo HTML5), padrão: '!'
2. Métodos de getter e setter
O Serviço de Localização $ fornece métodos getter para peças de URL somente leitura (absurl, protocolo, host, porta) e também fornece métodos getter e setter para URL, caminho, pesquisa e hash.
// obtenha o caminho atual $ location.path (); // Alterar o caminho $ location.path ('/newvalue')Todos os métodos do setter retornam o mesmo objeto de localização $ para implementar a sintaxe encadeada. Por exemplo, modifique vários atributos em uma frase, o método de setter encadeado é semelhante:
$ location.path ('/newvalue'). pesquisa ({key: value});
Existe um método de substituição especial que pode ser usado para informar o Serviço de Localização $ para usar um caminho em vez de criar um novo histórico quando sincronizado com o navegador da próxima vez que você for sincronizado com o navegador. O método de substituição é útil quando queremos implementar o redirecionamento, mas não queremos invalidar o botão Voltar (o botão de volta está de volta e recuperar o redirecionamento). Se você deseja alterar o URL atual sem criar uma nova história, podemos fazer isso:
$ location.path ('/somenewpath'). substituir ();
Observe que o método do setter não atualizará a janela.Location imediatamente. Em vez disso, o Serviço de Localização $ conhecerá o ciclo de vida do escopo e mesclará várias mudanças de localização em um e o enviará para o objeto Window.Location no estágio $ Digest of Scope. Como as alterações em vários estados da localização de $ serão mescladas em uma alteração, no navegador, o método substituir () é chamado apenas uma vez, de modo que todo o compromisso tenha apenas uma substituição (), que não fará com que o navegador crie histórico adicional. Depois que o navegador for atualizado, o Serviço de Localização $ redefinirá o bit de sinalizador através do método Substituir (), e as alterações futuras criarão um novo histórico, a menos que substitua () seja chamado novamente.
Codificação de setter e personagem
Podemos passar caracteres especiais para o Serviço de Localização $, e o Serviço os codificará automaticamente de acordo com o padrão RFC3986. Quando acessamos esses métodos:
3. Modos Hashbang e Html5
O Serviço de Localização $ possui dois modos de configuração que podem controlar o formato URL da barra de endereços do navegador: modo Hashbang (padrão) e modo HTML5 com base no uso da API HTML5 History. Nos dois modos, o aplicativo usa a mesma API. O Serviço de Localização $ colaborará com a API correta de URL Snippet e Browser para nos ajudar a realizar mudanças de URL do navegador e gerenciamento de histórico.
1. Modo Hashbang (modo padrão)
Nesse modo, o $ Location usa o URL de Hashbang em todos os navegadores. Confira o seguinte snippet de código para saber mais:
ele ('deve mostrar exemplo', injeção (function ($ locationProvider) {$ locationProvider.html5mode = false; $ LocationProvider.hashprefix = '!';}, function ($ local) {// Abra http://host.com/base/index.html#/a $ 'http://host.com/base/index.html#!/a'; $ Location.search ({A: 'B', C: TRUE}); $ location.absurl () == 'http://host.com/base/index.html#!/new?x=y';Rastrear seu aplicativo (permite que o Google indexe nosso aplicativo)
Se queremos que nosso aplicativo Ajax seja indexado, precisamos adicionar uma meta etiqueta especial à cabeça:
<meta name = "fragment" content = "!" />
Fazer isso permitirá que o robô rastreador solicite o link atual usando o parâmetro _escaped_fragment_, informe nosso servidor o robô de rastreador e forneça o instantâneo HTML correspondente. Para mais informações sobre esta tecnologia, visite https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=en-cn
4. Modo HTML5
No modo HTML5, os Getters e Setters do Serviço de Localização $ interagem com o URL do navegador através da API HTML5 History, permitindo o uso do caminho regular e dos módulos de pesquisa para substituir o modo Hashbang. Se alguns navegadores não suportarem a API HTML5 History, o Serviço de Localização $ retornará automaticamente ao modo usando o URL Hashbang. Para nos permitir nos livrar das preocupações de que não está claro se o navegador que mostra nosso aplicativo suporta a API de histórico, o uso do serviço de localização $ é a melhor e melhor escolha.
A abertura de um URL regular em um navegador mais antigo será convertido em hashbangul.
A abertura de um URL de Hashbang em um navegador moderno será reescrito para um URL comum.
1. Compatibilidade encaminhada com navegadores mais antigos
Para os navegadores que suportam a API HTML5 History, $ Location retorna para escrever caminho e pesquisar. Se o navegador não suportar a API do histórico, o local será convertido para fornecer um URL de Hashbang. Isso é convertido automaticamente pelo Serviço de Localização $.
2. Reescrita de link html
Quando usamos o modo API do histórico, precisamos de links diferentes para diferentes navegadores, mas precisamos fornecer apenas um URL regular, por exemplo <a href = "/alguns? Foo = bar"> link </a>
Quando o usuário clica neste hiperlink:
No antigo navegador, o URL será alterado para /index.html#!/wome?foo=bar
Nos navegadores modernos, o URL será alterado para /algum? Foo = bar
No caso seguinte, o link não será reescrito, mas fará com que a página seja carregada no URL correspondente:
Hiperlink contendo destino: <a href = "/ext/link? A = b" target = "_ self"> link </a>
Link absoluto para diferentes domínios: <a href = "http://angularjs.org/"> link </a>
Depois de definir o caminho da base, use o link começando com "/" para os hiperlinks de diferentes caminhos de base: <a href = "/não-my-bashe/link"> link </a>
3. Lado do servidor
Usando esse método, solicitando redirecionamento de URL no servidor, geralmente precisamos redirecionar todos os nossos links para o nosso aplicativo. (por exemplo, index.html).
4. Rastreando seu aplicativo
O mesmo que antes
5. Links relativos
Verifique todos os links relativos, imagens, scripts, etc. Temos que especificar URL base (<base href = " /my-Base">) em <head> e usar URL absoluto (começando com /) em todos os lugares. Porque o URL relativo será convertido em um URL absoluto com base no caminho inicial do documento (geralmente diferente da raiz do aplicativo). (URLs relativos serão resolvidos para URLs absolutos usando o URL absoluto inicial do documento, que geralmente é diferente da raiz do aplicativo).
Somos muito incentivados a executar aplicativos angulares que permitem a API do histórico na raiz do documento, porque isso leva em consideração bem os problemas relativos do link.
6. Enviando links entre diferentes navegadores
(Isso explica que os endereços dos dois modos podem ser adaptados a diferentes navegadores, convertidos automaticamente e repetidos novamente ...)
7. Exemplo
Neste exemplo, você pode ver duas instâncias de localização $, as quais são o modo HTML5, mas em diferentes navegadores, para que possamos ver as diferenças entre os dois. Esses serviços de localização $ estão conectados a dois "navegadores" falsos. Cada entrada representa a barra de endereço do navegador.
Observe que quando inserimos o endereço Hashbang para o primeiro "navegador" (ou o segundo?), Ele não reescreverá ou redirecionará outro URL, e esse processo de conversão só acontecerá quando a página recarregar.
<! Doctype html> <html ng-app> <head> <base href = ""/> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> falsher </title> <meta = "ie = ieft = 1 e, r)/htiLT = rigora/r) e" ieTeT = itf-8 "/> <title> falsher </title> <meta =" ie = ie = itf-8 "/> <title>" <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng-non-bindable> <div id = "html5-mode" ng-controller = "html5cntl"> <h4> navegador com histórico </h4> <div ng-address-bar browser = "html5"> <// {{$ Location.protocol ()}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {{$ location.port.port ()}} <br> $ location.path () = {{$ location.path ()}} <br> {{$ location.search ()}} <br> $ location.hash () = {{$ location.hash ()}} <br> <a href = "http://ww.host.com/base/first?a=b">/base/primeiro? <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? Flag#hash </a> | <a href = "/outra-base/outro? Pesquisa"> externo </a> </div> <div id = "hashbang-mode" ng-controller = "hashbangcntl"> <h4> navegador sem histórico API </h4> <div ng-address-bar ("Hashbang"> {{$ Location.protocol ()}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {{$ location.port.port ()}} <br> $ location.path () = {{$ location.path ()}} <br> {{$ location.search ()}} <br> $ location.hash () = {{$ location.hash ()}} <br> <a href = "http://ww.host.com/base/first?a=b">/base/primeiro? <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond? Flag#hash </a> | <a href = "/outros-base/outro? pesquisa"> externo </a> </div> </div> <script src = "../ angular.js" type = "text/javascript"> </script> <script type = "text/javascript"> functionBrowser (housturl (basehref) {typen.The.On.On (JavScript "> functionBrowSer (functurl, (basehref) {the }; this.url = function () {return initurl; }; this.defer = function (fn, atraso) {setTimeout (function () {fn ();}, atraso || 0); }; this.basehref = function () {return basehref; }; this.Notify WhenouttletRequests = angular.noop; } var navegador = {html5: new FakeBrowser ('http://www.host.com/base/path?a=b#h', '/base/index.html'), hashbang: new FakeBrowser ('http:/wwwwww.host.com/base/bst: '/base/index.html')}; função html5cntl ($ scope, $ location) {$ scope. $ location = $ local; } função hashbangcntl ($ scope, $ location) {$ scope. $ location = $ local; } função initenv (nome) {var root = angular.Element (document.getElementById (nome + '-mode')); Angular.BootStrap (root, [função ($ compileProvider, $ LocationProvider, $ fornece) {Debugger; $ locationProvider.html5mode (true) .hashprefix ('!'); == 'html5'}); keydown ', função () {if (! }; root.bind ('click', function (e) {e.stopPropagation ();}); } initenv ('html5'); initenv ('hashbang'); </cript> </body> </html>V. Instruções adicionais
1. Página Recarregar a navegação
O Serviço de Localização $ apenas nos permite alterar o URL; Não nos permite recarregar a página. Quando precisamos alterar o URL e recarregar a página ou pular para outras páginas, precisamos usar o ponto de baixo nível para obter a API, $ window.location.href.
2. Usando $ localização fora do ciclo de vida do escopo
$ Location conhece o ciclo de vida do escopo do Angular. Quando o URL do navegador muda, ele atualiza o local e as chamadas $ se aplicam, para que todos os $ Watcher e $ Observer sejam notificados. Quando modificamos o local do $ no estágio $ Digest, não haverá problema; $ Localização propagará essa modificação ao navegador e notificará todo o $ Watcher e $ Observer. Quando precisamos alterar o local de $ para fora do Angular (por exemplo, em eventos DOM ou em testes), precisamos chamar $ Aplicar para propagar essa alteração.
3. $ location.Path () e! ou / prefixos
O caminho pode ser iniciado diretamente com "/"; O setter $ local.path () será preenchido automaticamente quando o valor não começar com "/".
Observe o "!" O prefixo, no modo Hashbang, não pertence a uma parte de $ location.path (). É apenas hashprefix.
6. Teste com o serviço de localização $
Ao usar o Serviço de Localização $ no teste, ele está fora do ciclo de vida do escopo angular. Isso significa que precisamos ser responsáveis por chamar o escopo.Apply ().
Descreva ('ServiceUnderTest', function () {antes e cada vez (Module (function ($ fornece) {$ fornece.factory ('serviceUndertest', function ($ location) {// o que quer que faça ...});}); it ('deve ...', injeção (função ($ local, $ RootsCope, ServiceTest) {. o serviço deve fazer ...}));});7. migrando de lançamentos anteriores do AngularJS
No início do Angular, $ Location usou hashpath ou hashsearch para processar os métodos de caminho e pesquisa. Nesta versão, quando necessário, o Serviço de Localização $ processa o caminho e os métodos de pesquisa e, em seguida, usa as informações obtidas para formar um URL de Hashbang (por exemplo, http://server.com/#!/path?search=a).
8. Ligação bidirecional a $ Location
Atualmente, o Angular Compiler não suporta a ligação bidirecional de métodos (https://github.com/angular/angular.js/issues/404). Se quisermos implementar a ligação bidirecional ao objeto $ Location (usando a diretiva NGModel na entrada), precisamos especificar uma propriedade de modelo adicional (por exemplo: LocationPath) e adicionar dois relógios $ para ouvir as atualizações de localização $ nas duas direções, por exemplo:
<input type = "text" ng-model = "locationPath" />
// js - controlador $ scope. $ watch ('locationPath', function (path) {$ location.path (path);); $ scope. $ watch ('$ location.path ()', function (path) {scope.LocationPath = path;});O exposto acima são as informações sobre o AngularJs usando o local de $. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!