Wijmo 및 NPM으로 Angular 앱을 빌드하는 방법
페이지 정보
작성자 GrapeCity
작성일 2020-08-27 14:37 조회 4,719회
댓글 0건
본문
관련링크
Wijmo 및 NPM으로 Angular 앱 빌드
이 시리즈에서는 NPM 및 Webpack 과 함께 Wijmo를 사용하여 가장 인기 있는 JavaScript 애플리케이션 프레임워크를 대상으로 애플리케이션을 만드는 방법을 보여줍니다. 이 블로그는 웹, 모바일 또는 데스크탑에 있는 자바스크립트 애플리케이션을 구축하기 위한 Google의 프레임워크인 Angular에 중점을두고 있으며, 이 모든 기능을 갖춘 프레임워크는 선언적 템플릿, 종속성 주입을 결합하고 엔드 투 엔드 도구를 포함합니다.
블로그 시리즈
이 튜토리얼에서는 NPM, Webpack 또는 Angular 자체에 대해 자세히 설명하지 않습니다. 이러한 모든 도구는 매우 인기가 있고 철저하게 문서화되어 있으며, 좋은 개요를 위해 프레임 워크에 대한 e-book에 읽을 수는 있습니다. 대신 Angular로 작성된 간단한 애플리케이션에 Wijmo를 추가하는 작업에 초점을 맞출 것입니다.
애플리케이션을 만들고 유지하는 기본 단계는 모든 프레임워크에서 동일합니다.
적절한 CLI (Command-Line Interface utility)를 설치하여 응용 프로그램을 생성, 실행, 유지 관리 및 배포합니다.
CLI를 사용하여 애플리케이션을 만듭니다.
NPM을 사용하여 Wijmo를 애플리케이션에 추가합니다.
사용할 구성 요소를 가져오고 적절한 마크업을 추가합니다.
1 단계 새 Angular 앱 만들기
다음 단계에 따라 새 Angular 앱을 만들고 실행하십시오.
| 단계 | 명령 |
| CLI 설치 | npm install -g @angular/cli |
| 앱 만들기 | ng new my-angular-app |
| 앱 폴더로 이동 | cd my-angular-app |
| 앱에 Wijmo 추가 | npm install @grapecity/wijmo.angular2.all |
| 앱 시작 | ng serve |
| 브라우저에서 앱보기 | http://localhost:4200 |
브라우저에서 실행 중인 앱이 표시되어야 합니다. 앱 편집을 시작하겠습니다. 변경 사항을 저장하면 브라우저가 자동으로 앱을 다시 로드합니다.
2 단계 Wijmo 모듈 추가
"src/app/app.module.ts"파일을 열고 그리드 및 차트에 대한 Wijmo 모듈을 추가합니다.
// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// import Wijmo modules
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjChartModule } from '@grapecity/wijmo.angular2.chart';
// apply Wijmo license key
import { setLicenseKey } from '@grapecity/wijmo';
setLicenseKey('your license key goes here');
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
WjGridModule,
WjChartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
우리가 원하는 Wijmo 모듈을 가져 오는 것 외에도 코드에 Wijmo 라이선스 키를 적용하여 앱에서 평가판 워터 마크를 제거할 수 있습니다. 라이센스 키가 없는 경우 이 단계를 건너 뛰어도 됩니다.
이제 애플리케이션 모듈에서 Wijmo 모듈을 참조 했으므로 컴포넌트 템플릿에서 사용할 수 있습니다.
3 단계 컨트롤에 데이터 추가
"src/app/app.component.ts"파일을 열어 시작하고 컴포넌트에 컨트롤에 대한 데이터를 제공합니다.
// src/app/app.component.ts
import { Component } from '@angular/core';
// import Wijmo components
import { CollectionView } from '@grapecity/wijmo';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Wijmo Starter App';
data = this.getData();
getData() {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
downloads: Math.round(Math.random() * 20000),
});
}
return new CollectionView(data);
}
}getData는 CollectionView 보다는 규칙적인 배열을 반환합니다. CollectionView의 클래스는 정렬,필터링,그룹화, 통화 그리고 알림 등을 지원합니다. 이 예에서는 그리드 및 차트의 데이터 소스로 사용합니다.
4 단계 앱에 Angular 컨트롤 추가
그리드와 차트를 앱에 추가하려면 다음과 같이 src/app/app.component.html 파일을 편집하십시오.
<!-- 아래 컨텐츠는 placeholder 뿐이며 교체할 수 있습니다. -->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="100" alt="Angular Logo" src="data:image/svg+xml;base64,PH…">
</div>
<h2>Here are some Wijmo controls to help you start:</h2>
<div class="App-panel">
<wj-flex-grid [itemsSource]="data">
</wj-flex-grid>
<wj-flex-chart [itemsSource]="data" [bindingX]="'country'">
<wj-flex-chart-series [binding]="'sales'" [name]="'Sales'">
</wj-flex-chart-series>
<wj-flex-chart-series [binding]="'expenses'" [name]="'Expenses'">
</wj-flex-chart-series>
<wj-flex-chart-series [binding]="'downloads'" [name]="'Downloads'">
</wj-flex-chart-series>
</wj-flex-chart>
</div>
wj-flex-grid, wj-flex-chart, 그리고 wj-flex-chart-series 지시어 사용을 주시하시길 바랍니다. 그리드 및 차트 모듈에서 가져 온 것입니다.
5 단계 스타일 시트 업데이트
거의 끝났습니다. 마지막 단계는 CSS를 추가하는 것입니다. "src/styles.css"파일을 열고 다음 코드를 추가합니다.
@import "@grapecity/styles/wijmo.css";
.App-panel {
margin: 0 48pt;
text-align: center;
}
.App-panel .wj-control {
display: inline-block;
width: 400px;
height: 300px;
vertical-align: top;
}위와 같이 CSS 파일에서 import를 하는 경우 angular.json에서 아래와 같이 "styles"에 경로를 추가해줘야 합니다.
"styles": [
"node_modules/@grapecity/wijmo.styles/wijmo.css",
"src/styles.css"
],먼저 Wijmo의 CSS를 가져오므로 모든 Wijmo 컨트롤이 앱 전체에서 적절하게 스타일이 지정됩니다.
다음으로 "App-panel"요소 및 해당 요소에서 호스팅되는 컨트롤에 적용되는 규칙을 정의합니다.
"app.component.css"파일의 컴포넌트 수준에서 "App-panel"규칙을 정의 할 수도 있습니다.
6 단계 브라우저에서 테스트
이제 ctrl + S를 눌러 모든 파일의 변경 사항을 저장하고 브라우저로 다시 전환하여 결과를 확인합니다.
그리드와 차트가 동일한 CollectionView에 바인딩되어 있기 때문에 그리드의 데이터에 대한 변경 사항은 자동으로 차트에 반영됩니다. 예를 들어 열 머리글을 클릭하여 데이터를 정렬하거나 키보드를 사용하여 일부 값을 편집 할 수 있습니다.
결론
Wijmo를 최신 Angular 애플리케이션에 통합하는 것은 NPM과 함께 설치하고 라이브러리에서 원하는 컴포넌트를 가져 오기만 하면 됩니다.
서로 다른 프레임워크에서 똑같은 UI 구성 요소를 사용할 수 있으면 두 개 이상의 프레임워크로 작업하거나 향후 프레임워크 전환을 계획하는 것이 더 쉬워집니다.
댓글목록
등록된 댓글이 없습니다.
