toggle menu

[AngularJS] 컨트롤러 간의 통신, 데이터 교환은 어떻게 해야할까?

2012.11.02 14:20 AngularJS

앵귤러JS는 보통 하나의 어플리케이션에 하나 혹은 그 이상의 모듈이 존재한다.
ng-app 지시어를 통해 이름을 설정한 모듈을 기본으로 서비스 모듈, 필터 모듈 등을 연결해서 사용하는 구조다.

또 이 모듈에 컨트롤러를 붙여서 화면 상에 조작이 필요한 부분을 통제하는데, 이런 컨트롤러가 여러 개일 경우 컨트롤러 상호간에 통신이나 데이터 교환의 필요성이 생기게 된다.

처음 앵귤러JS를 사용한다면, 이런 상황에서 어떻게 대처해야할지 막막하기 마련인데,
국내에는 관련 자료가 거의 없는 것으로 보이고,
스택오버플로우 같은 해외 사이트에 참고할만한 내용들이 있어 정리해본다.


서비스를 공유해서 해결하는 방법
http://jsfiddle.net/andytjoslin/7k3V5/

비교적 쉽게 적용 가능한 장점이 있는 방법이다.
보통 서비스의 경우 객체를 리턴하는 방식으로 사용한다. 또 이때 리턴되는 객체는 싱글톤 패턴이 적용되어 사용하는 곳에서 모두 동일한 객체를 사용하게 된다. 이런 특징을 사용해서 하나의 서비스를 공유해서 이 서비스 객체에 값을 설정하는 메서드와 값을 저장하는 변수를 두고 사용하게 된다.



부모 컨트롤러의 $scope를 사용해서 이벤트를 브로드캐스팅하는 방법
http://jsfiddle.net/laan_sachin/jnj6y/

이 방법도 꽤 직관적이다.
부모쪽에서 broadcast로 이벤트를 날리면 자식쪽에서 on으로 듣고 있다가 받아서 적용한다.
자식도 emit으로 이벤트를 날리면 부모도 on으로 듣고 있다가 반영한다.
그렇게 복잡하지 않고 서비스를 특별히 만들 필요가 없기 때문에 사용하기에는 더 편리해 보인다.



참고할 만한 스택 오버 플로우 글
http://stackoverflow.com/questions/9293423/can-one-controller-call-another-in-angularjs





AngularJS 관련 포스팅 더보기