开发框架DevExtreme入门级教程 - 如何添加到Angular CLI应用 DevExtremeAngulardevexpressweb移动
在开始本教程之前,您需要一个使用 Angular CLI 创建的 Angular 7+ 应用程序。
一键设置
您可以使用作为 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拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress技术交流群4:715863792 欢迎一起进群讨论