angularjs에서 동일한 컨트롤러의 내용을 나누어 선언하는 방법?

Last Modified : 2017-03-28 / Created : 2017-03-06

1,879
View Count

주소 복사하기

AngularJS에서 하나의 컨트롤러가 선언되었다고 생각해보자.. 만약 똑같은 컨트롤러에 추가할 내용이 있어서 그 아래에 다시 동일한 컨트롤러를 선언하고 내용을 추가하면 어떻게 될까? 또 과연 새롭게 추가된 내용이 먼저 선언한 내용과 함께 추가될까? 만약 그렇지 않다면 그 방법은 어떻게 될지 알아보고자 한다.

먼저 분할하여 선언한다는 것은 아래와 같이 사용한다는 것을 의미한다. 만약 appCtrl이라는 컨트롤러가 존재하고 여기에 각각의 변수를 선언하고자 한다면 아래와 같다. 먼저 html 코드이다.

<div ng-controller="appCtrl">
  <p>a - {{ a }}</p>
  <p>b - {{ b }}</p>
</div>

아래는 appCtrl이라는 동일한 controller에 각각의 변수 $scope.a 그리고 $scope.b를 선언한 모습이다.

// Script 내용
var app = angular.module('myApp', []);
app.controller('appCtrl', function() {
  $scope.a = 1;
});

app.controller('appCtrl', function() {
  $scope.b = 1;
}

위와 같이 실행하면 어떻게 될까? 그 결과부터 얘기하면 우리가 기대했던 것과는 달리 $scope.a는 없어지고 $scope.b만 남게된다. 즉, 동일한 컨트롤러를 선언할 경우 추가되는 것이 아니라 대체되는 것이다.

어찌보면 당연한 결과이다. 혹시라도 다른 방법이 없을까 생각해보았지만 딱히 방법이 없다. 그리고 있다하더라도 나중에 이를 잊는다면 문제의 소지가 발생할 수 있다. 그럼 어떻게 하면 좋을까? 간단한 방법으로 다른 컨트롤러명을 사용하는 것이다.

컨트롤러를 appCtrl, 그리고 nextCtrl 처럼 변경할 경우 html에 두개의 컨트롤러를 선언해야하는 번거로움이 있을 수 있지만 사실 해당하는 컨트롤러에 해당하는 변수를 선언하는 것이 당연한 이치이다. AngularJS는 범위 지향적 언어이므로 다른 방법을 찾는 것보다 이를 활용하는 것이 더 타당할 수 있을 것이다.

# 그 외의 방법
또 다른 방법을 찾는다면 $scope에 존재하는 $emit(), $broadcast() 메소드를 사용할 수 있다. 이는 scope 즉 범위를 전달하는 AngularJS의 내부 서비스들이다. 이를 사용하여 서로 다른 스콥이더라도 원하는 변수를 전달 받는 방법이 가능하다.

$scope.$emit() 그리고 $broadcast()는 다음에 알아보도록 하겠다.

아래의 글도 찾고 계시지 않나요?

자바스크립트 코딩 스타일 중 알아두면 좋은 것들

자바스크립트 중단점을 활용한 디버깅 방법