AngularJS 지시자

type=warning

사용 중단 안내 : AngularJS는 2022년 1월부터 지원이 종료되었습니다. 따라서 2024v2 릴리즈부터 Wijmo는 AngularJS 상호 운용성을 더 이상 게시하지 않습니다. Wijmo는 최신 Angular 버전을 지원하므로, 최신 버전의 Angular를 사용하시기 바랍니다.

Wijmo 팀은 구글의 JavaScript 애플리케이션 프레임워크인 AngularJS를 좋아합니다. AngularJS는 템플릿화, 데이터 바인딩, MVVM, 웹 컴포넌트 등을 제공합니다.

AngularJS의 주요 장점 중 하나는 MVVM 패턴을 지원한다는 점입니다. 이 패턴에서는 애플리케이션 로직이 모델(또는 컨트롤러, JavaScript로 구현됨) 안에 포함되고, 화면은 뷰(HTML)에 포함됩니다.

이를 달성하기 위해 AngularJS는 사용자 정의 HTML 요소와 속성인 지시어를 지원합니다. AngularJS는 여러 가지 내장 지시어를 제공하며, WinForms나 XAML 애플리케이션에서 자신의 컨트롤을 만드는 것처럼 쉽게 자신만의 지시어를 구현할 수 있습니다.

Wijmo는 모든 컨트롤에 대한 AngularJS 지시어를 제공합니다. 지시어는 wijmo.angular.js 파일에 정의되어 있으며, 다음과 같은 코드를 작성할 수 있게 해줍니다:

<div ng-app="app" ng-controller="appCtrl">
    
<p>This is a <b>FlexGrid</b> control:</p>
<wj-flex-grid items-source="data">
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
    <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
    <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
    <wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column>
</wj-flex-grid>
</div>

AngularJS 애플리케이션에서 Wijmo 사용하기

프로젝트에서 Wijmo Angular 지시어를 사용하려면, AngularJS, Wijmo, 그리고 Wijmo의 AngularJS 지시어에 대한 참조를 추가해야 합니다. 자세한 내용은 Wijmo 참조 주제를 참조하세요.

참조가 설정된 후에는 다음과 같은 코드를 사용하여 AngularJS에 앱이 "wj" 모듈에 의존한다고 알려야 합니다:

var app = angular.module('app', ['wj']);

앱이 정의되면, AngularJS 애플리케이션과 마찬가지로 데이터를 제공하고 로직을 처리할 컨트롤러를 추가할 수 있습니다.

모든 Wijmo 지시어는 "wj" 접두사로 시작하며, 이후에는 컨트롤의 클래스 이름이 camel-case 대신 대시(-)를 사용하여 표기됩니다. 지시어는 컨트롤의 속성과 일치하는 속성을 가지며, 동일한 규칙을 따릅니다.

일부 지시어는 중첩된 하위 지시어를 지원합니다. 예를 들어, wj-flex-grid 지시어는 하나 이상의 wj-flex-grid-column 지시어를 포함할 수 있으며, wj-flex-chart 지시어는 하나 이상의 wj-flex-chart-series 지시어를 포함할 수 있습니다. 이는 XAML과 매우 유사한 풍부하고 표현력 있는 마크업 구문을 제공합니다. 이 유연성은 MVVM의 진정한 이점을 달성하는 데 필수적입니다. 컨트롤의 모양과 레이아웃은 뷰에 의해 정의되며, 컨트롤러는 데이터만 제공합니다.