Tabellensteuerung, die Angular 2 unterstützt

Front-End-Frameworks waren in den letzten Jahren ein besonders heißes Thema, insbesondere Angular 2, das viele Fans hat. Nachdem Angular 2 im September 2016 offiziell veröffentlicht wurde, begannen viele Fans, in Angular 2 zu investieren. Dazu gehört natürlich auch ich. Wenn Sie mehr über Angular 2 erfahren möchten, empfehlen wir Ihnen die offizielle Website: Englische Version, Chinesische Version. Starten Sie schnell mit Angular 2.

Ein Projekt des Unternehmens soll auf Basis der Angular 2 Version 2.4 entwickelt werden, die sich noch im vorläufigen Forschungsstadium befindet. Meine Aufgabe besteht darin, auf Angular 2 basierende UI-Steuerelemente zu studieren. In den Ressourcen auf der offiziellen Website sind viele Ressourcen aufgeführt, die Angular 2 unterstützen. Wir haben festgestellt, dass die Flexgrid-Steuerung von Wijmo bereits Version 2.4 von Angular 2 unterstützt, was zunächst unseren Anforderungen entspricht.

1. Umgebungseinrichtung

Angular 2 unterscheidet sich nicht nur stark von Angular 1 in Bezug auf die Funktionalität, sondern auch in der Umgebung groß. Viele Anfänger berichten, dass Angular 2-Code schwierig auszuführen ist. Angular2 wird auf Basis von ES6 entwickelt, daher wird es viele Abhängigkeiten von Drittanbietern geben. Da viele Browser ES6 noch nicht unterstützen, hat Angular2 viele Polyfills oder Shims eingeführt, was dazu führte, dass wir Abhängigkeiten von Drittanbietern einführten. Im Folgenden wird FlexGrid als Beispiel verwendet, um zu veranschaulichen, wie eine laufende Umgebung eingerichtet wird.

1. Installieren Sie NodeJS

Sie können es von der offiziellen Node-Website http://www.php.cn/ herunterladen.

2. Erstellen Sie ein neues Verzeichnis zum Speichern des Projekts

mkdir ng2-flexGrid

cd ng2-flexGrid

3. Die Konfigurationsdatei

• package.json

wird verwendet, um die npm-Abhängigkeitspakete zu markieren, die das Projekt verwenden muss.

{
  "name": "wj-ng2-flexgrid",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

• tsconfig.json Konfigurationsdatei, die definiert, wie der TypeScript-Compiler JavaScript-Code aus der Projektquelle generiert Dateien.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

systemjs.config.js

• Stellt SystemJS (Modullader) Informationen darüber zur Verfügung, wo Anwendungsmodule zu finden sind, und registriert alle erforderlichen Abhängigkeitspakete.

4. Führen Sie npm install aus

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

NPM wird gemäß dem in package.json definierten Paket installiert . Es wird ein Verzeichnis „node_modules“ generiert und diese Pakete werden hier abgelegt.

Zu diesem Zeitpunkt ist die Aufgabe der Einrichtung der Umgebung abgeschlossen. Im Folgenden nehmen wir FlexGrid als Beispiel, um die Unterstützung für Angular 2 zu veranschaulichen.

2. So verwenden Sie das Tabellensteuerelement, das

Angular 2

1 unterstützt. HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>使用 Angular 2 来创建FlexGrid控件</title>
    <!--angular 2 模块-->
    <!--用于填充旧版浏览器-->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!--systemjs 配置-->
    <script src="systemjs.config.js"></script>
    
    <!--wijmo 模块-->
    <script src="scripts/vendor/wijmo.min.js"></script>
    <script src="scripts/vendor/wijmo.grid.min.js"></script>
    <link rel="stylesheet" href="styles/wijmo.min.css">
    <script src="scripts/vendor/wijmo.angular2.min.js"></script>
    <!--mine-->
    <script>
      System.import('./app/main').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
    <!--申明根组件-->
    <app-cmp>
        Loading
    </app-cmp>
</body>
</html>

Auf der HTML-Hostseite müssen zusätzlich zu den notwendigen Komponenten in Angular 2 auch Wijmo-Skripte vorhanden sein eingeführt.

2. Datendienst schreiben

'use strict'
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
    getData(count: number): wijmo.collections.ObservableArray {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = new wijmo.collections.ObservableArray();
        for (var i = 0; i < count; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                date: new Date(2014, i % 12, i % 28),
                amount: Math.random() * 10000,
                active: i % 4 == 0
            });
        }
        return data;
    }
}

3 🎜>

Jetzt schreiben wir die erste Komponente der Anwendung: die Root-Komponente app.component, die auch die einzige Komponente dieses Programms ist. In dieser Komponente müssen zwei Meta-Tags eingeführt werden: Component, Inject. Sie müssen auch den definierten Datendienst data.Service einfügen.

app.component.ts:

app.component.html:

import { Component, Inject } from '@angular/core';
import { DataService } from '../services/data.service';
@Component ({
    selector:'app-cmp',
    templateUrl:'app/components/app.component.html',
})
export class  AppComponent{
    protected dataSvc:DataService;
    data: wijmo.collections.CollectionView;
    constructor(@Inject(DataService) dataSvc:DataService){
        this.dataSvc = dataSvc;
        this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(50));
    }
}

Hier müssen Sie nur das Tag wj-flex-grid einführen, um das FlexGrid-Steuerelement zu erstellen. Die wj-flex-grid-Komponente existiert als Unterkomponente und wird in das app.module-Modul eingefügt. itemsSource bindet eine Datenquelle. Diese itemsSource ist eine gekapselte Eigenschaft von Flexgrid.

Der größte Vorteil der Verwendung von FlexGrid unter Angular 2 besteht darin, dass Angular 2-Komponenten die Möglichkeit bieten, Markup-Sprache zum Deklarieren von Steuerelementen zu verwenden. Das Deklarations-Markup folgt gut dem MVVM-Entwurfsmuster und wir können unsere Komponenten vollständig über View (Markup-Sprache) konfigurieren. FlexGrid unterstützt die Verwendung der Markup-Sprache Angular 2 zur Deklaration einer vollständigen API. Sie können Eigenschaften festlegen, Ereignisse anhängen und Unterkomponenten vollständig mithilfe der Auszeichnungssprache konfigurieren.

<div class="header">
    <h2>
        展示如何在angular 2上使用 Wijmo的FlexGrid。
    </h2>
</div>
<div>
<wj-flex-grid [itemsSource]="data">  </wj-flex-grid>
</div>

4. Schreiben Sie das Root-Modul

Injizieren Sie Komponenten in das Root-Modul, und alle referenzierten Komponenten und Module müssen injiziert werden.

5. Bootloader

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { AppComponent } from './components/app.component';
import { DataService } from './services/data.service';
@NgModule({
    imports: [ WjGridModule, BrowserModule],
    declarations: [AppComponent],
    providers:[DataService],
    bootstrap: [AppComponent],
})
export class AppModule { }

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

3. Führen Sie zu diesem Zeitpunkt

aus und führen Sie npm start aus , das Programm Der Standardbrowser wird automatisch geöffnet und die Seite wird gerendert. Der Befehl

start führt den in der Datei package.json definierten Skriptbefehl aus. Der TS-Code wird in natives JS kompiliert und ein statischer Server wird gestartet. Dieser Server erkennt Dateiänderungen. Wenn eine Dateiänderung gefunden wird, wird der TS-Code automatisch kompiliert.

Das Folgende ist das Ergebnis der Operation:

FlexGrid verfügt über integrierte Grundfunktionen wie Sortieren, Filtern, Gruppieren, Bearbeiten usw. und kann durch optionale Erweiterungen auch weitere Funktionen bereitstellen. Im Vergleich zu anderen Produkten ist die Leistung von FlexGrid recht gut. Die Dateigröße ist relativ gering und beträgt nach der Komprimierung etwa 25 KB.

Laden Sie den Quellcode herunter

Das Obige ist der Inhalt des Tabellensteuerelements, das Angular 2 unterstützt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website ( www.php.cn)!