AngularJS Routing, 라우팅 관련 이벤트 알아보기

AngularJS를 사용하여 라우팅(Route)을  사용하는 경우 이와 관련된 다양한 이벤트를 제어 및 동작할 수 있습니다. 아래는 route 시작, 업데이트 등등의 관련 이벤트를 자세히 알아보도록 하겠습니다.

# Route 라우팅 관련 이벤트 알아보기

먼저 route에 사용할 수 있는 이벤트로 아래와 같이 4가지가 존재합니다. 각각 조금씩 다른 동작의 이벤트를 구현합니다.

# route 이벤트 동작 예제보기

아래 예제를 봐주세요. 가장 보편적인 $routeChangeStart를 사용한 이벤트입니다. route가 시작되면 이벤트가 동작합니다. 여기서는 Route Change Starting !!이라는 문구를 출력합니다.


위 예제와 같이 간단하게 만들어 보았습니다. 그럼 이런 이벤트는 언제필요할까요?

# Route 이벤트를 사용하는 경우는?

다양한 경우가 있겠지만 아래와 같은 경우에 많이 사용됩니다.

• Route 변경시 기존에 pending되어 있는 이벤트를 제거하기
• 3rd Party Library 제거 및 AngularJS 이외의 이벤트 바인딩을 제거하기

특히 SPA(Single Page Application)에서 AngularJS를 사용하지 않고 엘리먼트에 이벤트를 바인딩하면 메모리 누수(Memory Leaking)이 발생할 수 있어 이런 코드를 추가해두는 것 역시 좋은 방법 중 하나입니다.