AngularJS Module (모듈)
Module
대부분의 애플리케이션에는 main이 있지만 Angular에는 main이 없다.
하지만 Angular 어플리케이션은 시작할 때 정의한 모듈을 읽는다
AngularJS Module의 정의와 역할
- 모듈은 AngularJS의 주요 기능에 대한 게이트웨이의 역할을 하는 AngularJS 애플리케이션의 최상위 레벨 컴포넌트이다.
- HTML 페이지를 AngularJS 응용프로그램으로 확장시키기 위한 진입점이다.
- HTML 페이지와 AngularJS가 상호작용하기 위한 매개체이다.
- 연관된 각종 컴포넌트를 포함하는 컨테이너이다.
- AngularJS 응용프로그램의 구성을 논리적으로 조직화하는 단위이다.
- 모듈화 프로그래밍을 지원하는 AngularJS의 아키텍처 지원 기능을 갖는다.
Module 생성
//모듈 생성
angular.module("모듈이름", ["사용할 모듈", ...])
//생성한 모듈 가져오기
var app = angular.module("myApp");모듈 생성과 로딩은 모두 angular.module 함수를 통해 이뤄진다. 첫 번째 매개변수는 모듈 이름을 지정하며 두 번째 매개변수는 해당 모듈과 연관된 서브모듈을 배열으로 지정할 수 있다.
서브모듈 지정은 모듈을 생성할 때만 지정 가능하다.
Module 컴포넌트
- 모듈은 연관된 각종 컴포넌트를 포함하는 컨테이너 역할을 하며, 이렇게 필요에 의해 추가된 컴포넌트들을 이용하여 HTML페이지를 동적인 MVC 어플리케이션으로 동작시킬 수 있다.
- angular.module 함수를 사용해 모듈을 만들면 모듈 인스턴스가 반환되는데 해당 모듈 인스턴스는 컨트롤러, 서비스, 지사자, 필터등을 추가하는 방식으로 동작한다.
다음 그림은 모듈을 통해 구성가능한 컴포넌트를 보여준다
AngularJS Module은 위 그림과 같은 컴포넌트를 추가하여 사용하고 있다.
모듈 객체의 멤버를 정리하면 아래와 같다.
|
멤버 이름 |
역할 |
|
animation(name,factory) |
애니메이션 기능 지원 |
|
config(callback) |
모듈을 설정할 때 필요한 함수 등록 |
|
constant(key,value) |
모듈에 필요한 상수값을 반환 |
|
controller(name,constructor) |
모듈에 등록할 컨트롤러를 생성 |
|
directive(name,factory) |
표준 HTML을 확장한 디렉티브 생성 |
|
factory(name,provider) |
서비스를 생성해줌 |
|
filter(name,factory) |
뷰와 연계되는 과정에서 데이터를 포매팅하는 필터 생성 |
|
provider(name,type) |
factory와 같이 서비스를 생성 |
|
name |
현재 모듈의 이름을 반환 |
|
run(callback) |
AngularJS의 로드와 설정이 마무리 된 뒤 호출될 함수를 등록 |
|
service(name,constructor) |
서비스를 생성 (provider 및 factory와 동일한 역할) |
|
value(name,value) |
상수값을 반환 |
Module 사용
다음은 서브모듈을 사용한 예제를 살펴보자
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
// MyApp 이라는 메인 module 생성
// 이 모듈이 의존하는 서브모듈(MyApp.User, MyApp.Common)을 배열로 전달
var myApp = angular.module("MyApp", ["MyApp.User", "MyApp.Common"]);
//module에 컨트롤러 정의
myApp .controller("MainCtrl", function(userlist, APPLICATION_CONFIG){
var main = this;
main.users = userlist.getUsers();
main.appConfig = APPLICATION_CONFIG;
});
// MyApp.User 이라는 서브 module 생성
var userModule = angular.module("MyApp.User", []);
userModule.service('userlist', function(){
var user = this;
var mock = [
{name: 'DEV', city: 'Seoul'},
{name: 'DOO', city: 'Busan'},
];
user.getUsers = function(){
return mock;
};
})
// MyApp.Common 이라는 서브 module 생성
var commonModule = angular.module("MyApp.Common", []);
commonModule.constant("APPLICATION_CONFIG", {config1: "dev", config2: "Doo"});
</script>
<body>
<div ng-app="MyApp" ng-controller="MainCtrl as main">
<h1>Users</h1>
<ul>
<li ng-repeat="user in main.users">
{{user.name + ', ' + user.city}}
</li>
</ul>
<div>{{ main.appConfig.config1 + ", " + main.appConfig.config2 }}</div>
</div>
</body>
</html>
다음 코드예제는 AngularJS Module을 이용해 모듈을 역할별로 분리하고 이를 조합하여 구성한 즉 모듈화 프로그램을 작성한 예이다.
먼저 MyApp이라는 메인 모듈을 생성하고 이 모듈이 의존하는 서브모듈(MyApp.User, MyApp.Common)을 배열로 전달한다.
MyApp.User 모듈은 사용자정보를 추상화한 모듈이며, MyApp.Common 모듈은 전체 응용프로그램에 공통적으로 사용될 상수를 정의한 모듈이다.
이 각각의 모듈은 메인모듈의 서브모듈로 등록되어 메인모듈의 컨트롤러의 생성자 함수에 서브모듈의 컴포넌트가 주입되는 방식으로 동작한다.
출력 된 결과는 다음과 같다.
* w3에서 제공하는 angularJS Module Tutorial을 번역한 아래 페이지를 참고하는것도 좋을듯 싶다.
- 참고 :
'Dev > Dev:: JavaScript' 카테고리의 다른 글
| [AngularJS 1.x] AngularJS - 05. 지시자(Directive) (0) | 2017.02.22 |
|---|---|
| [AngularJS 1.x] AngularJS - 04. $scope (0) | 2017.02.22 |
| [AngularJS 1.x] AngularJS - 02. 이해하기 (0) | 2017.02.21 |
| [AngularJS 1.x] AngularJS - 01. 소개 (0) | 2017.02.21 |
| [TypeScript 타입스크립트] - 유용한 Link (0) | 2016.06.21 |
