下載DevExpress v20.2完整版

DevExpress技術交流群3：700924826歡迎一起進群討論

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

此方法基於客戶端 - 伺服器模型，您需要一個伺服器（一個ASP.NET Core或ASP.NET MVC後端）和一個客戶端（前端）應用程式，其中包括所有必需的樣式、指令碼和HTML模板。請注意，客戶端上的指令碼版本應與伺服器上的庫版本匹配，直至次要版本。

本文介紹如何將DxDashboardControlModule模組匯入Angular應用程式並顯示Web Dashboard。

先決條件

• 確保在計算機上安裝了Node.js和npm。
• 在命令提示符中，全域性安裝Angular CLI（命令列介面工具）：

cmd

npm install -g @angular/cli

使用本教程需要熟悉Angular的基本概念和模式，學習基礎：angular.io

要求

• 客戶端上的指令碼版本應與伺服器上的庫版本匹配，直至次要版本。
• devexpress npm軟體包的版本應該相同（其主要版本和次要版本應該相同）。

建立Angular應用程式

在命令提示符下，建立一個Angular應用程式：

cmd

ng new dashboard-angular-app

建立專案後，導航到建立的資料夾：

cmd

cd dashboard-angular-app

安裝儀表板軟體包

devexpress-dashboard npm軟體包將devextreme和@ devexpress / analytics-core引用為peerDependencies，peerDependencies軟體包應手動安裝。 這使開發人員可以控制peerDependencies軟體包的版本，並保證該軟體包安裝一次，devexpress-dashboard-angular軟體包包含DashboardControl元件和模組。

安裝具有必需的peerDependencies的儀表板軟體包：

cmd

npm install [email protected] [email protected] @devexpress/[email protected] [email protected] [email protected] --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="https://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

在瀏覽器中開啟http://localhost:4200/來檢視結果，Web儀表板顯示儲存在預配置伺服器（https://demos.devexpress.com/services/dashboard/api）上的儀表板。 請按照以下說明配置伺服器：

• Server-Side Configuration (ASP.NET Core)
• Server-Side Configuration (ASP.NET MVC)

上DevExpress中文網，獲取第一手最新產品資訊！