AngularJS, 전역 범위($rootScope)에 이벤트 핸들러 등록하기

var app = angular.module('someApp', ['ui.router']);
app.run(['$rootScope', '$state'], function ($rootScope, $state) {

  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options) {
    if ( ... ) { // 인증이 요구되는 스테이트일 경우
      $state.transitionTo('user.login');
      event.preventDefault();
  });
}]);

• AngularJS의 run() 메써드에 전달한 함수는 앱의 최초 부트스트래핑 과정에서 실행된다. 마치 Java의 main() 함수와 유사한 기능을 한다. run() 메써드의 실행 시점은 config()와 controller() 사이이다. 앱의 전체 스코프에 필요한 이벤트 핸들러 등을 작성할 때 유용하다.
• AngularJS는 $rootScope로 불리우는 단 1개의 스코프와 자손에 해당하는 복수개의 $scope를 제공한다. $rootScope의 범위는 바로 ng-app 디렉티브가 명시된 범위와 일치한다.
• $rootScope와 모든 자손 스코프에는 특정 이벤트에 대한 이벤트 핸들러 함수를 등록할 수 있다. 위의 경우 URL 라우팅의 스테이트 전환시 발생하는 $stateChangeStart에 대한 이벤트 핸들러를 등록한 예이다.

참고 글

• Understanding Angular’s $scope and $rootScope event system $emit, $broadcast and $on
• AngularJS State Management with ui-router
• angular-ui-router: State Manager