AngularJS 페이지 이동없이 URL 변경하기

AngularJS 페이지 이동없이 URL 변경하기

개발환경

Mac OS X 10.9.4
AngularJS 1.3.0-rc.3

페이지 이동없이 url 만 변경하는 방법이다.

빙글이라는 사이트를 예로 설명한다면, 목록에서 게시물을 선택하면 페이지 이동없이 modal 이 활성화되면서 게시물 상세정보가 보여진다. 그리고 브라우저 url 도 동시에 변경된다.

사용자 편의를 위해 상세페이지 정보 URL도 보여주기 위한 작업이다.

app.run(['$rootScope', '$location', '$route',
    function($rootScope, $location, $route) {

        // false 인 경우 리로드하지 않고 url만 변경.
        var original = $location.path;
        $location.path = function (path, reload) {
            if (reload === false) {
                var lastRoute = $route.current;
                var un = $rootScope.$on('$locationChangeSuccess', function () {
                    $route.current = lastRoute;
                    un();
                });
            }

            return original.apply($location, [path]);
        };
    }
]);

// 컨트롤러에서 아래와 같이 사용하면 된다. false 인 경우 페이지 이동하지 않는 다.
$location.path('/post/' + post.id, false);

yaku Blog by Seok Kyun. Choi. 최석균.