余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

移动/Web开发框架DevExtreme入门级教程(Angular)- 创建一个应用

xiyangw 2022-11-25 12:08 25 浏览 0 评论

如果您从头开始创建一个项目,可使用DevExtreme Angular模板,这是一个简单的应用程序,带有导航菜单和响应式布局中的几个示例视图(请参阅实时预览)。

DevExtreme Complete Subscription官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

移动/Web开发框架DevExtreme入门级教程(Angular)- 创建一个应用

您可以使用DevExtreme CLI 生成此应用程序:

npx -p devextreme-cli devextreme new angular-app app-name
cd app-name
npm run start

该应用程序已经包含 DataGrid 和 Form UI 组件,可以在src\pages\display-data\display-data.component.html 和 src\pages\profile\profile.component.html 文件中分别找到它们的配置。以下说明以 Button UI 组件为例展示了如何使用其他DevExtreme UI 组件:

1. 在将要使用它的 NgModule 中导入DevExtreme UI 组件的模块,打开 src\app\app-routing.module.ts 文件并添加以下代码:

app-routing.module.ts

// ...
import { ..., DxButtonModule } from 'devextreme-angular';

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

2. 在标记中配置 DevExtreme UI 组件,将以下代码添加到 src\app\pages\home\home.component.html 文件中:

home.component.html

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

3. 在应用程序类中声明回调函数、事件处理程序和绑定属性。 在这个例子中,我们在 src\app\pages\home\home.component.ts 文件中声明了 onClick 事件处理程序:

home.component.ts

// ...
export class AppComponent {
helloWorld() {
alert('Hello world!');
}
}

如果您在浏览器中转到主页视图,您应该会看到按钮。


相关推荐

前后端分离 Vue + NodeJS(Koa) + MongoDB实践

作者:前端藏经阁转发链接:https://www.yuque.com/xwifrr/gr8qaw/vr51p4写在前面闲来无事,试了一下Koa,第一次搞感觉还不错,这个项目比较基础但还是比较完整了,...

MongoDB 集群如何工作?

一、什么是“MongoDB”?“MongoDB”是一个开源文档数据库,也是领先的“NoSQL”数据库,分别用“C++”“编程语言”编写,使用带有“Schema”的各种类似JSON的文档,是也分别被认为...

三部搭建mongo,和mongo UI界面

三步搭建mongo,和mongoUI界面安装首先你需要先有一个docker的环境检查你的到docker版本docker--versionDockerversion18.03.1-ce,b...

Mongodb 高可用落地方案

此落地方案,用于实现高可用。复制集这里部署相关的复制集,用于实现MongoDB的高可用。介绍MongoDB复制集用于提供相关的数据副本,当发生硬件或者服务中断的时候,将会从副本中恢复数据,并进行自动...

一次线上事故,我顿悟了MongoDB的精髓

大家好,我是哪吒,最近项目在使用MongoDB作为图片和文档的存储数据库,为啥不直接存MySQL里,还要搭个MongoDB集群,麻不麻烦?让我们一起,一探究竟,继续学习MongoDB分片的理论与实践,...

IDEA中安装MongoDB插件-再也无要nosql manager for mongodb

大家都知道MongoDB数据库作为典型的非关系型数据库被广泛使用,但基于MongoDB的可视化管理工具-nosqlmanagerformongodb也被用的较多,但此软件收费,所以国内的破解一般...

数据库监控软件Lepus安装部署详解

Lepus安装部署一、软件介绍Lepus是一套开源的数据库监控平台,目前已经支持MySQL、Oracle、SQLServer、MongoDB、Redis等数据库的基本监控和告警(MySQL已经支持复...

YAPI:从0搭建API文档管理工具

背景最近在找一款API文档管理工具,之前有用过Swagger、APIManager、Confluence,现在用的还是Confluence。我个人一直不喜欢用Swagger,感觉“代码即文档”,让代...

Mac安装使用MongoDB

下载MongoDB包:https://www.mongodb.com/download-center解压mongodb包手动解压到/usr/local/mongodb文件夹配置Mac环境变量打开环境...

保证数据安全,不可不知道的MongoDB备份与恢复

大家在项目中如果使用MongoDB作为NOsql数据库进行存储,那一定涉及到数据的备份与恢复,下面给大家介绍下:MongoDB数据备份方法在MongoDB中我们使用mongodump命令来备...

MongoDB数据备份、还原脚本和定时任务脚本

备注:mongodump和mongorestore命令需要在MongoDB的安装目录bin下备份脚本备份格式/usr/local/mongodb/bin/mongodump -h ...

等保2.0测评:mongoDB数据库

一、MongoDB介绍MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产...

MongoDB入门实操《一》

什么是MongoDBMongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之...

Python安装PyMongo的方法详细介绍

欢迎点击右上角关注小编,除了分享技术文章之外还有很多福利,私信学习资料可以领取包括不限于Python实战演练、PDF电子文档、面试集锦、学习资料等。前言本文主要给大家介绍的是关于安装PyMongo的...

第四篇:linux系统中mongodb的配置

建议使用普通用户进行以下操作。1、切换到普通用户odysee。2、准备mongodb安装包,自行去官网下载。3、解压安装包并重命名为mongodb4.04、配置mongodbcdmongod...

取消回复欢迎 发表评论: