Angular 2をサポートするテーブルコントロール

フロントエンドフレームワークは近年特に注目を集めており、特にAngular 2は多くのファンを抱えています。 2016 年 9 月に Angular 2 が正式にリリースされると、多くのファンが Angular 2 に投資し始めました。もちろんこれには私も含まれます。 Angular 2 について知りたい場合は、公式 Web サイト (英語版、中国語版) をおすすめします。 Angular 2 をすぐに使い始めましょう。

会社のプロジェクトは、まだ研究の初期段階にある Angular 2 バージョン 2.4 に基づいて開発したいと考えています。私の課題は、Angular 2 に基づく UI コントロールを研究することです。公式 Web サイトのリソースには、Angular 2 をサポートする多くのリソースがリストされています。 Wijmo の Flexgrid コントロールはすでに Angular 2 のバージョン 2.4 をサポートしていることがわかり、これは当初のニーズを満たしていました。

1. 環境セットアップ

Angular 2 は、機能の点で Angular 1 と大きく異なるだけでなく、環境セットアップも大きく異なります。多くの初心者は、Angular 2 コードの実行が難しいと報告しています。 Angular2 は ES6 に基づいて開発されているため、多くのサードパーティへの依存関係が存在します。多くのブラウザはまだ ES6 をサポートしていないため、Angular2 では多くのポリフィルまたはシムが導入され、サードパーティの依存関係が導入されました。以下では、例として FlexGrid を使用して、実行環境をセットアップする方法を説明します。

1. NodeJS をインストールします

Node 公式 Web サイト http://www.php.cn/ からダウンロードできます。

2. プロジェクトを保存する新しいディレクトリを作成します

mkdir ng2-flexGrid

cd ng2-flexGrid

3. 設定ファイル

• package.json

を使用しますnpm にマークを付けるにはプロジェクトでは依存関係パッケージを使用する必要があります。

{
  "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

TypeScript 構成ファイルは、TypeScript コンパイラーがプロジェクト ソース ファイルから JavaScript コードを生成する方法を定義します。

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

• systemjs.config.js

は、アプリケーションモジュールの場所に関する情報をSystemJS (モジュールローダー)に提供し、必要な依存関係パッケージをすべて登録します。

/**
* 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);

4. npm install を実行します

NPM は package.json で定義されたパッケージに従ってインストールされます。 node_modules ディレクトリが生成され、これらのパッケージがここに配置されます。

これで環境設定の作業は完了しました。以下では、Angular 2 のサポートを説明するための例として FlexGrid を使用します。

2. Angular 2をサポートするテーブルコントロールの使用方法

1. 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>

Angularの必要なコンポーネントに加えて2、Wijmoスクリプトの導入も必要です。

2. データ サービスを書きます

'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;
    }
}

次に、アプリケーションの最初のコンポーネントであるルート コンポーネント app.component を書きます。これは、このコンポーネントの唯一のコンポーネントでもあります。プログラム。このコンポーネントでは、Component と Inject という 2 つのメタ タグを導入する必要があります。定義されたデータ サービス data.Service を注入する必要もあります。

app.component.ts:

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));
    }
}

app.component.html:

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

ここで wj-flex-grid タグを導入するだけで、FlexGrid コントロールを作成できます。 wj-flex-grid コンポーネントはサブコンポーネントとして存在し、app.module モジュールに挿入されます。 itemsSource はデータ ソースをバインドします。この itemsSource は flexgrid のカプセル化されたプロパティです。

Angular 2 で FlexGrid を使用する最大の利点は、Angular 2 コンポーネントがマークアップ言語を使用してコントロールを宣言できる機能を提供することです。宣言マークアップは MVVM 設計パターンに従っており、コンポーネントは完全に View (マークアップ言語) を通じて構成できます。 FlexGrid は、Angular 2 マークアップ言語を使用して完全な API を宣言することをサポートしています。マークアップ言語を使用して、プロパティの設定、イベントの添付、サブコンポーネントの構成をすべて行うことができます。

4. ルート モジュールを作成します

コンポーネントをルート モジュールに挿入します。参照されるすべてのコンポーネントとモジュールを挿入する必要があります。

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 { }

5. ブートローダー

main.ts:

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

3.

を実行して実行します。コマンドラインで npm start 、この時点では、プログラムは自動的にデフォルトのブラウザを開き、ページをレンダリングします。

startコマンドはpackage.jsonファイルに定義されているscriptsコマンドを実行します。 ts コードがネイティブ js にコンパイルされ、静的サーバーが起動されます。 このサーバーはファイルの変更を検出し、ファイルの変更が見つかると、ts コードが自動的にコンパイルされます。 以下は操作の結果です:

FlexGrid には、並べ替え、フィルタリング、グループ化、編集などの基本機能が組み込まれています。また、オプションの拡張機能を通じて他の機能も提供できます。他の製品と比較すると、FlexGrid のパフォーマンスは非常に優れています。ファイル サイズは比較的小さく、圧縮後は約 25K です。

ソースコードをダウンロード

上記は、Angular 2 をサポートするテーブル コントロールの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。