摘要：除在全球率先支持外，現已全面應用于等主流框架中。本文中，我們將專注于如何將添加到用編寫的應用程序中。使用創建應用程序。接下來，我們定義適用于這些元素中托管的應用程序面板元素和控件的規則。往期精彩用玩轉您的應用

作為一款純前端控件集，WijmoJS秉承“快如閃電，觸控優先”的設計理念，在提供優質服務和產品的同時，專注于企業應用開發，不斷優化產品架構，與時俱進。除在全球率先支持AngularJS外，現已全面應用于React、Vuejs、TypeScript 、Ionic等主流框架中。

憑借先進的觸控設計和全面的AngularJS支持，WijmoJS的FlexGrid和圖表控件更專注于頂級性能和零依賴性。靈活的 API 為用戶提供易用、輕松的操作體驗，全面滿足開發所需，是構建企業應用程序最完整的純前端控件集。

觸控優先，輕便靈活，零依賴，全框架支持，所以，為什么不？

在這里，首先恭喜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 導入您要使用的組件并添加適當的標記。

按照以下步驟創建一個新的Angular應用程序，啟動并運行：

打開“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水印。 如果您沒有許可證密鑰，則可以跳過此步驟。

首先打開“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類支持排序，篩選，分組，貨幣和通知。在這個例子中，我們將它用作網格和圖表的數據源。

要將表格和圖表添加到應用程序，請編輯src / app / app.component.html文件，如下所示：

    
    
    

    
      

    
        Welcome to {{ title }}!
    
      
    
      
    
    
    
    
Here are some Wijmo controls to help you start:
    
    

    
      
    
      
    
      
    
        
    
        
    
        
    
        
    
        
    
        
    
      
    
    

請注意，wj-flex-grid，wj-flex-chart和wj-flex-chart-series這些指令是從表格和圖表模塊導入的。

到這一步基本大功告成，最后我們將為自己的應用程序添加CSS樣式。 打開“src / styles.css”文件并添加以下代碼：

    /*
    
      You can add global styles to this file,
    
      and also import other style files
    
    */
    
    @import "wijmo/styles/wijmo.css";
    
     
    
    .App-panel {
    
        margin: 0 48pt;
    
        text-align: center;
    
      }
    
        .App-panel .wj-control {
    
          display: inline-block;
    
          width: 400px;
    
          height: 300px;
    
          vertical-align: top;
    
    }

首先，我們需要導入WijmoJS的CSS，以確保所有WijmoJS控件將在整個應用程序中正確設置樣式。

接下來，我們定義適用于這些元素中托管的“應用程序面板”元素和控件的規則。

當然，我們也可以在組件級別的“app.component.css”文件中定義“應用程序面板”規則。

現在按ctrl + S保存所有文件中的更改并切換回瀏覽器查看結果：

由于表格和圖表綁定到同一個CollectionView，因此對表格中的數據所做的任何更改都會自動反映在圖表中。例如，您可以單擊列標題對數據進行排序或使用鍵盤編輯一些值。

將WijmoJS集成到現代Angular應用程序中只需要使用NPM進行安裝并從庫中導入所需的組件即可。

使用WijmoJS能夠確保您在不同的框架中使用完全相同的UI組件，并使您可以更輕松地使用兩個或多個框架。或者，在未來隨意切換框架。

用 WijmoJS 玩轉您的 Web 應用 —— Vue