※ 실행결과: 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
정적과 동적바인딩에 대한 예제 화면은 다음과 같다.
반복구문 및 부분뷰, 선택적뷰에 대한 예제 화면은 다음과 같다.
이에 대한 소스코드이다.
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은 중복되는 코드이므로 생략한다.
%d 블로거가 이것을 좋아합니다:
