ProAngularJS Ch.10 바인딩과 템플릿

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

AngularJS의 데이터 바인딩 및 템플릿 관리에 사용되는 디렉티브들에 대해 설명하고 있다. 디렉티브들은 자연스러운 표현 방식을 통해 복잡한 웹애플리케이션을 구현할 수 있는 기초를 만들어준다.

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

  • 처리되지 않은 템플릿 바인딩 표현식 숨기기
    : ng-cloack
  • 조건에 따른 엘리먼트 대체
    : ng-switch와 on, 그리고 ng-switch-when과 ng-switch-default
    : 처음에는 ng-include보다 ng-switch를 쓰는 방식이 좋다
  • 부분뷰 사용
    : ng-include (정적/동적)
  • 반복 엘리먼트 생성
    : ng-repeat 및 내장변수(index, first, last, middle, even, odd)
    : ng-repeat-start, ng-repeat-end
  • 양방향 바인딩
    : ng-model
  • 단방향 바인딩
    : 인라인 바인딩, ng-bind, ng-bind-template
  • 바인딩 금지
    : ng-non-bindable

정적과 동적바인딩에 대한 예제 화면은 다음과 같다.
ProAngularJS-ch10-BindTemplate1

반복구문 및 부분뷰, 선택적뷰에 대한 예제 화면은 다음과 같다.
ProAngularJS-ch10-BindTemplate2

이에 대한 소스코드이다.

1) directives.html

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <title>Directives - ProAngularJS</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
  

    angular.module("exampleApp", [])
      .controller("defaultCtrl", function($scope) {

        $scope.data = {};

        $scope.todos = [
          { action: "Get groceries", complete: false },
          { action: "Call plumber", complete: false },
          { action: "Buy running shoes", complete: true },
          { action: "Buy flowers", complete: false },
          { action: "Call family", complete: false }
        ];

        $scope.viewFile = function() {
          return $scope.showList ? "directives-list.html" : "directives-table.html";
        };

        $scope.reportChange = function() {
          console.log("Displayed content: "+$scope.viewFile());
        };

      });

  
  <style type="text/css">
    .odd { background-color: lightcoral }
    .even { background-color: lavenderblush }
  </style>
</head>
<body>
  

To do List

There are {{ todos.length }} items.
<!-- span 엘리먼트를 통해서도 ng-bind 디렉티브를 사용할 수 있다 -->
There are items. There are items.
<!-- 사용할 일이 없다 -->
<!-- 이중괄호 안의 'and' 를 바인딩 속성으로 처리하지 못하게 한다 -->
AngularJS uses {{ and }} characters for templates
<hr /> <!-- =================================================== --> <!-- ==== * 양방향 바인딩 디렉티브들 ==== --> <!-- =================================================== -->
The first item is: {{ todos[0].action }}
</div> <!-- 양방향 바인딩이 적용될 수 있는 엘리먼트: input, textarea, select 등 -->
Set First Item :
<hr /> <!-- =================================================== --> <!-- ==== * 템플릿 디렉티브들 ==== --> <!-- =================================================== --> <table class="table"> <thead> <tr> <th>#</th> <th>Action</th><th>Done</th> </tr> </thead> <!-- ng-repeat 내의 변수를 활용할 수 있다 : $index, $first, $middle, $last, $even, $odd --> <tbody> <tr ng-repeat="item in todos"> <td>{{ $index + 1 }}</td> <td>{{ item.action }}</td> <td><span ng-if="$first || $last">{{ item.complete }}</span></td> </tr> </tbody> <!-- ng-repeat을 중첩으로 사용할 수도 있다 --> <tbody> <tr ng-repeat="item in todos" ng-class="$even ? 'even' : 'odd'"> <td>{{ $index + 1 }}</td> <td ng-repeat="prop in item">{{ prop }}</td> </tr> </tbody> <tbody> <tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'"> <td>{{ $index + 1 }}</td> <td ng-repeat="(key, value) in item"> {{ key }} = {{ value }} </td> </tr> </tbody> <tbody> <tr ng-repeat-start="item in todos"> <td>{{ $index + 1 }}</td> <td colspan="2">This is item {{ $index }}</td> </tr> <tr> <td>{{ $index + 1 }}</td> <td colspan="2">The action is: {{ item. action }}</td> </tr> <!-- ng-repeat-end 어트리뷰트가 나올때 까지 tr을 반복한다 --> <tr ng-repeat-end> <td>{{ $index + 1 }}</td> <td colspan="2"> Item {{ $index }} is {{ $item.complete ? '' : "not " }} complete </td> </tr> </tbody> </table> <hr /> <!-- =================================================== --> <!-- ==== * 부분뷰 활용 ==== --> <!-- =================================================== --> <!-- ng-include 태그는 반드시 열기 닫기로 표기해야 한다. < /> 표현 안됨 --> <!-- 부분뷰의 파일명도 반드시 (')를 좌우해 표기해야 한다. (값이다!) --> <!-- 정적 삽입 : 파일명 직접 지정 --> <ng-include src="'directives-table.html'"></ng-include>
Use the list view
</div> <!-- 동적 삽입 : 파일명을 함수를 통해 간접 지정 --> <!-- ng-include 태그에서 활용할 수 있는 어트리뷰트: onload, autoscroll --> <ng-include src="viewFile()" onload="reportChange()"></ng-include> <hr /> <!-- =================================================== --> <!-- ==== * 조건에 따른 콘텐츠 전환 ==== --> <!-- =================================================== -->
{{ button }}
</div> <!-- ng-switch-when 와 ng-switch-default를 이용해 switch 구문을 작성한다 -->
Select another option to display a layout.
</div> </div> </body> </html>

부분뷰로 사용된 별도의 파일 directives-table.html과 directives-list.html은 중복되는 코드이므로 생략한다.

답글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

%s에 연결하는 중

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