ProAngularJS Ch.09 AngularJS 해부

※ 실행결과: http://study.jeju.onl/example.html

AngularJS의 중요 구조와 함수들에 대해 설명하고 있다.

다루어진 내용은 다음과 같다.

  • 모듈 생명주기 활용
    : constant, config, run
  • 모듈을 활용한 코드 조직화
    : 모든 종류를 module로 개별 선언하여 DI로 참조 사용
  • AngularJS 컴포넌트 정의
    : directive, filter, value, service
  • 다중 컨트롤러 생성
  • 다중 뷰 생성
  • 뷰에 컨트롤러 적용
  • 컨트롤러 정의
  • 모듈 활용

다음과 같이 출력되는 간단한 예제를 가지고 설명하고 있다.
ProAngularJS-ch09-AngularJS_Components

이에 대한 예제 코드이다.
보기 편하라고(?) 주석을 잔뜩 달아놓았다.

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <title>AngularJS DEMO</title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  /node_modules/angular/angular.js
  /node_modules/angular/angular-route.js
  

    // module은 최상위 레벨 컨포넌트: AngularJS 프레임워크의 게이트웨이 역활
    // Module 메서드는 팩토리 함수를 인자로 받는다
    var myApp = angular.module("exampleApp", []);

    // 각 요소들을 모듈로 생성하여 의존성 배열에 넣을 수도 있다
    //var myApp = angular.module("exampleApp", ["exampleApp.Controllers"
    //	, "exampleApp.Filters", "exampleApp.Services", "exampleApp.Directives"]);

    // .constant: config()에 의존성으로 삽입될 대상을 정의한다
    myApp.constant("startTime", new Date().toLocaleTimeString());
    // .config: 현재 모듈이 로드될 때 호출됨
    myApp.config( function(startTime) {
      console.log("Main module config: " + startTime);
    });
    // .run: 모든 모듈이 로드될 때마다 호출된다
    myApp.run( function(startTime) {
      console.log("Main module run: " + startTime);
    })

    // 콘트롤러: 모델과 뷰를 연결
    // 팩토리 함수: 컨트롤러를 설정하고 사용할 수 있게 해준다. (의존성)
    /*
    myApp
    .controller("dayCtrl", function($scope) {
      var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday"
              , "Thursday", "Friday", "Saturday"];
      $scope.day = dayNames[new Date().getDay()];
      //$scope.tomorrow = dayNames[(new Date().getDay() + 1) % 7];
    })
    // 플루언트 API: 체인 형태로 실행 (별개로 적어도 되지만)
    .controller("tomorrowCtrl", function($scope) {
      var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday"
              , "Thursday", "Friday", "Saturday"];
      $scope.tomorrow = dayNames[(new Date().getDay() + 1) % 7];
    });
    */

    // 서비스 days를 인자로 받아 사용
    // 즉, 서비스를 이용하고 싶으면 인자로 의존성 주입을 하면 된다
    myApp.controller("dayCtrl", function($scope, days) {
      $scope.day = days.today;
    });
    myApp.controller("tomorrowCtrl", function($scope, days) {
      $scope.day = days.tomorrow;
    });

    // directive 메소드도 팩토리 함수를 인자로 받는다
    myApp.directive("highlight", function($filter) {

      // $filter 함수를 이용해 어디서나 정의된 필터를 사용할 수 있다
      var dayFilter = $filter("dayName");

      return function( scope, element, attrs) {
        if (dayFilter(scope.day) == attrs["highlight"]) {
          // element: AngularJS에 들어가 있는 경량 버전의 jqLight 객체
          element.css("color", "red");
        }
      };
    });

    myApp.filter("dayName", function() {
      var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday"
              , "Thursday", "Friday", "Saturday"];
      return function(input) {
        return angular.isNumber(input) ? dayNames[input] : input;
      };
    });

    // Module.value 메서드: 고정값 및 객체를 반환하는 서비스를 생성
    var now = new Date();
    myApp.value("nowValue", now);

    // 서비스: 싱글턴 객체 (중복기능을 정의하여 필요할 때 사용)
    myApp.service("days", function() {
      //this.today = new Date().getDay();
      // new Date() 대신에 nowValue라는 객체반환 서비스를 이용하였다
      this.today = nowValue.getDay();
      this.tomorrow = this.today + 1;
    });

  
</head>
<body>
  <!--
  
-->
<!-- <h4>Today is '{{ day || "(unknown)" }}'</h4> --> <h4 ng-controller="dayCtrl" highlight="Tuesday"> Today is '{{ day || "(unknown)" | dayName }}' </h4> <h4 ng-controller="tomorrowCtrl"> Tomorrow is '{{ day || "(unknown)" | dayName }}'</h4> </div> </body> </html>

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: