지난 글에서 서로 다른 controller에 있는 $scope는 다른 인스턴스이기 때문에 같은 이름의 변수라고 할지라도 다른 값을 가질 수 있다는 것을 보았습니다.

이번에는 다른 controller 사이에서 데이터를 공유하는 법을 알아보겠습니다.

아래와 같이 하지 않더라도 root scope에 저장하는 방법도 있습니다만, 항상 그렇듯이 global은 잘 쓰면 유용하지만 원치않는 결과를 만들어내는 경우가 많으므로 지양하는게 좋겠습니다.

public/javasscripts/main.js를 아래와 같이 수정합니다.
var firstApp = angular.module('FirstApp', []);
firstApp.factory('Data', function() {
        return {message: "I'm data from a service"}
});
firstApp.controller('FirstCtrl', function($scope, Data) {
        $scope.data = Data;
});
firstApp.controller('SecondCtrl', function($scope, Data) {
        $scope.data = Data;
});


'Data'라는 서비스를 만들어서 각 controller에 의존성 주입이 가능하도록 설정하였습니다.


이제 브라우저를 열어서 각각의 입력폼에 어떤 글자를 치면 모든 항목이 바뀌는 것을 볼 수 있습니다.



이렇게 구성을 하면 여러개의 controller 사이에 데이터를 공유할 수 있습니다.



이 게시물을...