为什么选择WijmoJS？

作为一款纯前端控件集，WijmoJS秉承“快如闪电，触控优先”的设计理念，在提供优质服务和产品的同时，专注于企业应用开发，不断优化产品架构，与时俱进。除在全球率先支持AngularJS外，现已全面应用于React、Vuejs、TyPEScript 、Ionic等主流框架中。

凭借先进的触控设计和全面的AngularJS支持，WijmoJS的FlexGrid和图表控件更专注于顶级性能和零依赖性。灵活的 API 为用户提供易用、轻松的操作体验，全面满足开发所需，是构建企业应用程序最完整的纯前端控件集。

触控优先，轻便灵活，零依赖，全框架支持，所以，为什么不？

如何使用WijmoJS+Angular6玩转您的Web应用？

在这里，首先恭喜Angular团队发布Angular version 6.0.0！

在本文中，我们将展示如何使用WijmoJS和AngularJS来创建目前最流行的，基于HTML5的JavaScript Web应用程序。 阅读更多关于WijmoJS的Angular支持。

我们不会深入讲解NPM，Webpack或Angular本身的细节。因为这些工具都非常受欢迎，并且有完整的帮助文档。本文中，我们将专注于“如何将WijmoJS添加到用Angular编写的Web应用程序中”。

在所有框架中创建应用程序的基本步骤都是类似的：

l 安装适当的CLI（命令行界面实用程序）以生成，运行，维护和部署应用程序。

l 使用CLI创建应用程序。

l 使用NPM将WijmoJS添加到应用程序。

l 导入您要使用的组件并添加适当的标记。

第1步，创建一个新的Angular应用程序

按照以下步骤创建一个新的Angular应用程序，启动并运行：

第2步，添加WijmoJS模块

打开“src / app / app.module.ts”文件，为网格和图表添加WijmoJS模块：

    // src/app/app.module.ts
    
    import { browserModule } From '@angular/platform-browser';
    
    import { NgModule } from '@angular/core';
    
    import { Appcomponent } from './app.COMponent';
    
     
    
    // import Wijmo modules
    
    import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
    
    import { WjChartModule } from 'wijmo/wijmo.angular2.chart';
    
     
    
    // apply Wijmo license key
    
    import { setLicenseKey } from 'wijmo/wijmo';
    
    setLicenseKey('your license key goes here');
    
     
    
    @NgModule({
    
      declarations: [
    
        AppComponent
    
      ],
    
      imports: [
    
        BrowserModule,
    
        WjGridModule,
    
        WjChartModule
    
      ],
    
      PRoviders: [],
    
      bootstrap: [AppComponent]
    
    })
    
    export class AppModule { }

本段代码除了导入我们想要的WijmoJS模块外，还会自动应用许可证密钥从应用程序中删除WijmoJS水印。 如果您没有许可证密钥，则可以跳过此步骤。

第3步，向控件添加数据

首先打开“src / app / app.component.ts”文件，并为控件提供一些数据：

    // src/app/app.component.ts
    
    import { Component } from '@angular/core';
    
     
    
    // import Wijmo components
    
    import { CollectionView } from 'wijmo/wijmo';
    
     
    
    @Component({
    
      selector: 'app-root',
    
      templateUrl: './app.component.html',
    
      styleUrls: ['./app.component.css']
    
    })
    
    export class AppComponent {
    
      title = 'Wijmo Starter App';
    
      data = this.getData();
    
      getData() {
    
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    
            data = [];
    
        for (var i = 0; i < countries.length; i++) {
    
          data.push({
    
            country: countries[i],
    
            sales: Math.random() * 10000,
    
            expenses: Math.random() * 5000,
    
            downloads: Math.round(Math.random() * 20000),
    
          });
    
        }
    
        return new CollectionView(data);
    
      }
    
    }

注意getData返回一个CollectionView而不是一个常规数组。 CollectionView类支持排序，筛选，分组，货币和通知。在这个例子中，我们将它用作网格和图表的数据源。

第4步，将Angular控件添加到应用程序

要将表格和图表添加到应用程序，请编辑src / app / app.component.html文件，如下所示：

777_204@

Welcome to {{ title }}!

Here are some Wijmo controls to help you start:

" title="" data-original-title="复制">