[AngularJS] $watch로 path/hash 데이터 변화 감지하기

종종 현재 페이지에서 경로 변화가 있을때 이를 감지할 필요가 생긴다.
$watch 를 사용해서 어떤 변화가 생기는지 감시하고 있다가 변화가 생겼을 때 주소값을 분석해서 특정 처리를 해줄 수 있다.

사실 AngularJS에서 제공해주는 $routeParam 도 존재하는데, $routeParam의 경우 $routeProvider 를 사용할 때만 접근이 용이하기 때문에 사용에 제한이 많다.

아래와 같은 로직을 통해 해시 데이터의 변화를 감지하고, 전역객체를 사용하지 않고서도 비 AngularJS 관련 로직들과 값을 주고 받을 수 있다.

//[해시 데이터 변화 여부 감지]
$scope.$watch( 
    function () {
        return document.location.hash; 
    },
    function (parameter) {

        //해시 추출
        var _hash = parameter.split('?');

        //파라메터가 존재할 경우,
        if( _hash[1] ) {
        	
            //해시 파라메터 제거                
            document.location.href = _hash[0];
        	
            //해시 파라메터에서 루트와 파라메터 분리
            var _route = _hash[1].replace(/route=([^&]+).*/, "$1");
            var _param = _hash[1].replace(/param=([^&]+).*/, "$1");

            switch( _route ) {
                case 'test':
                    //여기는 "http://주소#/해시?test=value" 와 같은 형태일 때 실행된다.
                break;
            }
        }
    }
);

위의 로직을 활용하면, 기존 해시 이후에 ? 를 붙이고 다른 파라메터를 추가해도 감지가 가능해진다.