[AngularJS] $location 함수(메소드) & 이벤트 사용하기

[AngularJS] $location 메소드/이벤트 사용하기

 

 

 

 

 

 

 

 

 

 

AngularJS 에서 제공하는 $location!

URL 을 조작하거나, 페이지 이동기능에 많이 쓰이는 친구인데,

간단하게 정리해보자

 

 

 

 

 

 

 

 

[메소드]

 

 

1) absUrl()

 

• 전체 URL 을 return 한다
• getter 의 역할만 수행한다

//예시 URL : https://example.com:8080/#/12?category=901018

var temp = $location.absUrl();
// => "https://example.com:8080/#/12?category=901018"

 

 

 

 

 

 

 

2) url([url])

 

• 파라미터가 없다면, slash(/) 이후의 URL 을 return 한다
• 파라미터가 있다면, slash(/) 이후의 URL 을 변경한 후, $location 을 return 한다

//예시 URL : https://example.com:8080/#/12?category=901018

var temp = $location.url();
// => "/12?category=901018"

 

 

 

 

 

 

 

3) protocol()

 

• 현재 URL 의 프로토콜을 return 한다
• getter 의 역할만 수행한다

//예시 URL : https://example.com:8080/#/12?category=901018

var temp = $location.protocol(); 
// => "https"

 

 

 

 

 

 

 

4) host()

 

• 현재 URL 의 호스트를 return 한다
• getter 의 역할만 수행한다
• $location.host 는 hostname 까지만, location.host 는 hostname:port 까지 return 한다

//예시 URL : https://example.com:8080/#/12?category=901018

var temp = $location.host();
// => "example.com"

var temp2 = location.host();
// => "example.com:8080"

 

 

 

 

 

 

 

5) port()

 

• 현재 URL 의 포트를 return 한다
• getter 의 역할만 수행한다

//예시 URL : https://example.com:8080/#/12?category=901018

var temp = $location.port();
// => "8080"

 

 

 

 

 

 

 

6) path([path])

 

• 파라미터가 없다면, 현재 URL 의 path 를 return 한다
• 파라미터가 있다면, 현재 URL 의 path 를 변경한 후, $location 을 return 한다
• path 는 항상 slash(/) 로 시작되어야 하는데, 만약 slash(/) 가 없다면, slash(/) 를 추가한다

//예시 URL : https://example.com:8080/#/12?category=901018

var temp = $location.path();
// => "/12"

 

 

 

 

 

 

 

7) search(search, [paramValue])

 

• 파라미터가 없다면, 현재 URL 의 search 부분을 return 한다
• 파라미터가 있다면, 현재 URL 의 search 부분을 변경한 후, $location 을 return 한다

//예시 URL : https://example.com:8080/#/12?category=901018&filter=2

var temp = $location.search();
// => {category:901018, filter:2}

var temp = $ocation.search()[category];
// => "901018"

$location.search('memNo', 2020);
// => {category:901018, filter:2, memNo:2020}
// => https://example.com:8080/#/12?category=901018&filter=2&memNo=2020

$location.search('memNo', '');
// => {category:901018, filter:2, memNo:''}
// => https://example.com:8080/#/12?category=901018&filter=2&memNo=

$location.search('memNo', null);
// => {category:901018, filter:2}
// => https://example.com:8080/#/12?category=901018&filter=2

 

 

 

 

 

 

 

8) replace()

 

• 현재 URL 을 변경하며, history 기록에서도 변경된 URL 이 현재 URL 의 기록을 덮어쓴다

 

 

 

 

 

 

 

 

 

 

[이벤트]

 

 

1) $locationChangeStart

 

• 현재의 URL 이 변경되기 직전 broadcast 된다
• 파라미터로는 event / newUrl / oldUrl / newState / oldState 를 갖는다

$scope.$on("$locationChangeStart", function(event, newUrl, oldUrl, newState, oldState) {
    //event : 발생한 event 객체
    //newUrl : 새롭게 변경되는 URL
    //oldUrl : 변경되기 전 URL
    //newState : 새로운 history state 객체
    //oldState : 변경되기 전 history state 객체
})

 

 

 

 

 

 

 

2) $locationChangeSuccess

 

• URL 이 변경된 직후 broadcast 된다
• 파라미터로는 event / newUrl / oldUrl / newState / oldState 를 갖는다

$scope.$on("$locationChangeSuccess", function(event, newUrl, oldUrl, newState, oldState) {
    //event : 발생한 event 객체
    //newUrl : 새롭게 변경되는 URL
    //oldUrl : 변경되기 전 URL
    //newState : 새로운 history state 객체
    //oldState : 변경되기 전 history state 객체
})

 

 

 

 

 

 

 

 

 

 

 

 

 

AngularJS 의 이벤트  $broadcast & $on 이 궁금하다면?

https://devinserengeti.tistory.com/9?category=901018

[AngularJS] $broadcast & $on 사용법 / $broadcast 와 $emit 의 차이점