下載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="http://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      歡迎一起進群討論