1. 무엇을합니까?
$ Location Service는 브라우저 주소 표시 줄 (Window.Location)의 URL을 분석하여 응용 프로그램에서보다 편리하게 URL을 사용할 수 있습니다. 주소 표시 줄에서 URL을 변경하면 $ Location Service에 응답하고 $ 위치에서 URL을 수정하면 주소 표시 줄에 응답합니다.
$ 위치 서비스 :
현재 브라우저 주소 표시 줄의 URL을 노출하므로
1.주의를 기울이고 URL을 관찰하십시오
2. URL을 변경하십시오
사용자가 다음을 수행하면 URL을 브라우저와 동기화합니다.
1. 주소 표시 줄을 변경하십시오
2. 뒤쪽 또는 전방 버튼을 클릭하거나 히스토리 링크를 클릭하십시오).
3. 링크를 클릭하십시오
URL 객체를 일련의 메소드 (프로토콜, 호스트, 경로, 검색, 해시)로 설명하는 메소드.
1. $ location and stleed.location을 비교하십시오
1) 목적 : Window.location 및 $ Location Services는 현재 브라우저의 위치에 대한 읽기 및 쓰기 액세스를 허용합니다.
2) API : Window.location은 직접 수정할 수있는 일부 특성으로 처리되지 않은 객체를 노출시킵니다. $ Location Service는 jQuery 스타일의 getter/setter 방법을 노출시킵니다.
3) 각도 응용 프로그램 선언주기와 통합 : $ 위치 모든 내부 선언주기 단계에 대해 알고 있으며 $ Watch 등과 통합합니다. Window.location은 작동하지 않습니다.
4) HTML5 API와 완벽하게 결합 : 레거시 브라우저의 폴백을 사용하면 더 낮은 버전의 브라우저에 대한 호환성 방법이 있습니까?); Window.location은 그렇지 않습니다.
5) 응용 프로그램에 의해로드 된 문서의 루트 디렉토리 또는 컨텍스트를 알고 있습니다. Window.location은 작동하지 않으며 wnidow.location.path는 "/docroot/subpath"; 그리고 $ location.path ()는 실제 docroot를 반환합니다.
2. 언제 $ 위치를 사용해야합니까?
응용 프로그램에서 현재 URL 변경에 응답하거나 현재 브라우저의 URL을 변경해야 할 때마다.
3. 그것은 무엇을하지 않습니까?
브라우저 URL이 변경되면 페이지가 다시로드되지 않습니다. 이 작업을 수행 해야하는 경우 (주소를 변경하고 페이지 재 장전을 구현하십시오) 하위 레벨 API, $ window.location.href를 사용하십시오.
2. API의 일반 개요 (API의 전체 개요)
$ 위치 서비스는 초기화 될 때 구성에 따라 다르게 행동 할 수 있습니다. 기본 구성은 대부분의 애플리케이션에 적합하며 기타 구성이 사용자 정의되어 새로운 기능을 사용할 수 있습니다.
$ Location Service가 초기화되면 jQuery Style Getter 및 Setter 메소드에서 사용할 수있어 현재 브라우저의 URL을 얻거나 변경할 수 있습니다.
1. $ 위치 서비스 구성
$ location service를 구성하려면 $ locationProvider (http://code.angularjs.org/1.0.2/docs/api/ng.$locationprovider)를 얻어야합니다. 다음 매개 변수를 설정해야합니다.
html5mode (mode) : {boolean}, true- html5 모드를 참조하십시오. False- 해시 방 모드, 기본값 : false 참조. (다음 장에서는 다양한 모드를 설명합니다)
hashprefix (prefix) : {string}, hashbang에서 사용하는 접두사 (html5mode가 false 일 때 HTML5 모드를 지원하지 않는 브라우저에 해시 방 모드를 사용), default : '!'
2. Getter 및 Setter 방법
$ Location Service는 읽기 전용 URL 부품 (AbsUrl, 프로토콜, 호스트, 포트)에 대한 Getter 메소드를 제공하며 URL, PATH, 검색 및 해시에 대한 Getter 및 Setter 메소드도 제공합니다.
// 현재 경로를 가져옵니다. $ location.path (); // 경로 변경 $ location.path ( '/newValue')
모든 세터 메소드는 동일한 $ 위치 객체를 반환하여 체인 구문을 구현합니다. 예를 들어, 한 문장으로 여러 속성을 수정하면 Chained Setter 메소드가 유사합니다.
$ location.path ( '/newValue'). 검색 ({key : value});
다음에 브라우저와 동기화 될 때 브라우저와 동기화 될 때 새 기록을 생성하는 대신 $ Location Service를 알려주는 데 사용할 수있는 특수 교체 방법이 있습니다. 교체 메소드는 리디렉션을 구현하려는 경우 유용하지만 뒤로 버튼을 무효화하고 싶지 않습니다 (뒤로 버튼이 다시 돌아와 리디렉션을 검색합니다). 새로운 기록을 만들지 않고 현재 URL을 변경하려면 다음을 수행 할 수 있습니다.
$ location.path ( '/somenewpath'). 대체 ();
Setter 메소드는 Window.location을 즉시 업데이트하지 않습니다. 대신 $ Location Service는 스코프 수명주기를 알고 여러 $ 위치 변경을 하나로 병합하여 $ Digest Stage의 Window.Location 개체에 제출합니다. $ 위치의 여러 상태의 변경 사항이 하나의 변경 사항으로 병합되므로 브라우저에서 replice () 메소드는 한 번만 호출되므로 전체 커밋에는 하나의 대체 () 만 있으므로 브라우저가 추가 기록을 생성하지 않습니다. 브라우저가 업데이트되면 $ Location Service는 REPLEC () 메소드를 통해 플래그 비트를 재설정하고 향후 변경 사항은 REPLEC ()가 다시 호출되지 않으면 새 기록을 생성합니다.
세터와 캐릭터 인코딩
우리는 $ location service에 특수 문자를 전달할 수 있으며, 서비스는 RFC3986 표준에 따라 자동으로 인코딩됩니다. 이 방법에 액세스 할 때 :
3. Hashbang 및 HTML5 모드
$ Location Service에는 HTML5 이력 API 사용을 기반으로 브라우저 주소 표시 줄의 URL 형식을 제어 할 수있는 두 가지 구성 모드가 있습니다. 두 모드 모두에서 응용 프로그램은 동일한 API를 사용합니다. $ Location Service는 올바른 URL 스 니펫 및 브라우저 API와 협력하여 브라우저 URL 변경 및 이력 관리를 수행 할 수 있도록 도와줍니다.
1. 해시 방 모드 (기본 모드)
이 모드에서 $ location은 모든 브라우저에서 Hashbang URL을 사용합니다. 자세한 내용은 다음 코드 스 니펫을 확인하십시오.
it ( 'example', inject (function ($ locationProvider) {$ locationProvider.html5mode = false; $ locationProvider.hashpRovider.hashprefix = '!', function ($ location) {// http://host.com/base/index.html#!/a $ location.absurl () == 'http://base/index.html#!/a'; $ locagion.search ({a : 'b', c : true}; $ location.absurl () == 'http://host.com/base/index.html#!/new?x=y');앱 크롤링 (Google이 앱을 색인화 할 수 있음)
Ajax 응용 프로그램을 색인화하려면 헤드에 특수 메타 태그를 추가해야합니다.
<meta name = "fragment"content = "!" />
이렇게하면 크롤러 로봇이 _escaped_fragment_ 매개 변수를 사용하여 현재 링크를 요청하고 서버를 크롤러 로봇에 알려주고 해당 HTML 스냅 샷을 제공 할 수 있습니다. 이 기술에 대한 자세한 내용은 https://developers.google.com/webmasters/ajax-crawling/docs/specification? hl=en-CN을 방문하십시오
4. HTML5 모드
HTML5 모드에서 $ location service의 getters and setter는 HTML5 히스토리 API를 통해 브라우저 URL과 상호 작용하여 일반 경로 및 검색 모듈을 사용하여 해시 방 모드를 대체 할 수 있습니다. 일부 브라우저가 HTML5 히스토리 API를 지원하지 않으면 $ 위치 서비스는 Hashbang URL을 사용하여 자동으로 모드로 돌아갑니다. 우리가 응용 프로그램을 보여주는 브라우저가 히스토리 API를 지원하는 브라우저가 히스토리 API를 지원하는지 여부는 확실하지 않은 문제를 해결할 수 있도록합니다.
이전 브라우저에서 일반 URL을 열면 Hashbangurl로 변환됩니다.
최신 브라우저에서 Hashbang URL을 열면 일반 URL로 다시 작성됩니다.
1. 이전 브라우저와의 호환성
HTML5 히스토리 API를 지원하는 브라우저의 경우 $ Location은 쓰기 경로 및 검색으로 돌아갑니다. 브라우저가 히스토리 API를 지원하지 않으면 $ 위치가 Hashbang URL을 제공하도록 변환됩니다. 이것은 $ Location Service에 의해 자동으로 변환됩니다.
2. HTML 링크 재 작성
히스토리 API 모드를 사용하면 브라우저에 대해 다른 링크가 필요하지만 일반 URL 만 제공하면 <a href = "/some? 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/"> link </a>
기본 경로를 설정 한 후 "/"로 시작하여 다른 기본 경로의 하이퍼 링크에 링크를 사용하십시오. <a href = "/not-my-base/link"> link </a>
3. 서버 측
이 메소드를 사용하여 서버에서 URL 리디렉션을 요청하면 일반적으로 모든 링크를 응용 프로그램으로 리디렉션해야합니다. (예를 들어, index.html).
4. 앱 크롤링
이전과 동일합니다
5. 상대적 링크
모든 상대 링크, 그림, 스크립트 등을 확인하십시오. <head>에서 기본 URL (<base href = " /my-base">)을 지정하고 모든 곳에서 절대 URL ( /로 시작)을 사용해야합니다. 상대 URL은 문서의 초기 경로에 따라 절대 URL로 변환되므로 (일반적으로 응용 프로그램의 루트와 다름). (상대 URL은 문서의 초기 절대 URL을 사용하여 절대 URL로 해결되며, 종종 응용 프로그램의 루트와 다릅니다).
우리는 상대 링크 문제를 잘 고려하기 때문에 문서 루트에서 히스토리 API를 허용하는 각도 응용 프로그램을 실행하는 것이 좋습니다.
6. 다른 브라우저간에 링크를 전송합니다
(이것은 두 모드의 주소를 다른 브라우저에 적합하고 자동으로 변환하고 다시 반복 할 수 있다고 설명합니다 ...)
7. 예
이 예에서는 두 개의 $ 위치 인스턴스를 볼 수 있습니다. 둘 다 HTML5 모드이지만 다른 브라우저에서는 두 가지의 차이점을 볼 수 있습니다. 이 $ 위치 서비스는 두 개의 가짜 "브라우저"에 연결되어 있습니다. 각 입력은 브라우저의 주소 표시 줄을 나타냅니다.
Hashbang 주소를 첫 번째 "브라우저"(또는 두 번째?)에 입력 할 때 다른 URL을 다시 작성하거나 리디렉션하지 않으며이 변환 프로세스는 페이지 새로 고침 될 때만 발생합니다.
<! docType html> <html ng-app> <head> <base href = ""/> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 가짜-브라우저 </title> <meta content = "ie = edge, chrome = 1"http-u-u-cative "> <스타일 유형 = "text/css"> .ng-cloak {display : none; . {{$ location.protocol ()}} <br> $ location.host.host () = {{{$ location.host ()}} <br> $ location.port () = {{{$ location.port ()}} <br> spate.path () = {{$ location.path ()}} <br> $ location.search () = {{$ 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 = "/other-base/other? search"> external </a> </div> <div id = "hashbang-mode"ng-controller = "hashbangcntl"> <h4> 히스토리가없는 브라우저 </h4> <div ng-address-bar browser = "hashbang"> <br> <br> $ frot (). {{$ location.protocol ()}} <br> $ location.host.host () = {{{$ location.host ()}} <br> $ location.port () = {{{$ location.port ()}} <br> spate.path () = {{$ location.path ()}} <br> $ location.search () = {{$ 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 = "/other-base/other? search"> 외부 </a> </div> </div> <script src = "../ Angular.js"type = "text/javaScript"> </script> <script type = "text/javaScript"> function/javaScript (initurl, basehref) {this.onurlchange = funclchange (funurlchange) {this.onurlchange. fn; }; this.url = function () {return initurl; }; this.defer = function (fn, delay) {settimeout (function () {fn ();}, 지연 || 0); }; this.basehref = function () {return basehref; }; 이. } var 브라우저 = {html5 : 새로운 가짜 브라우저 ( 'http://www.host.com/base/path?a=b#h', '/base/index.html'), hashbang : new fakebrowser ( 'http://www.host.com/base/base/index.html# !/ spombase !/ '/base/index.html')}; 함수 html5cntl ($ scope, $ location) {$ scope. $ location = $ location; } 함수 hashbangcntl ($ scope, $ location) {$ scope. $ location = $ location; . angular.bootstrap (root, [function ($ compileprovider, $ locationProvider, $ prude) {debugger; $ locationProvider.html5mode (true) .hashprefix ( '!'); $ provery.value ( '$ browser', 브라우저 [이름]); $ snif. {history : name == 'html5'}); input.bind (Keypress keydown ', function (! delay) {elide = browser.url (url) {reture input.val (url); browser.urlchange (input.val ()); root.bind ( 'click', function (e) {e.stopPropagation ();}); } initenv ( 'html5'); initenv ( 'hashbang'); </script> </body> </html>V. 추가 지침
1. 페이지 재 장전 탐색
$ 위치 서비스는 URL을 변경할 수 있습니다. 페이지를 다시로드 할 수 없습니다. URL을 변경하고 페이지를 다시로드하거나 다른 페이지로 점프 해야하는 경우 API, $ window.location.href를 얻으려면 저수준 포인트를 사용해야합니다.
2. 스코프 수명주기 외부에서 $ 위치를 사용합니다
$ 위치는 Angular의 범위 수명주기를 알고 있습니다. 브라우저의 URL이 변경되면 $ 위치를 업데이트하고 $ Apply를 호출하므로 모든 $ watcher 및 $ 옵저버에게 알립니다. $ 다이제스트 단계에서 $ 위치를 수정하면 아무런 문제가 없습니다. $ location 은이 수정을 브라우저로 전파하고 모든 $ watcher 및 $ 옵저버에게 알립니다. Angular (예 : DOM 이벤트 또는 테스트에서) 이외의 $ 위치를 변경 해야하는 경우이 변경 사항을 전파하려면 $ Appl을 호출해야합니다.
3. $ location.path () 및! 또는 / 접두사
경로는 "/"로 직접 시작할 수 있습니다. 값이 "/"로 시작되지 않으면 $ location.path () 세터가 자동으로 채워집니다.
"!"에 주목하십시오. Hashbang 모드에서 Prefix는 $ location.path ()의 일부에 속하지 않습니다. 그것은 단지 해시 프리 픽스입니다.
6. $ 위치 서비스로 테스트
테스트에서 $ 위치 서비스를 사용할 때는 각도 범위 수명주기 외부에 있습니다. 즉, SCOPE.Apply ()를 호출 할 책임이 있어야합니다.
설명 ( 'serviceundertest', function () {prevereach (module (function ($ prose) {$ provery) {$ provery.furedory ( 'serviceUnderTest', function ($ location)) {// uthing ithat ...});}), Inject (function ($ location, $ rootscope, serviceDertest) {$ location.path ( '/new/Path'); 서비스는 ...});});7. 이전 AngularJS 릴리스에서 마이그레이션
초기 각도에서 $ 위치는 HashPath 또는 HashSearch를 사용하여 경로 및 검색 방법을 처리했습니다. 이 릴리스에서 필요한 경우 $ 위치 서비스는 경로 및 검색 방법을 처리 한 다음 얻은 정보를 사용하여 Hashbang URL (예 : http://server.com/#!/path?search=a)을 형성합니다.
8. $ 위치에 양방향 바인딩
Angular Compiler는 현재 방법의 양방향 바인딩을 지원하지 않습니다 (https://github.com/angular/angular.js/issues/404). $ location 객체에 대한 양방향 바인딩을 구현하려면 (입력에서 ngmodel directive를 사용) 추가 모델 속성 (예 : LocationPath)을 지정하고 두 $ 시계를 추가하여 양방향으로 $ 위치 업데이트를 들으려면 다음과 같습니다.
<입력 유형 = "text"ng-model = "LocationPath" />
// js- 컨트롤러 $ scope. $ watch ( 'locationpath', function (path) {$ location.path (path);); $ scope. $ watch ( '$ location.path ()', function (path) {scope.location spath = path;});위는 $ 위치를 사용하는 AngularJS에 대한 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!