Download DevExpress v20.2 full version
DevExpress Technical Exchange Group 3: 700924826 Welcome to join the group discussion
DevExpress Universal has all the platform controls needed for .NET development, including more than 600 UI controls, reporting platforms, DevExpress Dashboard eXpressApp framework, CodeRush for Visual Studio and a series of auxiliary tools.
This method is based on the client-server model. You need a server (an ASP.NET Core or ASP.NET MVC backend) and a client (front-end) application, which includes all the necessary styles, scripts, and HTML templates. Note that the script version on the client should match the library version on the server, down to the minor version.
This article describes how to import the DxDashboardControlModule module into an Angular application and display the Web Dashboard.
prerequisites
- Make sure that Node.js and npm are installed on your computer .
- In the command prompt, install Angular CLI (command line interface tool) globally :
cmd
npm install -g @angular/cli
To use this tutorial, you need to be familiar with the basic concepts and patterns of Angular, and learn the basics: angular.io
Claim
- The script version on the client should match the library version on the server up to the minor version.
- The version of the devexpress npm package should be the same (the major version and minor version should be the same).
Create an Angular application
At the command prompt, create an Angular application:
cmd
of the new dashboard-angular-app
After creating the project, navigate to the created folder:
cmd
cd dashboard-angular-app
Install the dashboard package
The devexpress-dashboard npm package refers to devextreme and @devexpress/analytics-core as peerDependencies , and the peerDependencies package should be installed manually. This allows developers to control the version of the peerDependencies package and ensure that the package is installed once. The devexpress-dashboard-angular package contains DashboardControl components and modules.
Install the dashboard package with the necessary peerDependencies:
cmd
npm install [email protected] [email protected] @devexpress/[email protected] [email protected] [email protected] --save
After the installation is complete, you can find all libraries in the node_modules folder.
Import dashboard module
In the app.module.ts file, import the DxDashboardControlModule module.
typescript
// ...
import { DxDashboardControlModule } from 'devexpress-dashboard-angular';
@NgModule({
imports: [
// ...
DxDashboardControlModule
],
// ...
})
export class AppModule { }
Add dashboard components
Open the app.component.html file and add the <dx-dashboard-control> element to render the dashboard component:
html
<dx-dashboard-control style="display: block;width:100%;height:800px;" endpoint="https://demos.devexpress.com/services/dashboard/api" > </dx-dashboard-control>
The DashboardControlOptions.endpoint property specifies the URL used to send data requests to the server. This value should consist of the base URL and routing prefix of the server-side hosting the Web dashboard-routing prefix-the value set in the MVC / .NET Core MapDashboardRoute property.
Add global style
Add the following global styles in the styles.css file:
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");
Run the application
Run the application.
cmd
above sea level start
Open http://localhost:4200/ in the browser to view the results. The web dashboard displays the dashboard stored on the pre-configured server (https://demos.devexpress.com/services/dashboard/api). Follow the instructions below to configure the server:
Go to DevExpress Chinese website to get first-hand latest product information!