资讯专栏INFORMATION COLUMN

用WijmoJS玩转您的Web应用 —— Angular6

hedge_hog / 865人阅读

摘要:除在全球率先支持外,现已全面应用于等主流框架中。本文中,我们将专注于如何将添加到用编写的应用程序中。使用创建应用程序。接下来,我们定义适用于这些元素中托管的应用程序面板元素和控件的规则。往期精彩用玩转您的应用

为什么选择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文件,如下所示:

    
    
    

Welcome to {{ title }}!

Angular Logo

Here are some Wijmo controls to help you start:

请注意,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,因此对表格中的数据所做的任何更改都会自动反映在图表中。例如,您可以单击列标题对数据进行排序或使用键盘编辑一些值。

总结

将WijmoJS集成到现代Angular应用程序中只需要使用NPM进行安装并从库中导入所需的组件即可。

使用WijmoJS能够确保您在不同的框架中使用完全相同的UI组件,并使您可以更轻松地使用两个或多个框架。或者,在未来随意切换框架

往期精彩

用 WijmoJS 玩转您的 Web 应用 —— Vue

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95382.html

相关文章

  • WijmoJS玩转您的Web —— Ionic

    摘要:在之前的文章中,我们已经介绍了使用与三大框架结合搭建您的应用程序。使用创建应用程序。扩展阅读用玩转您的应用用玩转您的应用用玩转您的应用近期活动问卷调查扬帆万里,因您前行使用反馈意见征集 前言: 在本文中,我们将着重介绍如何将WijmoJS与Ionic一起使用,来创建一款移动端支持优先、快捷高效的应用程序。在之前的文章中,我们已经介绍了使用WijmoJS与Angular、React、Vu...

    fjcgreat 评论0 收藏0
  • WijmoJS玩转您的Web —— React

    摘要:关于作为一款纯前端控件集,秉承快如闪电,触控优先的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。灵活的为用户提供易用轻松的操作体验,全面满足开发所需,是构建企业应用程序最完整的纯前端控件集。 前文回顾 在《用 WijmoJS 玩转您的Web应用》系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法。 而今天,我们将展示如...

    FleyX 评论0 收藏0
  • WijmoJS玩转您的Web —— Vue.js

    摘要:相反,我们将专注于将添加到用编写的简单应用程序中。使用创建应用程序。示例应用程序有两个组件应用程序和。除在全球率先支持外,现已全面应用于等主流框架中。 showImg(https://segmentfault.com/img/bVbcvaQ?w=500&h=278); 概述 在本文中,我们将展示如何将WijmoJS与NPM和Webpack一起使用来创建最流行的基于JavaScript应...

    OnlyMyRailgun 评论0 收藏0
  • 快如闪电,触控优先。新一代的纯前端控件集 WijmoJS发布新版本了

    摘要:全球最大的控件提供商葡萄城宣布,新一代纯前端控件发布版本,进一步增强产品功能,并支持在上的安装和发布,极大的提升了产品的易用性。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业学校和政府机构广泛应用。 全球最大的控件提供商葡萄城宣布,新一代纯前端控件 WijmoJS 发布2018 v1 版本,进一步增强产品功能,并支持在 Npm 上的安装和发布,极大的提升了产品的易用性。 ...

    aikin 评论0 收藏0

发表评论

0条评论

hedge_hog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<