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-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>