AngularJS 모듈 및 컨트롤러 정의

앞에서는 AngularJS를 사용했지만 이전 예제에는 JavaScript 스크립트가 없었다. 역시 본격적인 처리를 구현하려고 되면 “스크립트를 어떻게 조합하는지"가 중요하다.

모듈

AngularJS에는 “모듈"이라는 것을 사용하여 스크립트를 결합한다. 모듈이라는 것은 AngularJS에서 사용되는 “프로그램의 모음” 같은 것이다. AngularJS에는 프로그램은 모듈 단위로 결합한다. 모듈 안에는 몇 개의 작은 프로그램을 결합해 둘 수 있다.

AngularJS에는 ng-app라는 속성을 지정하여, 해당 태그에 AngularJS의 기능을 할당할 수 있었다. 이 ng-app를 사용하면, 모듈 이름을 지정할 수 있도록 되어 있다. 예를 들어,

<body ng-app="hoge">

이런 식으로 하면, 이 <body> 태그에 hoge 모듈의 기능을 사용할 수 있게 된다.

컨트롤러

모듈은 프로그램이 정리된 것이지만, 그 자체로 직접 뭔가 처리가 포함되는 것은 아니다. 일반적으로 이 모듈에 “컨트롤러(controller)“라는 것을 만든다.

컨트롤러는 다양한 작업 및 값을 정리한 객체이다. 이 컨트롤러에 메소드와 속성을 만들어 가는 것이 “AngularJS의 프로그램 작성"하는 거라고 할 수 있다. 모듈에 이 컨트롤러를 필요한 만큼 얼마든지 보관할 수 있다.

컨트롤러의 이용도 모듈과 같이 태그에 컨트롤러 지정을 작성한다. 이것은 ng-controller라는 속성을 사용한다.

<○○ ng-controller="컨트롤러 이름">

이것으로 이 <○○> 태그 내부에 지정한 컨트롤러를 사용할 수 있다. 모듈에는 여러 컨트롤러도 둘 수 있으므로, 필요에 따라 “이 부분에서는 A 컨트롤러"와 같이 사용 범위를 바꾸면서 사용할 수 있다. 물론 여러 컨트롤러를 동시에 사용할 수도 있다.

모듈 및 컨트롤러. 이 두 가지가 무엇인지를 이해하는 것이 AngularJS 개발의 첫 걸음이다.