1。それは何をしますか？
$ Location Serviceは、ブラウザのアドレスバー（Window.Locationに基づいて）のURLを分析し、アプリケーションでURLをより便利に使用できるようにします。アドレスバーのURLを変更すると、$ Location Serviceに応答し、$ LocationのURLを変更するとアドレスバーに応答します。
$ロケーションサービス：
現在のブラウザアドレスバーのURLを公開するので、
1。URLに注意を払い、観察します
2。URLを変更します
ユーザーが次のことを行うとき、URLをブラウザと同期させます。
1.アドレスバーを変更します
2。[バック]ボタンまたはフォワードボタンをクリックします（または、履歴リンクをクリックします）。
3.リンクをクリックします
URLオブジェクトを一連のメソッド（プロトコル、ホスト、パス、検索、ハッシュ）として説明するメソッド。
1. $ location and windocation.locationを比較します
1）目的：window.locationと$ location Servicesの両方で、現在のブラウザの場所への読み取りおよび書き込みアクセスを許可します。
2）API：window.locationは、直接変更できるプロパティを使用して未処理のオブジェクトを公開します。 $ Location ServiceはいくつかのjQueryスタイルのゲッター/セッターメソッドを公開します。
3）角度アプリケーション宣言サイクルとの統合：$の場所は、すべての内部宣言サイクル段階を知っており、$ watchなどと統合します。 window.locationが機能しません。
4）HTML5 APIとシームレスに組み合わせる：レガシーブラウザのフォールバックを使用すると、ブラウザーの低いバージョンの互換性方法はありますか？）; window.locationはそうではありません。
5）アプリケーションによってロードされたドキュメントのルートディレクトリまたはコンテキストを知る：window.locationは機能しない、およびwnidow.location.pathは「/docroot/subpath」を返します。 $ location.path（）は、実際のドクターを返します。
2。$の場所をいつ使用する必要がありますか？
アプリケーションでは、現在のURLの変更に応答する必要があるとき、または現在のブラウザのURLを変更する必要があるときはいつでも。
3。何をしませんか？
ブラウザのURLが変更されると、ページはリロードされません。これを行う必要がある場合（アドレスを変更してページリロードを実装）、低レベルのAPI、$ window.location.hrefを使用します。
2。APIの一般的な概要（APIの全体的な概要）
$ Location Serviceは、初期化されたときの構成に応じて異なる動作をすることができます。デフォルトの構成はほとんどのアプリケーションに適しており、その他の構成はカスタマイズされているため、いくつかの新機能を有効にできます。
$ Location Serviceが初期化されたら、JQuery Style Getter and Setterメソッドで使用して、現在のブラウザのURLを取得または変更できるようにします。
1。$ロケーションサービス構成
$ Location Serviceを構成するには、$ locationProvider（http://code.angularjs.org/1.0.2/docs/api/ng.$LocationProvider）を取得し、次のパラメーターを設定する必要があります。
html5mode（モード）：{boolean}、true -html5 modeを参照; false -Hashbangモードを参照、デフォルト：False。 （次の章では、さまざまなモードについて説明します）
hashprefix（prefix）：{string}、Hashbangで使用されるプレフィックス（HTML5ModeがFALSEの場合、HTML5モードをサポートしないブラウザに合わせてハッシュバンモードを使用）、デフォルト： '！'
2。ゲッターとセッターのメソッド
$ Location Serviceは、読み取り専用のURLパーツ（ABSURL、プロトコル、ホスト、ポート）のゲッターメソッドを提供し、URL、パス、検索、ハッシュのゲッターおよびセッターメソッドも提供します。
//現在のパス$ location.path（）を取得します。 //パス$ location.path（ '/newValue'）を変更する
すべてのセッターメソッドは、同じ$ locationオブジェクトを返して、チェーン付き構文を実装します。たとえば、複数の属性を1つの文で変更すると、チェーンズセッターメソッドは似ています。
$ location.path（ '/newValue'）。検索（{key：value}）;
ブラウザと同期したときにブラウザと同期したときに、新しい履歴を作成する代わりに、$ロケーションサービスにパスを使用するように指示するために使用できる特別な交換方法があります。交換方法は、リダイレクトを実装したいが、バックボタンを無効にしたくない場合に役立ちます（戻るボタンが戻ってリダイレクトを取得します）。新しい履歴を作成せずに現在のURLを変更したい場合は、これを行うことができます。
$ location.path（ '/somenewpath'）。置き換え（）;
セッターメソッドはすぐにwindow.locationを更新しないことに注意してください。代わりに、$ Location Serviceはスコープライフサイクルを把握し、複数の$ロケーションの変更を1つにマージし、スコープの$ダイジェスト段階のwindow.locationオブジェクトに送信します。 $ locationの複数の状態の変更は1つの変更にマージされるため、ブラウザでは、交換（）メソッドは1回のみ呼び出されるため、コミット全体には1つの交換（）のみがあり、ブラウザが追加の履歴を作成しません。ブラウザが更新されると、$ Location ServiceはLeplage（）メソッドを介してフラグビットをリセットし、将来の変更は再び呼び出されない限り新しい履歴を作成します。
セッターとキャラクターエンコーディング
特殊文字を$ロケーションサービスに渡すことができ、サービスはRFC3986標準に従って自動的にそれらをエンコードします。これらの方法にアクセスするとき：
3。HashbangおよびHTML5モード
$ Location Serviceには、HTML5 History APIの使用に基づいたブラウザのアドレスバーのURL形式（ハッシュバンモード（デフォルト）とHTML5モード）を制御できる2つの構成モードがあります。両方のモードで、アプリケーションは同じAPIを使用します。 $ Location Serviceは、正しいURLスニペットおよびブラウザーAPIと協力して、ブラウザのURLの変更と履歴管理を実行するのに役立ちます。
1。ハッシュバンモード（デフォルトモード）
このモードでは、$の場所はすべてのブラウザーでハッシュバンURLを使用します。詳細については、次のコードスニペットをご覧ください。
It（ 'はshows example'、inject（function（$ locationprovider）{$ locationprovider.html5mode = false; $ locationprovider.hashprefix = '！';}、function（$ location）{// open 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}）;アプリをクロールする（Googleがアプリのインデックスを作成できるようにする）
AJAXアプリケーションをインデックス付けする場合は、ヘッドに特別なメタタグを追加する必要があります。
<メタ名= "fragment" content = "！" />
そうすることで、クローラーロボットは_escaped_fragment_パラメーターを使用して現在のリンクを要求し、サーバーにクローラーロボットを知らせ、対応するHTMLスナップショットを提供することができます。このテクノロジーの詳細については、https：//developers.google.com/webmasters/ajax-crawling/docs/specification?hl=en-cnをご覧ください
4。HTML5モード
HTML5モードでは、$ Location ServiceのゲッターとセッターがHTML5 History APIを介してブラウザのURLと対話し、通常のパスと検索モジュールを使用してハッシュバンモードを置き換えることができます。一部のブラウザがHTML5 History APIをサポートしていない場合、$ Location ServiceはHashbang URLを使用して自動的にモードに戻ります。アプリケーションが歴史APIをサポートしていることを示すブラウザが$ロケーションサービスを使用しているかどうかが不明であるという懸念を取り除くことができるようにすることは、正しい選択であり、最良の選択です。
古いブラウザで通常のURLを開くと、Hashbangurlに変換されます。
最新のブラウザでハッシュバンURLを開くと、通常のURLに書き換えられます。
1。古いブラウザとの転送互換性
HTML5 History APIをサポートするブラウザの場合、$の場所は書き込みパスと検索に戻ります。ブラウザがHistory APIをサポートしていない場合、$の場所が変換され、Hashbang URLが提供されます。これは、$ロケーションサービスによって自動的に変換されます。
2。HTMLリンク書き換え
履歴APIモードを使用する場合、さまざまなブラウザーに異なるリンクが必要ですが、たとえば<a href = "/some？foo = bar"> link </a>など、通常のURLを提供するだけが必要です。
ユーザーがこのハイパーリンクをクリックすると：
古いブラウザでは、URLが/index.html#!/some?foo=barに変更されます
最新のブラウザでは、URLが /someに変更されますfoo = bar
次の場合、リンクは書き換えられませんが、ページを対応するURLにロードします。
ターゲットを含むハイパーリンク：<a href = "/ext/link？a = b"ターゲット= "_ self"> link </a>
異なるドメインへの絶対リンク：<a href = "http://angularjs.org/"> link </a>
ベースパスを設定した後、異なるベースパスのハイパーリンクへの「/」から始まるリンクを使用します：<a href = "/not-my-base/link"> link </a>
3。サーバー側
この方法を使用して、サーバー上のURLリダイレクトを要求すると、通常、アプリケーションへのすべてのリンクをリダイレクトする必要があります。 （たとえば、index.html）。
4.アプリをrawう
以前と同じです
5。相対リンク
すべての相対的なリンク、写真、スクリプトなどを確認してください。<head>でベースURL（<base href = " /my-base">）を指定し、どこでも絶対URL（ /で始まる）を使用する必要があります。なぜなら、相対URLはドキュメントの初期パスに基づいて絶対URLに変換されるため（通常、アプリケーションのルートとは異なります）。 （相対URLは、ドキュメントの初期絶対URLを使用して絶対URLに解決されますが、これは多くの場合、アプリケーションのルートとは異なります）。
これは、相対的なリンクの問題を十分に考慮しているため、ドキュメントルートで履歴APIを許可する角度アプリケーションを実行することを非常に奨励されています。
6.異なるブラウザ間のリンクを送信します
（これは、2つのモードのアドレスが異なるブラウザに適合し、自動的に変換され、再び繰り返される可能性があることを説明しています...）
7。例
この例では、2つの$ロケーションインスタンスを見ることができます。どちらもHTML5モードですが、異なるブラウザーでは、2つの違いを確認できます。これらの$ロケーションサービスは、2つの偽の「ブラウザ」に接続されています。各入力は、ブラウザのアドレスバーを表します。
ハッシュバンアドレスを最初の「ブラウザ」（または2番目のブラウザ」に入力すると、別のURLを書き換えたりリダイレクトしたりすることはなく、この変換プロセスはページリロードの場合にのみ発生することに注意してください。
<！doctype html> <html ng-app> <head> <base href = "" "/> <meta http-equiv =" content-type "content =" text/html; charset = utf-8 "/> <title> fake-browser </title> <meta content =" ie = edge = "x-uc-equiv <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 div <> <> <> <bro> $ {{$ location.protocol（）}} <br> $ location.host（）= {{$ location.host（）} <br> $ location.port（）= {$ location.port（）}} <br> $ location.path（）= {{$ location.path（）}} <brol location. {{$ location.search（）}} <br> $ location.hash（）= {$ location.hash（）}} <br> <a href = "http://www.host.com/base/first?a = b">/base/base？a = b </a> | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond？flag＃hash </a> | <a href = "/other-base/ater？search"> external </a> </div> <div id = "hashbang-mode" ng-controller = "hashbangcntl"> <h4>履歴APIのないブラウザー</h4> <div ng-address-bar browser = ""> </div div div <> <bro> <br> {{$ location.protocol（）}} <br> $ location.host（）= {{$ location.host（）} <br> $ location.port（）= {$ location.port（）}} <br> $ location.path（）= {{$ location.path（）}} <brol location. {{$ location.search（）}} <br> $ location.hash（）= {$ location.hash（）}} <br> <a href = "http://www.host.com/base/first?a = b">/base/base？a = b </a> | <a href = "http://www.host.com/base/sec/ond?flag#hash"> sec/ond？flag＃hash </a> | <a href = "/other-base/ater？search">外部</a> </div> </div> <スクリプトsrc = "../ angular.js" type = "> </javascript"> </javascript> <script> <text/javascript "> function fakebrowser（initurl、basehref）{thisonurlchange = function（fn） }; this.url = function（）{return initurl; }; this.defer = function（fn、delay）{setimeout（function（）{fn（）;}、delay || 0）; }; this.basehref = function（）{return basehref; };これ。 } var browsers = {html5：new fakeBrowser（ 'http://www.host.com/base/path?a = b#h'、 '/base/index.html'）、ハシバン：新しいfakbbrowser（ 'http://www.host.com/base/index.html#h'？ '/base/index.html'）}; function 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、$ locationprovider、$ detwer）{debugger; $ locationprovider.html5mode（true）.hashprefix（ '！'）; $ sultion.value（ '$ browser'、browsers [name]）; {history：name == 'html5'}）; $ compileprovider.direction（ 'ngaddressbar'、function（）{return function（elm、attrs）{artss.browser]、input = angular.element（ '<入力タイプ= " keyup delay = setimeout（fireurlchange、url（url）; }）; root.bind（ 'click'、function（e）{e.stoppropagation（）;}）; } intenv（ 'html5'）; inteenv（ 'hashbang'）; </script> </body> </html>V.追加の指示
1。ページリロードナビゲーション
$ Location Serviceは、URLを変更することのみを可能にします。ページをリロードすることはできません。 URLを変更してページをリロードしたり、他のページにジャンプする必要がある場合は、低レベルのポイントを使用してAPI $ window.location.hrefを取得する必要があります。
2。スコープライフサイクル以外の$の場所を使用します
$場所は、Angularのスコープライフサイクルを知っています。ブラウザのURLが変更されると、$の場所を更新し、$を呼び出すため、すべての$ watcherと$ observerに通知されます。 $ digest段階で$の場所を変更すると、問題はありません。 $の場所は、この変更をブラウザに伝播し、すべての$ウォッチャーと$オブザーバーに通知します。 Angular以外で$の場所を変更する必要がある場合（例：DOMイベントやテストで）、この変更を伝播するために$を呼び出す必要があります。
3。$ location.path（）と！または /プレフィックス
パスは「/」で直接開始できます。 $ location.path（）セッターは、値が「/」で開始されないときに自動的に入力されます。
「！」に注意してください接頭辞は、ハッシュバンモードで、$ location.path（）の一部に属していません。 HashPrefixだけです。
6。$ロケーションサービスでのテスト
テストで$ロケーションサービスを使用する場合、Angular Scopeライフサイクルの外側にあります。これは、scope.apply（）を呼び出す必要があることを意味します。
説明（ 'ServiceUnderTest'、function（）{beforeeach（function（$ detwer）{$ sultion.factory（ 'serviceundertest'、function（$ location）{//それが何をするにしても...}）;}）; it（ 'sefs ...'、inject（function（$ location、$ rotscope、service undertest）{$ location.ment（ '/new path'）; path（）; path '）;サービスは...}）;}）;7。以前のAngularJSリリースからの移動
初期の角度では、$の場所はハッシュパスまたはハッシュサーチを使用してパスと検索の方法を処理しました。このリリースでは、必要に応じて、$ロケーションサービスがパスと検索方法を処理し、取得した情報を使用してハッシュバンURLを形成します（たとえば、http：//server.com/#!/path?search=a）。
8。$の場所への双方向のバインディング
Angularコンパイラは現在、メソッドの双方向の結合をサポートしていません（https://github.com/angular/angular.js/issues/404）。 $ locationオブジェクトに双方向のバインディングを実装したい場合（入力でNGModelディレクティブを使用）、追加のモデルプロパティ（例：LocationPath）を指定し、2つの$ WATTEを追加して、両方向の$ Location Updatesをリッスンする必要があります。
<入力型= "テキスト" ng-model = "locationpath" />
// js -controller $ scope。$ watch（ 'locationpath'、function（path）{$ location.path（path）;）; $ scope。$ watch（ '$ location.path（）'、function（path）{scope.locationpath = path;}）;上記は、$ locationを使用したAngularjsに関する情報です。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！