DevExpress方案式服务已正式上线

DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

DevExtreme初级入门教程(Angular篇):如将DevExtreme添加到Angular CLI应用程序

来源:   发布时间:2021-07-27   浏览:159次

在开始本教程之前,您需要一个使用 Angular CLI 创建的 Angular 7+ 应用程序。

DevExtreme v21.1最新版下载

一键设置

您可以使用作为 DevExtreme CLI 一部分的单个 npx 命令安装和配置 DevExtreme 及其依赖项:

npx -p devextreme-cli devextreme add devextreme-angular

运行该命令后,您可以跳过以下文章,直接继续导入 DevExtreme 模块。

如果该命令因任何原因不可用或者您需要旧版本,请按照以下说明进行手动设置。

安装 DevExtreme

安装 devextreme 和 devextreme-angular npm 包:

npm install devextreme@21.1 devextreme-angular@21.1 --save --save-exact

注意:建议保存 DevExtreme 的确切版本以避免意外更新,因为 DevExtreme 不使用语义版本控制。在我们的系统版本中,第一个和中间的数字表示可能包含操作更改的主要版本。

配置Stylesheets

打开 angular.json 文件并引用预定义的主题样式表(下面代码中的 dx.light.css)。

angular.json

{
"projects": {
"ProjectName": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/devextreme/dist/css/dx.light.css",
"src/styles.css"
],
...
},
...
},
...
}
},
...
},
...
}

然后跳转到src文件夹,打开index.html文件,并将dx-viewport类添加到 <body> 标签,这确保将主题颜色和排版设置应用于所有页面元素(而不仅仅是 DevExtreme UI 组件)。

index.html

<html lang="en">
<head>
<!-- ... -->
</head>
<body class="dx-viewport">
<app-root></app-root>
</body>
</html>

注意:基于SVG 的 UI 组件不需要主题样式表,如果您选择引用样式表,UI 组件将应用与其匹配的外观。

注册第三方依赖项

JSZip注册

DevExtreme 需要JSZip 库,从 JSZip v3.3.0 开始,该库不需要注册。如果您使用早期版本,请在 tsconfig.json 文件中注册 JSZip:

tsconfig.json

{
...
"compilerOptions": {
...
"paths": {
"jszip": [
"node_modules/jszip/dist/jszip.min.js"
]
}
}
}

全局注册

如果要使用 Globalize 进行本地化,请安装它和 devextreme-cldr-data 扩展:

npm install --save-dev devextreme-cldr-data globalize

然后,在tsconfig.json文件中注册Globalize和CLDR脚本...

tsconfig.json

{
...
"compilerOptions": {
...
"paths": {
"globalize": [
"node_modules/globalize/dist/globalize"
],
"globalize/*": [
"node_modules/globalize/dist/globalize/*"
],
"cldr": [
"node_modules/cldrjs/dist/cldr"
],
"cldr/*": [
"node_modules/cldrjs/dist/cldr/*"
]
}
}
}

...并在 src 文件夹中创建一个 Typings.d.ts 文件,其中包含 Globalize、DevExtreme本地化消息和devextreme-cldr-data的环境声明:

typingsd.ts

declare module 'globalize' {
const value: any;
export default value;
}

declare module 'devextreme/localization/messages/*' {
const value: any;
export default value;
}

declare module 'devextreme-cldr-data/*' {
const value: any;
export default value;
}

或者,您可以使用 Intl 作为更轻量级的本地化解决方案。

导入DevExtreme模块

跳转到将在其中使用DevExtreme UI组件的NgModule并导入所需的DevExtreme模块,请注意如果在应用程序中配置了tree shaking,您可以从devextreme-angular导入模块,否则应该从特定文件中导入它们。

app.module.ts

// ...
import { DxButtonModule } from 'devextreme-angular';
// or if tree shaking is not configured
// import { DxButtonModule } from 'devextreme-angular/ui/button';

@NgModule({
imports: [
// ...
DxButtonModule
],
// ...
})
export class AppModule { }

现在您可以在应用程序中使用DevExtreme UI组件:

app.component.html

<dx-button
text="Click me"
(onClick)="helloWorld()">
</dx-button>

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
helloWorld() {
alert('Hello world!');
}
}
运行应用程序

使用以下命令运行应用程序:

ng serve

打开 http://localhost:4200/ 浏览应用程序。

添加DevExtreme布局(可选)

您可以使用DevExtreme CLI将DevExtreme布局模板添加到您的应用程序。

DevExtreme | 下载试用

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。


DevExpress技术交流群4:715863792      欢迎一起进群讨论

更多DevExpress线上公开课、中文教程资讯请上中文网获取

慧都DevExpress企业定制服务全新升级,助力企业打造一流应用界面
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/2557.html

相关产品: DevExtreme跨平台开发框架,


联系我们
  • 重庆总部 023-68661681 400-700-1020
购买
  • sales@evget.com
合作
  • business@evget.com


在线
客服
在线
QQ
电话
咨询
023-68661681
返回
顶部