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

0次阅读

共计 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 控件

创立一个全新的 angular 利用。

cmd

ng new dashboard-app

创立我的项目后，导航到创立的文件夹：

cmd

cd dashboard-app

装置具备必须的 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 文件夹中找到所有库。

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

关上 app.component.html 文件，并将其内容替换为以下元素以出现仪表板组件：

html

<dx-dashboard-control

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

跳转到我的项目的 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”);