インターフェイスコントロールDevExpress-AngularCLIアプリケーションにWebダッシュボードを追加

DevExpress Technical Exchange Group 3：700924826グループディスカッションへようこそ

DevExpress Universalには、600を超えるUIコントロール、レポートプラットフォーム、DevExpress Dashboard eXpressAppフレームワーク、CodeRush for Visual Studio、一連の補助ツールなど、.NET開発に必要なすべてのプラットフォームコントロールがあります。

この方法は、クライアントサーバーモデルに基づいています。サーバー（ASP.NETCoreまたはASP.NETMVCバックエンド）と、必要なすべてのスタイル、スクリプト、およびHTMLテンプレートを含むクライアント（フロントエンド）アプリケーションが必要です。。クライアントのスクリプトバージョンは、マイナーバージョンまでサーバーのライブラリバージョンと一致する必要があることに注意してください。

この記事では、DxDashboardControlModuleモジュールをAngularアプリケーションにインポートし、Webダッシュボードを表示する方法について説明します。

前提条件

Node.jsとnpmがコンピューターにインストールされていることを確認してください。
コマンドプロンプトで、Angular CLI（コマンドラインインターフェイスツール）をグローバルにインストールします。

cmd

npm install -g @ angular / cli

このチュートリアルを使用するには、Angularの基本的な概念とパターンに精通し、基本を学ぶ必要があります：angular.io

請求

クライアントのスクリプトバージョンは、サーバーのライブラリバージョンからマイナーバージョンまで一致している必要があります。
devexpress npmパッケージのバージョンは同じである必要があります（メジャーバージョンとマイナーバージョンは同じである必要があります）。

Angularアプリケーションを作成する

コマンドプロンプトで、Angularアプリケーションを作成します。

cmd

新しいダッシュボードの角度-アプリ

プロジェクトを作成したら、作成したフォルダーに移動します。

cmd

cdダッシュボード-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 / analytics-core @ 20.2-next devextreme @ 20.2-next [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で設定された値コア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

海抜スタート

ブラウザでhttp：// localhost：4200 /を開いて結果を表示します。Webダッシュボードには、事前設定されたサーバー（https://demos.devexpress.com/services/dashboard/api）に保存されているダッシュボードが表示されます。以下の手順に従って、サーバーを構成します。

DevExpress中国語のWebサイトにアクセスして、最新の製品情報を直接入手してください。

インターフェイスコントロールDevExpress-AngularCLIアプリケーションにWebダッシュボードを追加

おすすめ