Why Wijmo
왜 Angular App에서 Wijmo를 선택해야 할까요?
Quick Start
Angular에서 Wijmo 시작하기 🚀
1. Angular 앱 폴더로 이동 후, Wijmo 라이브러리를 설치합니다.
npm install @mescius/wijmo.angular2.all
2. Wijmo 컨트롤을 렌더링할 마크업을 구현합니다.
작업을 진행할 Angular 앱의 app.component.html 파일에 접근하여, 마크업을 구현합니다.
아래 코드는 Wijmo의 FlexGrid 컨트롤을 렌더링하는 코드입니다.
다른 컨트롤을 추가하고 싶은 경우, 아래에서 각 컨트롤 별 상세한 코드 샘플을 확인해 주세요.
<wj-flex-grid #flex [itemsSource]="data" style="height: 500px;" (initialized)="init()">
<wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" format="n2"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" format="n2"></wj-flex-grid-column>
</wj-flex-grid>
3. Wijmo 스타일 적용을 위한 css 파일을 추가합니다.
src/style.css 파일에 접근하여, Wijmo css 파일을 추가합니다.
import '@mescius/wijmo.styles/wijmo.css';
4. 사용할 Wijmo 모듈을 추가하고, 바인딩할 데이터를 정의합니다.
작업을 진행할 Angular 앱 main.ts 파일에 접근하여 Wijmo 모듈을 추가하고, Wijmo 컨트롤에 바인딩할 데이터를 정의합니다.
-
아래는 FlexGrid 모듈을 추가하는 코드입니다.
import { WjGridModule } from '@mescius/wijmo.angular2.grid';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
-
아래는 FlexChart 모듈을 추가하는 코드입니다.
import { WjChartModule } from '@mescius/wijmo.angular2.chart';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
-
아래는 FlexMap 모듈을 추가하는 코드입니다.
import { WjChartMapModule } from '@mescius/wijmo.angular2.chart.map';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
-
아래는 OLAP 모듈을 추가하는 코드입니다.
import { WjOlapModule } from '@mescius/wijmo.angular2.olap';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
-
아래는 Input 모듈을 추가하는 코드입니다.
import { WjInputModule } from '@mescius/wijmo.angular2.input';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
5. Angular 앱을 실행하여 결과를 확인합니다.
npm start
Angular Starter Template
커스터마이징이 가능한 Angular 샘플 & 템플릿을 통해서
빠르게 개발을 시작해보세요.
Wijmo를 활용한 다양한 템플릿과 샘플입니다. 실제 데모를 확인하실 수 있으며, 소스 코드를 다운로드하여 직접 커스터마이징하여 사용하실 수 있습니다.
React UI Control Designer
Wijmo 컨트롤을 쉽게 커스터마이즈해 보세요!
Wijmo 컨트롤 속성 편집기를 통해 Wijmo 컨트롤들의 설정을 쉽게 변경해보세요. 20가지 이상의 컨트롤들의 설정 값을 수정하고 확인해 볼 수 있습니다. 별도의 코딩 작업 없이도, 해당 설정을 다운로드 받아 여러분의 웹에 쉽고 빠르게 바로 적용이 가능합니다.
무엇이든 물어보세요!
MESCIUS의 전문가 그룹에게 Wijmo에 대한 막연한 고민과 궁금증을 들려주세요.
여러분들의 고민을 함께 공감하고 도움을 드리겠습니다.
Angular UI Control Online Study
Wijmo Angular UI 컨트롤의 다양한 적용 방법을 확인해 보세요.
-
Angular 웹 응용프로그램에서 DataGrid를 빠르게 만드는 방법
Wijmo를 활용하여 Angular 기반의 데이터 그리드를 생성하는 방법에 대해 단계적으로 설명합니다. 빠르게 Wijmo를 시작해 보세요.
-
반응형 Angular 대시보드 만들기
Angular에서 Wijmo 컨트롤을 이용하여 빠르게 반응하는 효율적인 대시보드를 만드는 방법에 대해 설명합니다. 그리드, 지도, 차트 등 다양한 컨트롤을 활용해 보세요.
-
Angular 모바일 웹 Datagrid를 위한 반응형 열 고정 방법
모바일 웹 개발 시, 작은 화면에서 애플리케이션의 열을 고정하려고 할 때 생기는 문제점과 그에 대한 해결책으로 DataGrid 열 고정을 반응형으로 만드는 방법에 대해 설명합니다.
