彩票走势图

界面控件DevExpress使用教程:将Web Dashboard添加到Angular CLI应用程序

翻译|行业资讯|编辑:龚雪|2021-01-11 10:02:16.827|阅读 332 次

概述:本文将为大家介绍如何将Web Dashboard添加到Angular CLI应用程序,欢迎下载最新版DevExpress体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

下载DevExpress v20.2完整版    DevExpress v20.2汉化资源获取

DevExpress Universal拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。

此方法基于客户端 - 服务器模型,您需要一个服务器(一个ASP.NET Core或ASP.NET MVC后端)和一个客户端(前端)应用程序,其中包括所有必需的样式、脚本和HTML模板。请注意,客户端上的脚本版本应与服务器上的库版本匹配,直至次要版本。

本文介绍如何将DxDashboardControlModule模块导入Angular应用程序并显示Web Dashboard。

先决条件
  • 确保在计算机上安装了。
  • 在命令提示符中,全局安装(命令行界面工具):

cmd

npm install -g @angular/cli

使用本教程需要熟悉Angular的基本概念和模式,学习基础:

要求
  • 客户端上的脚本版本应与服务器上的库版本匹配,直至次要版本。
  • devexpress npm软件包的版本应该相同(其主要版本和次要版本应该相同)。
创建Angular应用程序

在命令提示符下,创建一个Angular应用程序:

cmd

ng new dashboard-angular-app

创建项目后,导航到创建的文件夹:

cmd

cd dashboard-angular-app

安装仪表板软件包

devexpress-dashboard npm软件包将devextreme和@ devexpress / analytics-core引用为,peerDependencies软件包应手动安装。 这使开发人员可以控制peerDependencies软件包的版本,并保证该软件包安装一次,devexpress-dashboard-angular软件包包含DashboardControl组件和模块。

安装具有必需的peerDependencies的仪表板软件包:

cmd

npm install devexpress-dashboard@20.2-next devexpress-dashboard-angular@20.2-next @devexpress/analytics-core@20.2-next devextreme@20.2-next devextreme-angular@20.2-next --save

安装完成后,您可以在node_modules文件夹中找到所有库。

导入仪表板模块

在app.module.ts文件中,导入DxDashboardControlModule模块。

typescript

// ...
import { DxDashboardControlModule } from 'devexpress-dashboard-angular';

@NgModule({
imports: [
// ...
DxDashboardControlModule
],
// ...
})
export class AppModule { }

添加仪表板组件

打开app.component.html文件,并添加<dx-dashboard-control>元素来呈现仪表板组件:

html

<dx-dashboard-control 
style="display: block;width:100%;height:800px;" 
endpoint="//demos.devexpress.com/services/dashboard/api"
>
</dx-dashboard-control>

DashboardControlOptions.endpoint属性指定用于将数据请求发送到服务器的URL,该值应由承载Web仪表板服务器端的基本URL和路由前缀组成 - 路由前缀 - 在MVC / .NET Core MapDashboardRoute属性中设置的值。

添加全局样式

在styles.css文件中添加以下全局样式:

css

@import url("../node_modules/jquery-ui/themes/base/all.css"); 
@import url("../node_modules/devextreme/dist/css/dx.common.css"); 
@import url("../node_modules/devextreme/dist/css/dx.light.css"); 
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css"); 
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css"); 
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css"); 
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

运行应用程序

运行应用程序。

cmd

npm start

在浏览器中打开//localhost:4200/来查看结果,Web仪表板显示存储在预配置服务器(//demos.devexpress.com/services/dashboard/api)上的仪表板。 请按照以下说明配置服务器:


DevExpress技术交流群3:700924826      欢迎一起进群讨论

慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP