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

爲何選擇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文件，以下所示：

<!-- The content below is only a placeholder and can be replaced. -->

<div style="text-align:center">

  <h1>

    Welcome to {{ title }}!

  </h1>

  <img width="100" alt="Angular Logo" src="data:image/svg+xml;base64,PH…">

</div>

<h2>Here are some Wijmo controls to help you start:</h2>

<div class="App-panel">

  <wj-flex-grid [itemsSource]="data">

  </wj-flex-grid>

  <wj-flex-chart [itemsSource]="data" [bindingX]="'country'">

    <wj-flex-chart-series [binding]="'sales'" [name]="'Sales'">

    </wj-flex-chart-series>

    <wj-flex-chart-series [binding]="'expenses'" [name]="'Expenses'">

    </wj-flex-chart-series>

    <wj-flex-chart-series [binding]="'downloads'" [name]="'Downloads'">

    </wj-flex-chart-series>

  </wj-flex-chart>

</div>

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

 

第5步，更新樣式表

到這一步基本大功告成，最後咱們將爲本身的應用程序添加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」文件中定義「應用程序面板」規則。

 

 

第6步，在瀏覽器中運行

如今按ctrl + S保存全部文件中的更改並切換回瀏覽器查看結果：

Angular app

 

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

 

總結

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

2.        使用WijmoJS可以確保您在不一樣的框架中使用徹底相同的UI組件，並使您能夠更輕鬆地使用兩個或多個框架。或者，在將來隨意切換框架。

 

往期精彩

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