点击获取工具>>
重要提醒：应用本教程须要相熟React的基本概念和模式，要查看这些概念，请拜访angular.io 。

Web Dashboard是一个客户端控件，它应用HTTP申请与服务器局部进行通信：

  • 客户端局部是一个JavaScript应用程序，向最终用户提供UI来设计和与仪表板进行交互，DashboardControl是根底控件。
  • 服务器局部是ASP.NET Core或ASP.NET MVC应用程序，它解决客户端数据申请，并包含各种后端性能，例如数据拜访、仪表板存储等。

本教程创立并配置一个客户端Angular应用程序，该应用程序蕴含Web Dashboard和一个基于ASP.NET Core应用程序的服务器。

先决条件
  • Node.js 8+
  • Angular CLI 6+
要求
  • 客户端上的脚本版本应与服务器上的库版本匹配。
  • DevExpress npm软件包的版本应该雷同。
Step 1. 在Angular我的项目中配置Client Dashboard控件
  1. 创立一个全新的angular利用。

cmd

ng new dashboard-app

创立我的项目后，导航到创立的文件夹：

cmd

cd dashboard-app

  1. 装置具备必须的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文件夹中找到所有库。

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

typescript

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 { }

  1. 关上app.component.html文件，并将其内容替换为以下元素以出现仪表板组件：

html

<dx-dashboard-control

endpoint='https://demos.devexpress.com/...'>
</dx-dashboard-control>

  1. 跳转到我的项目的src文件夹，而后关上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");

  1. 应用以下命令启动应用程序。

cmd

npm start

在浏览器中关上http：// localhost：4200 /以查看后果，Web Dashboard 显示存储在预配置服务器（https://demos.devexpress.com/...）上的仪表板。