编程知识 cdmana.com

practical! Enterprise class angular Dashboard Application creation (Part 1)

Click to get the tool >>
Important note : Using this tutorial requires familiarity with React The basic concepts and models of the , To see these concepts , Please visit angular.io .

Web Dashboard Is a client control , It USES HTTP Request to communicate with the server part :

  • The client part is a JavaScript Applications , Provide end users with UI To design and interact with the dashboard ,DashboardControl Is the underlying control .
  • The server part is ASP.NET Core or ASP.NET MVC Applications , It handles client data requests , And includes a variety of back-end functions , For example, data access 、 Dashboard storage, etc .

This tutorial creates and configures a client Angular Applications , The application contains Web Dashboard And one based on ASP.NET Core The application's server .

precondition
requirement
  • The version of the script on the client should match the version of the library on the server .
  • DevExpress npm The version of the package should be the same .
Step 1. stay Angular Configuration in the project Client Dashboard Control
  1. Create a new angular application .

cmd

ng new dashboard-app

After project creation , Navigate to the folder you created :

cmd

cd dashboard-app

  1. The installation has the necessary peerDependencies The dashboard package for .

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

After installation , You can go to node_modules Find all the folders in the library .

  1. stay app.module.ts In file , Import DxDashboardControlModule modular .

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 { }

  1. open app.component.html file , And replace its contents with the following elements to render the dashboard component :

html

<dx-dashboard-control

endpoint='https://demos.devexpress.com/...'>
</dx-dashboard-control>

  1. Jump to the project's src Folder , Then open the styles.css file . Add the following global styles :

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");

  1. Start the application with the following command .

cmd

npm start

Open it in a browser http:// localhost:4200 / To see the results ,Web Dashboard Display stored on preconfigured servers (https://demos.devexpress.com/...) On the dashboard .

版权声明
本文为[user_ W1wPozIR]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224110625799T.html

Scroll to Top