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);
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>
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;
}
}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.
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>
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
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)!
Kompatibilitätsprüfer
Die PHPStudy-Datenbank kann die Lösung nicht starten
So verwenden Sie onclick in HTML
Was bedeutet STO in der Blockchain?
So reparieren Sie eine SQL-Datenbank
So löschen Sie meine WeChat-Adresse
So erstellen Sie Screenshots auf Huawei-Handys
Einführung in die Plug-Ins, die für die Ausführung von Java durch vscode erforderlich sind
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
