AngularJS 지시자

참고 npm에서 설치하는 것 외에도 Wijmo Dev Kit을 다운로드하는 것을 적극 권장합니다. 개발 키트에는 소스 코드, 참조 앱 등이 포함된 수백개의 샘플이 포함되어 있습니다.

Wijmo 팀은 자바 스크립트 애플리케이션 용 Google 프레임 워크 인 AngularJS의 열렬한 팬입니다. AngularJS는 템플릿, 데이터 바인딩, MVVM, 웹 구성 요소 등을 제공합니다.

AngularJS는 템플릿, 데이터 바인딩, MVVM, 웹 구성 요소 등을 제공합니다.

AngularJS의 주요 장점 중 하나는 응용프로그램 논리가 모델 (일명 JavaScript로 구현된 컨트롤러)에 포함되고 모양이 뷰(HTML)에 포함되는 MVVM 패턴을 지원한다는 것입니다.

이를 달성하기 위해 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 지시문을 사용하려면 Wijmo 참조 주제에 설명된대로 AngularJS, Wijmo 및 Wijmo의 AngularJS 지시문에 대한 참조를 추가하십시오 .

참조되었으면, AngularJS에 다음과 같은 코드를 사용하여 앱이 "wj"모듈에 의존한다는 것을 AngularJS에 알려주십시오.

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

앱이 정의된 상태에서 AngularJS 애플리케이션과 마찬가지로 데이터와 로직을 제공하는 컨트롤러를 추가할 수 있습니다.

모든 Wijmo 지시문은 "wj" 접두사로 시작하고 그 뒤에 대시를 사용하여 컨트롤의 클래스 이름이 옵니다. 지시문에는 동일한 규칙에 따라 컨트롤의 속성과 일치하는 특성이 있습니다.

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