Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 6. 모듈(Module) - AngularJS 강좌 본문

AngularJS_2

[AngularJS] 6. 모듈(Module) - AngularJS 강좌

날아올라↗↗ 2016. 6. 14. 14:03
728x90
반응형

모듈(Module)

 모듈은 대체로 관련된 기능을 하나로 묶어 다른 코드와 결합도를 줄이고 재사용성을 높이기 위해 사용합니다.


 최근에 자바스크립트에서는 코드의 복잡도를 낮추기 위해 많은 자바스크립트 라이브러리를 모듈화할 필요성이 생겼고, 모듈을 이용한 개발이 거의 필수가 되었습니다. jQuery 와 같은 많은 라이브러리는 모듈 패턴을 이용해 모듈로 구현되었고 많은 웹 앱 또한 모듈 패턴을 이용해 개발되었습니다.


 AJS에서도 이러한 모듈을 만들 수 있는 기능을 제공하고 별도의 모듈 패턴을 구현할 필요가 없는 API를 제공합니다. 다음은 모듈 선언 코드입니다.



1
2
angular.module("모듈이름", ["사용할 모듈", ...])
 
cs



 angular.module 함수를 사용해 모듈을 만들면 모듈 인스턴스가 반환되는데 해당 모듈 인스턴스는 컨트롤러, 서비스, 지시자, 필터들을 담습니다.


 다음은 모듈 인스턴스가 사용할 수 있는 메서드를 설명한 표입니다.








 모듈의 API를 보면 AJS에서 모듈의 의미를 어느 정도 파악할 수 있습니다. 간단히 말하자면 컨트롤러, 서비스, 필터, 지시자를 담는 그릇이라고 할 수 있겠습니다. 


 하나의 AJS 웹 앱은 하나의 모듈을 지정할 수 있습니다. 해당 모듈은 자바의 메인 메서드와 같은 역할을 하는 run 함수를 이용해 앱 시작에 대한 로직을 작성할 수 있습니다. 그리고 해당 앱에서 사용하는 컨트롤러, 서비스, 필터 그리고 지시자를 등록할 수 있습니다.



 1. 모듈을 이용한 컨트롤러 등록

  지금까지 예제에서는 컨트롤러 함수를 전역(Global) 영역에 선언해 사용했습니다. 


  앞으로는 모듈을 이용해 컨트롤러를 선언하고 해당 모듈을 사용하는 애플리케이션이 등록한 컨트롤러를 사용할 수 있습니다. 간단하게 북마크를 관리하는 컨트롤러를 만들어 봅시다.



 * ajsmodule.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html ng-app="ngBookmark">
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script type="text/javascript">
            angular.module('ngBookmark', []).controller("bookmarkListCtrl", ['$scope', function($scope) {
                $scope.bookmarkList = [
                    {id: "blog", name: "블로그", url: "palpit.tistory.com"},
                    {id: "google", name: "구글", url: "google.com"},
                    {id: "daum", name: "다음", url: "daum.net"}
                ];
            }]);
        </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>
cs








 - ng-app="ngBookmark"

  ng-app 지시자에는 해당 앱이 사용하는 모듈의 이름을 값으로 줄 수 있습니다.


 - .controller("bookmarkListCtrl", ['$scope', function($scope) {

  이름이 'bookmarkListCtrl'인 컨트롤러 함수를 등록합니다. angular.module() 함수를 사용하면 그 반환 값으로 module 인스턴스가 반환됩니다. 해당 인스턴스는 controller() 함수를 이용해 컨트롤러를 등록할 수 있습니다. controller() 함수의 첫 번째 인자는 컨트롤러 명이고, 두 번째 인자는 배열 또는 함수가 됩니다.




 2. 다른 모듈의 사용

  ng-app에 해당 앱이 사용하는 모듈명을 값으로 주었습니다. 배열로 준 것이 아니라 하나의 값이 들어가므로 하나의 앱에서는 하나의 모듈만 사용할 수 있는 것처럼 보입니다.


  그렇다면 재사용되는 코드의 단위를 좀 더 세세하게 쪼개어 여러 모듈로 만들고 싶을 때는 어떻게 할 수 있을까요?


  모듈을 선언하는 자바스크립트 API를 보면 사용할 모듈의 이름을 배열로 전달할 수 있습니다.


1
2
angular.module("ngBookmark", ["moduleA", "moduleB"])
 
cs



  위와 같이 ngBookmark 모듈을 선언할 때 해당 모듈이 참조하는 moduleA와 moduleB를 선언하는 것입니다. 사실 우리가 사용하는 ng-repeat, ng-select와 같은 지시자와 곧 배울 $http, $log와 같은 서비스 모두 기본 모듈인 ng 모듈에서 제공하는 것들입니다.


  하지만 기본 ng 모듈 이외에도 AJS에서 별도의 모듈(ngMock ngCookies, ngResource, ngSanitize)을 제공하고 있습니다. 아래 예제에서 ngCookie 모듈을 사용하는 예제를 살펴보도록 합시다.



 * ajscookie.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html ng-app="cookieDemo">
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/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>쿠키 서비스 사용</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>
 
cs






 - angular.module('cookieDemo', ['ngCookies'])

  'cookieDemo' 모듈을 선언할 때 ngCookies 모듈을 사용한다는 의미로 'ngCookies' 문자열을 값으로 가지는 배열을 두 번째 인자로 주었습니다.


 - .controller("mainCtrl", ['$scope', '$cookieStore', function($scope, $cookieStore) 

  ngCookies 모듈은 두 개의 서비스를 제공합니다. 하나는 $cookie이고 다른 하나는 $cookieStore입니다. $cookieStore 서비스를 사용하기 위해 컨트롤러 함수에 $cookieStore를 인자로 주었습니다. 





* 이 포스팅은 '시작하세요! AngularJS 프로그래밍'을 바탕으로 작성하였습니다

728x90
반응형
저작자표시

'AngularJS_2' 카테고리의 다른 글

[AngularJS] 7-2. 지시자(Directive) 응용 - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 7-1. 지시자(Directive) 기본 - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 2 - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 1 - AngularJS 강좌  (0) 2016.06.14
'AngularJS_2' Related Articles more