关于angular:实用企业级Angular-Dashboard应用程序创建Part-1

36次阅读

共计 1961 个字符,预计需要花费 5 分钟才能阅读完成。

点击获取工具 >>
重要提醒 :应用本教程须要相熟 React 的基本概念和模式,要查看这些概念,请拜访 angular.io。

Web Dashboard 是一个客户端控件,它应用 HTTP 申请与服务器局部进行通信:

  • 客户端局部是一个 JavaScript 应用程序,向最终用户提供 UI 来设计和与仪表板进行交互,DashboardControl 是根底控件。
  • 服务器局部是 ASP.NET Core 或 ASP.NET MVC 应用程序,它解决客户端数据申请,并包含各种后端性能,例如数据拜访、仪表板存储等。

本教程创立并配置一个客户端 Angular 应用程序,该应用程序蕴含 Web Dashboard 和一个基于 ASP.NET Core 应用程序的服务器。

先决条件
  • Node.js 8+
  • Angular CLI 6+
要求
  • 客户端上的脚本版本应与服务器上的库版本匹配。
  • DevExpress npm 软件包的版本应该雷同。
Step 1. 在 Angular 我的项目中配置 Client Dashboard 控件
  1. 创立一个全新的 angular 利用。

cmd

ng new dashboard-app

创立我的项目后,导航到创立的文件夹:

cmd

cd dashboard-app

  1. 装置具备必须的 peerDependencies 的仪表板软件包。

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 文件夹中找到所有库。

  1. 在 app.module.ts 文件中,导入 DxDashboardControlModule 模块。

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. 关上 app.component.html 文件,并将其内容替换为以下元素以出现仪表板组件:

html

<dx-dashboard-control

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

  1. 跳转到我的项目的 src 文件夹,而后关上 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”);

  1. 应用以下命令启动应用程序。

cmd

npm start

在浏览器中关上 http:// localhost:4200 / 以查看后果,Web Dashboard 显示存储在预配置服务器(https://demos.devexpress.com/…)上的仪表板。

正文完
 0