下載DevExpress v20.2完整版    DevExpress v20.2漢化資源獲取

DevExpress Universal擁有.NET開發需要的所有平臺控件，包含600多個UI控件、報表平臺、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

重要提示：使用本教程需要熟悉React的基本概念和模式，要查看這些概念，請訪問。

Web Dashboard是一個客戶端控件，它使用HTTP請求與服務器部分進行通信：

• 客戶端部分是一個JavaScript應用程序，向最終用戶提供UI來設計和與儀表板進行交互，是基礎控件。
• 服務器部分是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

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

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

5. 跳轉到項目的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");

6. 使用以下命令啟動應用程序。

cmd

npm start

在瀏覽器中打開http：// localhost：4200 /以查看結果，Web Dashboard 顯示存儲在預配置服務器（//demos.devexpress.com/services/dashboard/api）上的儀表板。

DevExpress技術交流群2：775869749      歡迎一起進群討論