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

作為一款純前端控件集，WijmoJS秉承“快如閃電，觸控優(yōu)先”的設(shè)計理念，在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時，專注于企業(yè)應(yīng)用開發(fā)，不斷優(yōu)化產(chǎn)品架構(gòu)，與時俱進(jìn)。除在全球率先支持AngularJS外，現(xiàn)已全面應(yīng)用于React、Vuejs、TypeScript 、Ionic等主流框架中。

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

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

在這里，首先恭喜Angular團(tuán)隊發(fā)布Angular version 6.0.0！

在本文中，我們將展示如何使用WijmoJS和AngularJS來創(chuàng)建目前最流行的，基于HTML5的JavaScript Web應(yīng)用程序。 閱讀更多關(guān)于WijmoJS的Angular支持。

我們不會深入講解NPM，Webpack或Angular本身的細(xì)節(jié)。因?yàn)檫@些工具都非常受歡迎，并且有完整的幫助文檔。本文中，我們將專注于“如何將WijmoJS添加到用Angular編寫的Web應(yīng)用程序中”。

在所有框架中創(chuàng)建應(yīng)用程序的基本步驟都是類似的：

l 安裝適當(dāng)?shù)腃LI（命令行界面實(shí)用程序）以生成，運(yùn)行，維護(hù)和部署應(yīng)用程序。

l 使用CLI創(chuàng)建應(yīng)用程序。

l 使用NPM將WijmoJS添加到應(yīng)用程序。

l 導(dǎo)入您要使用的組件并添加適當(dāng)?shù)臉?biāo)記。

按照以下步驟創(chuàng)建一個新的Angular應(yīng)用程序，啟動并運(yùn)行：

打開“src / app / app.module.ts”文件，為網(wǎng)格和圖表添加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 { }

本段代碼除了導(dǎo)入我們想要的WijmoJS模塊外，還會自動應(yīng)用許可證密鑰從應(yīng)用程序中刪除WijmoJS水印。 如果您沒有許可證密鑰，則可以跳過此步驟。

首先打開“src / app / app.component.ts”文件，并為控件提供一些數(shù)據(jù)：

    // 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而不是一個常規(guī)數(shù)組。 CollectionView類支持排序，篩選，分組，貨幣和通知。在這個例子中，我們將它用作網(wǎng)格和圖表的數(shù)據(jù)源。

要將表格和圖表添加到應(yīng)用程序，請編輯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這些指令是從表格和圖表模塊導(dǎo)入的。

到這一步基本大功告成，最后我們將為自己的應(yīng)用程序添加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;
    
    }

首先，我們需要導(dǎo)入WijmoJS的CSS，以確保所有WijmoJS控件將在整個應(yīng)用程序中正確設(shè)置樣式。

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

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

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

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

將WijmoJS集成到現(xiàn)代Angular應(yīng)用程序中只需要使用NPM進(jìn)行安裝并從庫中導(dǎo)入所需的組件即可。

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

用 WijmoJS 玩轉(zhuǎn)您的 Web 應(yīng)用 —— Vue