Contrôle de table prenant en charge Angular 2

Le framework front-end a été un sujet particulièrement brûlant ces dernières années, notamment Angular 2 qui compte de nombreux fans. Après la sortie officielle d'Angular 2 en septembre 2016, un grand nombre de fans ont commencé à investir dans Angular 2. Bien sûr, cela m'inclut. Si vous souhaitez en savoir plus sur Angular 2, nous vous recommandons le site officiel : version anglaise, version chinoise. Démarrez rapidement avec Angular 2.

Un projet de l'entreprise souhaite être développé sur la base d'Angular 2 version 2.4, qui en est encore au premier stade de recherche. Ma tâche consiste à étudier les contrôles d'interface utilisateur basés sur Angular 2. Il existe de nombreuses ressources prenant en charge Angular 2 répertoriées dans les ressources du site officiel. Nous avons constaté que le contrôle Flexgrid de Wijmo supporte déjà la version 2.4 d'Angular 2, qui répond dans un premier temps à nos besoins.

1. Configuration de l'environnement

Angular 2 est non seulement très différent d'Angular 1 en termes de fonctionnalités, mais aussi en termes d'environnement configuration. De nombreux débutants signalent que le code Angular 2 est difficile à exécuter. Angular2 est développé sur la base d'ES6, il y aura donc de nombreuses dépendances tierces. Étant donné que de nombreux navigateurs ne prennent pas encore en charge ES6, Angular2 a introduit de nombreux polyfills ou shims, nous obligeant à introduire des dépendances tierces. Ce qui suit utilise FlexGrid comme exemple pour illustrer comment configurer un environnement d'exécution.

1. Installez NodeJS

Vous pouvez le télécharger sur le site officiel de Node http://www.php.cn/.

2. Créez un nouveau répertoire pour stocker le projet

mkdir ng2-flexGrid

cd ng2-flexGrid

3. Le fichier de configuration

• package.json

est utilisé pour marquer les packages de dépendances npm que le projet doit utiliser.

{
  "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 Fichier de configuration qui définit la façon dont le compilateur TypeScript génère le code JavaScript à partir de la source du projet fichiers.

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

systemjs.config.js

• Fournit à SystemJS (chargeur de modules) des informations sur l'endroit où trouver les modules d'application et enregistre tous les packages de dépendances nécessaires.

4. Exécutez npm install

/**
* 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 s'installera selon le package défini dans package.json. . Un répertoire node_modules sera généré et ces packages seront placés ici.

À ce stade, la tâche de mise en place de l'environnement est terminée. Ci-dessous, nous utilisons FlexGrid comme exemple pour illustrer la prise en charge d'Angular 2.

2. Comment utiliser le contrôle de table qui prend en charge

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>

Dans la page hôte HTML, en plus des composants nécessaires dans Angular 2, les scripts Wijmo doivent également être introduit.

2. Service de données d'écriture

'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. 🎜>

Maintenant, nous écrivons le premier composant de l'application : le composant racine app.component, qui est également le seul composant de ce programme. Dans ce composant, deux balises méta doivent être introduites : Component, Inject. Vous devez également injecter le service de données défini data.Service.

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

Ici, il vous suffit d'introduire la balise wj-flex-grid pour créer le contrôle FlexGrid. Le composant wj-flex-grid existe en tant que sous-composant et est injecté dans le module app.module. itemsSource lie une source de données. Cet itemsSource est une propriété encapsulée de flexgrid.

Le plus grand avantage de l'utilisation de FlexGrid sous Angular 2 est que les composants Angular 2 offrent la possibilité d'utiliser un langage de balisage pour déclarer des contrôles. Le balisage de déclaration suit bien le modèle de conception MVVM et nous pouvons configurer nos composants entièrement via View (langage de balisage). FlexGrid prend en charge l'utilisation du langage de balisage Angular 2 pour déclarer une API complète. Vous pouvez définir des propriétés, attacher des événements et configurer des sous-composants entièrement à l'aide d'un langage de balisage.

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

4. Écrivez le module racine

Injectez les composants dans le module racine, et tous les composants et modules référencés doivent être injectés.

5. Chargeur de démarrage

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. Exécutez

et exécutez npm start sur la ligne de commande à ce moment. , le programme Le navigateur par défaut s'ouvrira automatiquement et la page sera rendue. La commande

start exécute la commande scripts définie dans le fichier package.json. Le code ts sera compilé en js natif et un serveur statique sera démarré. Ce serveur détectera les modifications de fichier lorsqu'une modification de fichier est trouvée, le code ts sera automatiquement compilé.

Voici le résultat de l'opération :

FlexGrid possède des fonctions de base intégrées telles que le tri, le filtrage, le regroupement, l'édition, etc., et peut également fournir d'autres fonctions via des extensions facultatives. Par rapport à d'autres produits, les performances de FlexGrid sont plutôt bonnes. Sa taille de fichier est relativement petite, environ 25 Ko après compression.

Téléchargez le code source

Ce qui précède est le contenu du contrôle table qui prend en charge Angular 2. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ( www.php.cn) !