[AngularJS] 2. AngularJS의 모듈

모듈(Module)이란?

모듈은 관련된 기능을 하나로 묶은 것을 말한다.

관련된 기능을 하나로 묶어 모듈화를 하면 재사용성이 높아지게되고, 유지보수가 쉬워지게 된다.

 

AngularJS에서 최상위 모듈을 생성하면 하위 모듈을 생성하고 관리할 수 있는 기능을 제공한다.

---

모듈 사용 예제

 

위 예제는 ngModule와 ngController를 이용하여 데이터 초기 바인딩을 하는 예제이다.

LINE 6

AngularJS에서 모듈화를 하기 위해선 6번 라인과 같이 선언문을 작성해준다.

ng-app 디렉티브에 해당 앱이 사용할 모듈 이름 값으로 모듈을 생성하면된다.

ex) angular.module('모듈이름', ["사용할 모듈", ...]);

 

이렇게 모듈을 만들면 모듈 인스턴스가 반환되는데

해당 모듈 인스턴스가 사용할 수 있는 메서드는 아래의 표에 나와있다.

출처 https://palpit.tistory.com/entry/AngularJS-6-%EB%AA%A8%EB%93%88Module-AngularJS-%EA%B0%95%EC%A2%8C

---

LINE 8~10

module.controller 를 통해 testCtrl라는 컨트롤러 함수를 등록하였다.

controller() 함수의 첫번째 인자는 컨트롤러 이름이고, 두번째 인자는 배열 또는 함수가 된다.

 

컨트롤러의 지정 범위는 태그의 속성으로 ng-controller라는 디렉티브로 컨트롤러에 의해 관리할 범위를 선언하면된다.

 

여기서 $scope는 컨트롤러나 디렉티브의 유효범위내의 저장공간이라고 해석하면 된다.

뷰는 $scope를 통해 컨트롤러 내부에 정의된 모델(데이터)나 핸들러 함수에 접근할 수 있다.

즉 뷰에서는 해당 컨트롤러(testCtrl)의 scope에서 모델과 핸들러 함수를 찾게되는 것이기에

testCtrl에서 정의한 scope의 name이라는 데이터를 뷰에서 접근하여 표시할 수 있는 것이다.

---

RESULT