V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
powertoolsteam
V2EX  ›  推广

使用 Npm 来创建 WijmoJS 的 Angular6 及各版本的应用

  •  
  •   powertoolsteam · 2019-03-06 14:45:29 +08:00 · 947 次点击
    这是一个创建于 2073 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在本系列的第一篇文章中,我们展示了如何使用 WijmoJS,NPM,Webpack 和 JavaScript 框架构建 Web 应用程序。( https://www.grapecity.com.cn/blogs/wijmo-2018v1-npm )

    在本文中,我们将展示如何将 WijmoJS 与 NPM 和 Webpack 一起使用,来创建最流行的基于 HTML5 的 JavaScript Web 应用程序。本博客主要使用 WijmoJS+AngularJS 来构建 Web 应用程序,移动应用程序或桌面应用程序,这个全功能的框架结合了声明性模板,依赖注入以及端到端工具。 阅读更多关于 WijmoJS 的 Angular 支持。( https://www.grapecity.com.cn/developer/wijmojs/angular )

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

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

    • 安装适当的 CLI (命令行界面实用程序)以生成,运行,维护和部署应用程序。
    • 使用 CLI 创建应用程序。
    • 使用 NPM 将 WijmoJS 添加到应用程序。
    • 导入您要使用的组件并添加适当的标记。

    具体步骤如下:

    第 1 步,创建一个新的 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 { }
    

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

    第 3 步,向控件添加数据

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

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

    // 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 保存所有文件中的更改并切换回浏览器查看结果

    由于表格和图表绑定到同一个 CollectionView,因此对表格中的数据所做的任何更改都会自动反映在图表中。 例如,您可以单击列标题对数据进行排序或使用键盘编辑一些值。

    总结

    1. 将 WijmoJS 集成到现代 Angular 应用程序中只需要使用 NPM 进行安装并从库中导入所需的组件即可。
    2. 使用 WijmoJS 能够确保您在不同的框架中使用完全相同的 UI 组件,并使您可以更轻松地使用两个或更多框架,或者在未来切换框架。

    扩展阅读

    使用 Npm 来创建 WijmoJS 的 Ionic 的应用 ( https://www.grapecity.com.cn/blogs/wijmo-2018v1-npm-ionic )

    使用 Npm 来创建 Wijmo 的 React 的应用 ( https://www.grapecity.com.cn/blogs/wijmo-2018v1-npm-react )

    使用 Npm 来创建 Wijmo 的 VueJs 的应用 ( https://www.grapecity.com.cn/blogs/wijmo-2018v1-npm-vuejs )

    WijmoJS ( https://www.grapecity.com.cn/developer/wijmojs )

    快如闪电,触控优先。纯前端控件集 WijmoJS,为您的企业应用提供更加灵活的操作体验,在全球率先支持 AngularJS,并提供性能卓越、零依赖的 FlexGrid 和金融图表等多个控件,为您提供易用、轻松的操作体验,全面满足开发所需。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5586 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:44 · PVG 09:44 · LAX 17:44 · JFK 20:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.