Angular CLI로 Angular 스프레드시트 앱 만들기
페이지 정보
작성자 GrapeCity 작성일 2020-08-20 09:51 조회 2,297회 댓글 0건본문
관련링크
Angular CLI (Command Line Interface)는 Angular 개발자 도구 상자에 가장 많이 추가 된 기능 중 하나이며, Angular로 개발할 때 발생하는 많은 문제를 자동화하여 쉽게 시작할 수 있습니다. SpreadJS는 Angular와 함께 사용할 수 있으므로 개발자가 Angular CLI와 함께 사용하는 것은 당연합니다.
이 튜토리얼은 SpreadJS를 사용하여 간단한 Angular 스프레드시트 애플리케이션의 생성을 자동화하는 방법을 보여줍니다.
Angular 스프레드 시트 설정
이 튜토리얼은 명령 프롬프트 사용에 중점을 둘 것이므로, 명령 프롬프트를 엽니다.
Angular CLI는 전역적으로 설치해야 하며 다음 명령으로 전역적으로 설치할 수 있습니다.
npm install -g @angular/cli
설치가 완료되면 Angular CLI로 새 프로젝트를 만들 수 있습니다. 프로젝트를 "spreadjs-angular-app"이라고 하겠습니다. 명령 프롬프트에서 애플리케이션이 위치할 경로로 이동하고 다음 명령을 입력합니다.
ng new spreadjs-angular-app
그러면 Angular 애플리케이션을 실행하는 데 필요한 모든 파일이 포함된 디렉토리가 생성됩니다. SpreadJS를 추가하려면 다음 명령을 실행하여 프로젝트의 디렉토리에 SJS 파일을 설치하여 NPM에서 파일을 가져 오면 됩니다.
npm install @grapecity/spread-sheets @grapecity/spread-sheets-angular
파일이 설치되면 응용 프로그램에 파일 위치를 알려주어야 합니다. 편집할 첫 번째 파일은 프로젝트 루트에 있는 "angular.json" 파일입니다.
"styles" 및 "scripts" 속성을 추가해야 합니다.
{
...
"projects": {
"spread-sheets-app": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
"src/styles.css",
"node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
],
"scripts": [
"node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"
]
},
...
}
}
}
},
...
}
또한 "tsconfig.app.json" 파일의 링크를 추가합니다.
{
...
"files: [
...
"./node_modules/@grapecity/spread-sheets-angular/dist/gc.spread.sheets.angular.ts",
"./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.d.ts"
],
...
}
마지막으로 SpreadJS Angular 스프레드시트 컴포넌트를 "src> app> app.module.ts" 파일에 추가합니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular/dist/gc.spread.sheets.angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SpreadSheetsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular Spreadsheet 애플리케이션을 위한 HTML 및 JavaScript 코드 추가
"app.module.ts" 파일과 같은 폴더에서 SpreadJS 컴포넌트를 표시하도록 "app.component.html" 파일을 수정할 수 있습니다.
<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle">
<gc-worksheet [name]="sheetName" [dataSource]="data" [rowOutlineInfo]="rowOutlineInfo">
<gc-column dataField="name" headerText="Name" width=310></gc-column>
<gc-column dataField="chapter" headerText="Chapter" width=150></gc-column>
<gc-column dataField="page" headerText="Page" width=150></gc-column>
</gc-worksheet>
</gc-spread-sheets>
위 코드의 다른 속성은 스크립트 코드에서 정의됩니다. 이 경우 스크립트는 동일한 폴더의 "app.component.ts" 파일에 추가됩니다. 몇 가지 예비 변수와 SJS에 대한 라이선스로 컴포넌트를 초기화할 수 있습니다.
import { Component } from '@angular/core';
import * as GC from "@grapecity/spread-sheets";
GC.Spread.Sheets.LicenseKey = "<YOUR LICENSE HERE>";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'spreadjs-angular-app';
spreadBackColor = 'aliceblue';
sheetName = 'Java 101 Chapters';
hostStyle = {
width: '800px',
height: '600px'
};
data: any;
rowOutlineInfo: any;
showRowOutline = true;
}
데이터에 바인딩하기 때문에 AppComponent 클래스에 생성자를 추가하여 해당 데이터를 초기화 할 수 있습니다.
constructor() {
// This is the base data that we will bind to the Spread instance
let commands = [
{ name: 'Preface', chapter: '1', page: 1, indent: 0 },
{ name: 'Java SE5 and SE6', chapter: '1.1', page: 2, indent: 1 },
{ name: 'Java SE6', chapter: '1.1.1', page: 2, indent: 2 },
{ name: 'The 4th edition', chapter: '1.2', page: 2, indent: 1 },
{ name: 'Changes', chapter: '1.2.1', page: 3, indent: 2 },
{ name: 'Note on the cover design', chapter: '1.3', page: 4, indent: 1 },
{ name: 'Acknowledgements', chapter: '1.4', page: 4, indent: 1 },
{ name: 'Introduction', chapter: '2', page: 9, indent: 0 },
{ name: 'Prerequisites', chapter: '2.1', page: 9, indent: 1 },
{ name: 'Learning Java', chapter: '2.2', page: 10, indent: 1 },
{ name: 'Goals', chapter: '2.3', page: 10, indent: 1 },
{ name: 'Teaching from this book', chapter: '2.4', page: 11, indent: 1 },
{ name: 'JDK HTML documentation', chapter: '2.5', page: 11, indent: 1 },
{ name: 'Exercises', chapter: '2.6', page: 12, indent: 1 },
{ name: 'Foundations for Java', chapter: '2.7', page: 12, indent: 1 },
{ name: 'Source code', chapter: '2.8', page: 12, indent: 1 },
{ name: 'Coding standards', chapter: '2.8.1', page: 14, indent: 2 },
{ name: 'Errors', chapter: '2.9', page: 14, indent: 1 },
{ name: 'Introduction to Objects', chapter: '3', page: 15, indent: 0 },
{ name: 'The progress of abstraction', chapter: '3.1', page: 15, indent: 1 },
{ name: 'An object has an interface', chapter: '3.2', page: 17, indent: 1 },
{ name: 'An object provides services', chapter: '3.3', page: 18, indent: 1 },
{ name: 'The hidden implementation', chapter: '3.4', page: 19, indent: 1 },
{ name: 'Reusing the implementation', chapter: '3.5', page: 20, indent: 1 },
{ name: 'Inheritance', chapter: '3.6', page: 21, indent: 1 },
{ name: 'Is-a vs. is-like-a relationships', chapter: '3.6.1', page: 24, indent: 2 },
{ name: 'Interchangeable objects with polymorphism', chapter: '3.7', page: 25, indent: 1 },
{ name: 'The singly rooted hierarchy', chapter: '3.8', page: 28, indent: 1 },
{ name: 'Containers', chapter: '3.9', page: 28, indent: 1 },
{ name: 'Parameterized types (Generics)', chapter: '3.10', page: 29, indent: 1 },
{ name: 'Object creation & lifetime', chapter: '3.11', page: 30, indent: 1 },
{ name: 'Exception handling: dealing with errors', chapter: '3.12', page: 31, indent: 1 },
{ name: 'Concurrent programming', chapter: '3.13', page: 32, indent: 1 },
{ name: 'Java and the Internet', chapter: '3.14', page: 33, indent: 1 },
{ name: 'What is the Web?', chapter: '3.14.1', page: 33, indent: 2 },
{ name: 'Client-side programming', chapter: '3.14.2', page: 34, indent: 2 },
{ name: 'Server-side programming', chapter: '3.14.3', page: 38, indent: 2 },
{ name: 'Summary', chapter: '3.15', page: 38, indent: 1 },
{ name: 'End', chapter: '', indent: null }
];
}
이 특정 데이터는 행 개요를 사용하므로 해당 생성자에 코드를 추가하여 데이터 소스의 각 행에 대한 행 개요를 만들 수 있습니다. 다음 로직은 각 데이터 행의 "들여 쓰기" 값을 기반으로 행 개요를 만들고 지정된 공간만큼 들여 씁니다.
// Create a rowOutlineInfo object for each row
this.rowOutlineInfo = [];
for (let r = 0; r < commands.length; r++) {
var subRows = 0;
// Get the number of rows that subrows to the current one and add them to the outline
for (let r2 = r + 1; r2 < commands.length; r2++) {
if (commands[r2].indent > commands[r].indent) {
subRows++;
}
if ((r2 == (commands.length - 1)) || (commands[r2].indent == commands[r].indent)) {
var i = { index: r + 1, count: subRows }
this.rowOutlineInfo.push(i);
break;
}
}
// Add tabs based on the indent column
for (let i = 0; i < commands[r].indent; i++) {
commands[r].name = "\t\t\t\t\t" + commands[r].name;
}
}
마지막으로 Spread 인스턴스에 대한 데이터를 설정할 수 있습니다.
// Set the data for Spread
this.data = commands;
Angular 스프레드시트 작성 및 실행
애플리케이션의 코드가 완성되었으므로 이제 빌드하고 실행하기만 하면 됩니다. 명령 프롬프트로 돌아가서 다음 명령을 입력하세요.
ng serve
응용 프로그램이 성공적으로 빌드되면 "localhost:4200"으로 이동하여 브라우저에서 JavaScript Excel 스프레드시트를 볼 수 있습니다.
SpreadJS는 다양한 프레임 워크에서 사용할 수 있으며 Angular는 그 중 하나일 뿐입니다. Angular CLI를 사용하면 애플리케이션을 쉽게 만들 수 있고 SpreadJS를 사용하면 데이터를 훨씬 쉽게 표시 할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.