1. 개요
- 모듈은 대체로 관련된 기능을 하나로 묶어 다른 코드와 결합도를 줄이고 재사용성을 높이기 위해 사용한다.
- 모듈을 선언하는 코드
angular.module("모듈이름", ["사용할 모듈", ...])
- angular.module 함수를 사용해 모듈을 만들면 모듈 인스턴스가 반환되는데 해당 모듈 인스턴스는 컨트롤러, 서비스, 지사자, 필터들을 담는다.
* 참고 모듈 인스턴스 메서드
모듈 메서드 |
설명 |
Module.config(configFunction) |
모듈이 로딩될 때 호출되며 config 함수에 해당 익명 함수로 서비스를 설정할 수 있다. |
Module.constant(name, object) |
모듈에서 사용되는 상수를 등록한다. |
Module.controller(name, constructor) |
모듈에서 사용되는 컨트롤러를 등록한다. |
Module.directive(name, directiveFactory) |
모듈에서 사용되는 지시자를 등록한다. |
Module.factory(name, providerFunction) |
모듈에서 사용되는 서비스를 팩토리 형태로 등록한다. |
Module.filter(name, filterFactory) |
모듈에서 사용되는 필터를 등록한다. |
Module.provider(name, providerType) |
모듈에서 사용되는 서비스를 제공하는 프로바이더를 등록한다. |
Module.run(initializationFn) |
어플리케이션 초기화 함수를 등록한다. 모든 모듈의 등록을 완료했을 때 초기화 함수가 실행된다. |
Module.service(name, constructor) |
모듈에서 사용되는 서비스를 등록한다. |
Module.value(name, object) |
모듈에서 사용되는 객체를 등록한다. |
2. 모듈을 이용한 컨트롤러 등록
- 모듈을 이용해 컨트롤러를 선언하고 해당 모듈을 사용하는 어플리케이션이 등록된 컨트롤러를 사용할 수 있다.
<!DOCTYPE html>
<html ng-app="ngBookmark">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/lib/angular.js" ></script>
<script type="text/javascript">
angular.module('ngBookmark',[])
.controller('bookmarkListCtrl', ["$scope", function($scope){
$scope.bookmarkList=[
{id:"google", name:"구글", url:"www.google.com"},
{id:"naver", name:"네이버", url:"www.naver.com"},
{id:"daum", name:"다음", url:"www.daum.com"}
];
}]);
</script>
</head>
<body>
<div ng-controller="bookmarkListCtrl">
<h1>북마크 목록</h1>
<div>
<ul>
<li ng-repeat="bookmark in bookmarkList">
<em>{{bookmark.name}}</em>:<span>{{bookmark.url}}</span>
</li>
</ul>
</div>
</div>
</body>
</html>
ng-app="ngBookmark"
- ng-app 지시자에는 해당 어플리케이션이 사용하는 모듈의 이름을 값으로 줄 수 있다.
.controller('bookmarkListCtrl', ["$scope", function($scope){
- 이름이 bookmarkListCtrl인 컨트롤러 함수를 등록한다.
- controller()함수의 첫 번째 인자는 컨트롤러 명이고 두 번째 인자는 배열 또는 함수가 된다.
- 배열일 경우 배열의 0~n-1 번째 까지는 해당 컨트롤에서 사용하는 서비스 명을 문자열로 주고 마지막 n번째에서는 컨트롤러 함수가 와야 한다.
- 해당 컨트롤러 함수에서 사용할 서비스를 컨트롤러 함수의 인자로 작성하고 그 서비스의 이름을 배열에 이름으로 주는 것이다.
그래서 배열의 0~n-1 번까지의 문자열 개수가 컨트롤러 함수에서의 인자의 개수와 같아야 한다.
이렇게 배열에 사용하는 서비스명을 작성하는 이유는 자바스크립트 코드 찹추기인 minifier, uglifier에서 컨트롤러 함수 인자 문자열을 a, b, c 처럼 바꾸어 서비스 명을 제대로 전달하지 못하기 때문이다.
3. 다른 모듈의 사용
- ng-app에 해당 어플리케이션이 사용하는 모듈명을 값으로 주었다.
이는 하나의 어플리케이션에서 하나의 모듈만 사용하는 것처럼 보이지만 angularJS module 함수에서 어러 모듈을 참조할 수 있는 기능을 제공한다.
angular.module("ngBookmark", ["moduleA","moduleB"])
- 위와 같이 ngBookmark 모듈을 선언할 때 해당 모듈이 참조하는 moduleA와 moduleB를 선언하는 것이다.
사실 우리가 사용하는 ng-repeat, ng-select와 같은 지시자와 $http, $log와 같은 서비스 모두 기본 모듈인 ng 모듈에서 제공하는 것들이다.
우리가 모듈을 선언하면 기본적으로 ng 모듈을 사용하게 된다.
- 쿠키 모듈을 사용하는 예제
<!DOCTYPE html>
<html ng-app="cookieDemo">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/lib/angular.js" ></script>
<script type="text/javascript" src="js/lib/angular-cookies.js" ></script>
<script type="text/javascript">
angular.module('cookieDemo', ['ngCookies'])
.controller("mainCtrl", ['$scope', '$cookieStore', function($scope, $cookieStore){
$scope.value=$cookieStore.get("test")|| "없음";
$scope.getValue=function(){
$scope.value=$cookieStore.get("test");
};
$scope.putValue=function(iV){
$cookieStore.put("test", iV);
};
}]);
</script>
</head>
<body ng-controller="mainCtrl">
<h1>Cookie 서비스 사용</h1>
<p>test 키로 저장된 값 : {{value}}</p>
<button ng-click="getValue();">쿠키가져오기</button>
<br>
<input type="text" ng-model="iValue">
<button ng-click="putValue(iValue)">쿠키저장</button>
</body>
</html>
1) angular.module('cookieDemo', ['ngCookies'])
'cookieDemo' 모듈을 선언할 때 ngCookies 모듈을 사용한다는 의미로 'ngCookies' 문자열을 배열에 입력하였다.
2) .controller("mainCtrl", ['$scope', '$cookieStore', function($scope, $cookieStore){
ngCookies 모듈은 두 개의 서비스를 제공한다.
하나는 $cookie이고 다른 하나는 $cookieStore다.
$cookieStore 서비스를 사용하기 위해 컨트롤러 함수에 $cookieStore를 인자로 주었다. 그러면 AngularJS가 ngCookie 모듈이 제공하는 해당 서비스를 mainCtrl 컨트롤러에서 사용할 수 있게 $cookieStore 인자로 주입하여 준다.
3) $scope.value=$cookieStore.get("test")|| "없음";
"test" 키를 이름으로 가지는 값을 쿠키에서 가지고 온다. 없으면 "없음"을 $scope.value에 대입한다.
4) $cookieStore.put("test", iV);
"test"를 키로 하여 전달받은 값을 쿠키에 저장한다.
'AngularJS' 카테고리의 다른 글
| 17. 지시자 웹 표준 준수 대비 및 오래된 인터넷 익스플로러 지원하기 (0) | 2015.03.16 |
|---|---|
| 16. 지시자(directive) - 1 (0) | 2015.03.16 |
| 14. $scope -2 ($scope에서 사용자 정의 이벤트 처리) (0) | 2015.03.11 |
| 13. $scope -1 ($scope의 계층구조 및 $scope 타입) (0) | 2015.03.11 |
| 12. MVC - 모델, 뷰, 컨트롤러 (0) | 2015.03.10 |
