利用 Angular CLI 创建基于 SpreadJS 的电子表格应用

Angular CLI（命令行界面）是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，我们可以简单地从NPM获取文件，方法是运行以下命令以在项目目录中安装SJS文件：

npm install @grapecity/spread-sheets @grapecity/spread-sheets-angular 安装文件后，我们需要让应用程序知道它们的位置。要编辑的第一个文件是项目根目录中的“ angular.json”文件。

添加“样式”和“脚本”属性：

1. {
   
2.     ...
   
3.     "projects": {
   
4.         "spread-sheets-app": {
   
5.             ...
   
6.             "architect": {
   
7.                 "build": {
   
8.                     ...
   
9.                     "options": {
   
10.                         ...
    
11.                         "styles": [
    
12.                             "src/styles.css",
    
13.                             "node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
    
14.                         ],
    
15.                         "scripts": [
    
16.                             "node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"
    
17.                         ]
    
18.                     },
    
19.                     ...
    
20.                 }
    
21.             }
    
22.         }
    
23.     },
    
24.     ...
    
25. }

复制代码

添加指向“ tsconfig.app.json”文件中文件的链接：

1. {
   
2.     ...
   
3.     "files: [
   
4.         ...
   
5.         "./node_modules/@grapecity/spread-sheets-angular/dist/gc.spread.sheets.angular.ts",
   
6.         "./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.d.ts"
   
7.     ],
   
8.     ...
   
9. }

复制代码

设置的最后一部分是将SpreadJS Angular电子表格组件添加到“ src> app> app.module.ts”文件中：

1. import { BrowserModule } from '@angular/platform-browser';
   
2. import { NgModule } from '@angular/core';
   
3. 
   
4. 
   
5. import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular/dist/gc.spread.sheets.angular';
   
6. 
   
7. import { AppRoutingModule } from './app-routing.module';
   
8. import { AppComponent } from './app.component';
   
9. 
   
10. @NgModule({
    
11.   declarations: [
    
12.     AppComponent
    
13.   ],
    
14.   imports: [
    
15.     BrowserModule,
    
16.     SpreadSheetsModule,
    
17.     AppRoutingModule   
    
18.   ],
    
19.   providers: [],
    
20.   bootstrap: [AppComponent]
    
21. })
    
22. export class AppModule { }

复制代码

为Angular Spreadsheet应用程序添加HTML和JavaScript代码
在与“ app.module.ts”文件相同的文件夹中，我们可以修改“ app.component.html”文件以显示SpreadJS组件：

1. <gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle">
   
2.   <gc-worksheet [name]="sheetName" [dataSource]="data" [rowOutlineInfo]="rowOutlineInfo">
   
3.     <gc-column dataField="name" headerText="Name" width=310></gc-column>
   
4.     <gc-column dataField="chapter" headerText="Chapter" width=150></gc-column>
   
5.     <gc-column dataField="page" headerText="Page" width=150></gc-column>
   
6.   </gc-worksheet>
   
7. </gc-spread-sheets>

复制代码

上面代码中的不同属性将在脚本代码中定义。在这种情况下，脚本将被添加到同一文件夹中的“ app.component.ts”文件中。我们可以从初始化一些初始变量的组件以及我们的SJS许可开始：

1. import { Component } from '@angular/core';
   
2. import * as GC from "@grapecity/spread-sheets";
   
3. 
   
4. GC.Spread.Sheets.LicenseKey = "<YOUR LICENSE HERE>";
   
5. 
   
6. @Component({
   
7.   selector: 'app-root',
   
8.   templateUrl: './app.component.html',
   
9.   styleUrls: ['./app.component.css']
   
10. })
    
11. export class AppComponent {
    
12.   title = 'spreadjs-angular-app';
    
13.   spreadBackColor = 'aliceblue';
    
14.   sheetName = 'Java 101 Chapters';
    
15.   hostStyle = {
    
16.       width: '800px',
    
17.       height: '600px'
    
18.   };
    
19.   data: any;
    
20.   rowOutlineInfo: any;
    
21.   showRowOutline = true;
    
22. }

复制代码

由于我们要绑定到数据，因此可以向AppComponent类添加一个构造函数以初始化该数据：

1. constructor() {
   
2.   // This is the base data that we will bind to the Spread instance
   
3.   let commands = [
   
4.       { name: 'Preface', chapter: '1', page: 1, indent: 0 },
   
5.       { name: 'Java SE5 and SE6', chapter: '1.1', page: 2, indent: 1 },
   
6.       { name: 'Java SE6', chapter: '1.1.1', page: 2, indent: 2 },
   
7.       { name: 'The 4th edition', chapter: '1.2', page: 2, indent: 1 },
   
8.       { name: 'Changes', chapter: '1.2.1', page: 3, indent: 2 },
   
9.       { name: 'Note on the cover design', chapter: '1.3', page: 4, indent: 1 },
   
10.       { name: 'Acknowledgements', chapter: '1.4', page: 4, indent: 1 },
    
11.       { name: 'Introduction', chapter: '2', page: 9, indent: 0 },
    
12.       { name: 'Prerequisites', chapter: '2.1', page: 9, indent: 1 },
    
13.       { name: 'Learning Java', chapter: '2.2', page: 10, indent: 1 },
    
14.       { name: 'Goals', chapter: '2.3', page: 10, indent: 1 },
    
15.       { name: 'Teaching from this book', chapter: '2.4', page: 11, indent: 1 },
    
16.       { name: 'JDK HTML documentation', chapter: '2.5', page: 11, indent: 1 },
    
17.       { name: 'Exercises', chapter: '2.6', page: 12, indent: 1 },
    
18.       { name: 'Foundations for Java', chapter: '2.7', page: 12, indent: 1 },
    
19.       { name: 'Source code', chapter: '2.8', page: 12, indent: 1 },
    
20.       { name: 'Coding standards', chapter: '2.8.1', page: 14, indent: 2 },
    
21.       { name: 'Errors', chapter: '2.9', page: 14, indent: 1 },
    
22.       { name: 'Introduction to Objects', chapter: '3', page: 15, indent: 0 },
    
23.       { name: 'The progress of abstraction', chapter: '3.1', page: 15, indent: 1 },
    
24.       { name: 'An object has an interface', chapter: '3.2', page: 17, indent: 1 },
    
25.       { name: 'An object provides services', chapter: '3.3', page: 18, indent: 1 },
    
26.       { name: 'The hidden implementation', chapter: '3.4', page: 19, indent: 1 },
    
27.       { name: 'Reusing the implementation', chapter: '3.5', page: 20, indent: 1 },
    
28.       { name: 'Inheritance', chapter: '3.6', page: 21, indent: 1 },
    
29.       { name: 'Is-a vs. is-like-a relationships', chapter: '3.6.1', page: 24, indent: 2 },
    
30.       { name: 'Interchangeable objects with polymorphism', chapter: '3.7', page: 25, indent: 1 },
    
31.       { name: 'The singly rooted hierarchy', chapter: '3.8', page: 28, indent: 1 },
    
32.       { name: 'Containers', chapter: '3.9', page: 28, indent: 1 },
    
33.       { name: 'Parameterized types (Generics)', chapter: '3.10', page: 29, indent: 1 },
    
34.       { name: 'Object creation & lifetime', chapter: '3.11', page: 30, indent: 1 },
    
35.       { name: 'Exception handling: dealing with errors', chapter: '3.12', page: 31, indent: 1 },
    
36.       { name: 'Concurrent programming', chapter: '3.13', page: 32, indent: 1 },
    
37.       { name: 'Java and the Internet', chapter: '3.14', page: 33, indent: 1 },
    
38.       { name: 'What is the Web?', chapter: '3.14.1', page: 33, indent: 2 },
    
39.       { name: 'Client-side programming', chapter: '3.14.2', page: 34, indent: 2 },
    
40.       { name: 'Server-side programming', chapter: '3.14.3', page: 38, indent: 2 },
    
41.       { name: 'Summary', chapter: '3.15', page: 38, indent: 1 },
    
42.       { name: 'End', chapter: '', indent: null }
    
43.   ];
    
44. }

复制代码

此特定数据将使用行概述，因此我们可以向该构造函数添加代码以为数据源中的每一行创建行轮廓。以下逻辑将基于每个数据行的“缩进”值创建行轮廓，并将它们缩进指定的空格量：

1. // Create a rowOutlineInfo object for each row
   
2. this.rowOutlineInfo = [];
   
3. for (let r = 0; r < commands.length; r++) {
   
4.     var subRows = 0;
   
5.     // Get the number of rows that subrows to the current one and add them to the outline
   
6.     for (let r2 = r + 1; r2 < commands.length; r2++) {
   
7.         if (commands[r2].indent > commands[r].indent) {
   
8.             subRows++;
   
9.         }
   
10.         if ((r2 == (commands.length - 1)) || (commands[r2].indent == commands[r].indent)) {
    
11.             var i = { index: r + 1, count: subRows }
    
12.             this.rowOutlineInfo.push(i);
    
13.             break;
    
14.         }
    
15.     }
    
16. 
    
17. 
    
18.     // Add tabs based on the indent column
    
19.     for (let i = 0; i < commands[r].indent; i++) {
    
20.         commands[r].name = "\t\t\t\t\t" + commands[r].name;
    
21.     }
    
22. }

复制代码

最后，我们可以为Spread实例设置数据：

1. // Set the data for Spread
   
2. this.data = commands;

复制代码

建立并运行您的Angular电子表格
该应用程序的代码已完成，因此现在我们只需要构建和运行它即可。为此，我们可以简单地返回命令提示符并输入以下命令：

ng serve




成功构建应用程序后，可以通过导航到“ localhost：4200”在浏览器中查看JavaScript Excel电子表格：


SpreadJS可以与许多不同的框架一起使用，而Angular只是其中之一。Angular CLI使创建应用程序变得容易，而SpreadJS使显示数据更加容易。