Wijmo 및 NPM으로 Angular 앱을 빌드하는 방법 > 블로그 & Tips

본문 바로가기

Wijmo

블로그 & Tips

Wijmo 및 NPM으로 Angular 앱을 빌드하는 방법

페이지 정보

작성자 GrapeCity 작성일 20-08-27 14:37 조회 1,102회 댓글 0건

본문

Wijmo 및 NPM으로 Angular 앱 빌드


이 시리즈에서는 NPM 및 Webpack 과 함께 Wijmo를 사용하여 가장 인기 있는 JavaScript 애플리케이션 프레임워크를 대상으로 애플리케이션을 만드는 방법을 보여줍니다이 블로그는 웹, 모바일 또는 데스크탑에 있는 자바스크립트 애플리케이션을 구축하기 위한 Google의 프레임워크인 Angular에 중점을두고 있으며, 이 모든 기능을 갖춘 프레임워크는 선언적 템플릿, 종속성 주입을 결합하고 엔드 투 엔드 도구를 포함합니다.


블로그 시리즈


1. NPM 및 Wijmo 소개



2. React



3. Vue.js



4. AngularJS

 
 

구축을 위해 Wijmo 평가판을 다운로드 해보세요 



이 튜토리얼에서는 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-gridwj-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를 눌러 모든 파일의 변경 사항을 저장하고 브라우저로 다시 전환하여 결과를 확인합니다.


Angular 앱


그리드와 차트가 동일한 
CollectionView에 바인딩되어 있기 때문에 그리드의 데이터에 대한 변경 사항은 자동으로 차트에 반영됩니다. 예를 들어 열 머리글을 클릭하여 데이터를 정렬하거나 키보드를 사용하여 일부 값을 편집 할 수 있습니다.


결론


Wijmo를 최신 Angular 애플리케이션에 통합하는 것은 NPM과 함께 설치하고 라이브러리에서 원하는 컴포넌트를 가져 오기만 하면 됩니다.


서로 다른 프레임워크에서 똑같은 UI 구성 요소를 사용할 수 있으면 두 개 이상의 프레임워크로 작업하거나 향후 프레임워크 전환을 계획하는 것이 더 쉬워집니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.