开发者论坛

 找回密码
 注册 (请使用非IE浏览器)
查看: 7488|回复: 0

[WinForm] 创建一个Angular Dashboard应用(Part 1)

[复制链接]

0

精华

8

贡献

1767

赞扬

特约版主

帖子
583
软币
4524
在线时间
275 小时
注册时间
2019-2-21
发表于 2020-12-24 09:49:35 | 显示全部楼层 |阅读模式
DevExpress Universal拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。
重要提示:使用本教程需要熟悉React的基本概念和模式,要查看这些概念,请访问angular.io
Web Dashboard是一个客户端控件,它使用HTTP请求与服务器部分进行通信:
  • 客户端部分是一个JavaScript应用程序,向最终用户提供UI来设计和与仪表板进行交互,DashboardControl是基础控件。
  • 服务器部分是ASP.NET Core或ASP.NET MVC应用程序,它处理客户端数据请求,并包括各种后端功能,例如数据访问、仪表板存储等。
本教程创建并配置一个客户端Angular应用程序,该应用程序包含Web Dashboard和一个基于ASP.NET Core应用程序的服务器。
先决条件要求
  • 客户端上的脚本版本应与服务器上的库版本匹配。
  • DevExpress npm软件包的版本应该相同。
Step 1. 在Angular项目中配置Client Dashboard控件
1. 创建一个全新的angular应用。
cmd
ng new dashboard-app
创建项目后,导航到创建的文件夹:
cmd
cd dashboard-app
2. 安装具有必需的peerDependencies的仪表板软件包。
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文件夹中找到所有库。
3. 在app.module.ts文件中,导入DxDashboardControlModule模块。
typescript
[C#] 纯文本查看 复制代码
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
DxDashboardControlModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

4. 打开app.component.html文件,并将其内容替换为以下元素以呈现仪表板组件:
html
[HTML] 纯文本查看 复制代码
<dx-dashboard-control 
style="display: block;width:100%;height:800px;" 
endpoint='https://demos.devexpress.com/services/dashboard/api'>
</dx-dashboard-control>

5. 跳转到项目的src文件夹,然后打开styles.css文件。 添加以下全局样式:
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");

6. 使用以下命令启动应用程序。
cmd
npm start
在浏览器中打开http:// localhost:4200 /以查看结果,Web Dashboard 显示存储在预配置服务器(https://demos.devexpress.com/services/dashboard/api)上的仪表板。

DevExpress技术交流群2:775869749      欢迎一起进群讨论

回复

使用道具 举报

Archiver|手机版|小黑屋|开发者网 ( 苏ICP备08004430号-2 )
版权所有:南京韵文教育信息咨询有限公司

GMT+8, 2024-3-29 15:32

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表