DevExtreme 搭建Node.js开发环境
简介
DevExtreme is a component suite for creating highly responsive web applications for touch devices and traditional desktops.
创建Angular应用
$ ng new DevExtremeDemo --skip-install --skip-git
$ cnpm install
安装DevExtreme
$ cnpm install --save devextreme devextreme-angular
设置angular-cli.json 文件
"styles": [
"styles.scss",
"../node_modules/devextreme/dist/css/dx.common.css",
"../node_modules/devextreme/dist/css/dx.spa.css",
"../node_modules/devextreme/dist/css/dx.carmine.css"
],
参考源码
index.html
<!doctype html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<title>DevExtremeDemo</title>
<base
href="/">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<link
rel="icon"
type="image/x-icon"
href="favicon.ico">
<link
rel="stylesheet"
type="text/css"
href="assets/css/dx.common.css" />
<link
rel="stylesheet"
type="text/css"
href="assets/css/dx.spa.css" />
<link
rel="stylesheet"
type="text/css"
href="assets/css/dx.carmine.css" />
</head>
<body
class="dx-viewport">
<app-root></app-root>
</body>
</html>
app.module.ts
import { BrowserModule } from
'@angular/platform-browser';
import { NgModule } from
'@angular/core';
import { DxButtonModule } from
'devextreme-angular';
import { AppComponent } from
'./app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
DxButtonModule,
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export
class AppModule { }
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div
style="text-align:center">
<h1>
Welcome to DevExtreme!
</h1>
</div>
<dx-button
text="Press me" (onClick)="hello()"></dx-button>
<div
class="dx-fieldset">
<div
class="dx-field">
<div
class="dx-field-label">Normal</div>
<div
class="dx-field-value">
<dx-button [text]="okButtonOptions.text" [type]="okButtonOptions.type" (onClick)="okButtonOptions.onClick()"></dx-button>
</div>
</div>
<div
class="dx-field">
<div
class="dx-field-label">Success</div>
<div
class="dx-field-value">
<dx-button [text]="applyButtonOptions.text" [type]="applyButtonOptions.type" (onClick)="applyButtonOptions.onClick()"></dx-button>
</div>
</div>
<div
class="dx-field">
<div
class="dx-field-label">Default</div>
<div
class="dx-field-value">
<dx-button [text]="doneButtonOptions.text" [type]="doneButtonOptions.type" (onClick)="doneButtonOptions.onClick()"></dx-button>
</div>
</div>
<div
class="dx-field">
<div
class="dx-field-label">Danger</div>
<div
class="dx-field-value">
<dx-button [text]="deleteButtonOptions.text" [type]="deleteButtonOptions.type" (onClick)="deleteButtonOptions.onClick()"></dx-button>
</div>
</div>
<div
class="dx-field">
<div
class="dx-field-label">Back</div>
<div
class="dx-field-value">
<dx-button [type]="backButtonOptions.type" (onClick)="backButtonOptions.onClick()"></dx-button>
</div>
</div>
</div>
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div
style="text-align:center">
<h1>
Welcome to DevExtreme!
</h1>
</div>
<dx-button
text="Press me" (onClick)="hello()"></dx-button>
<div
class="dx-fieldset">
<div
class="dx-field">
<div
class="dx-field-label">Normal</div>
<div
class="dx-field-value">
<dx-button [text]="okButtonOptions.text" [type]="okButtonOptions.type" (onClick)="okButtonOptions.onClick()"></dx-button>
</div>
</div>
<div
class="dx-field">
<div
class="dx-field-label">Success</div>
<div
class="dx-field-value">
<dx-button [text]="applyButtonOptions.text" [type]="applyButtonOptions.type" (onClick)="applyButtonOptions.onClick()"></dx-button>
</div>
</div>
<div
class="dx-field">
<div
class="dx-field-label">Default</div>
<div
class="dx-field-value">
<dx-button [text]="doneButtonOptions.text" [type]="doneButtonOptions.type" (onClick)="doneButtonOptions.onClick()"></dx-button>
</div>
</div>
<div
class="dx-field">
<div
class="dx-field-label">Danger</div>
<div
class="dx-field-value">
<dx-button [text]="deleteButtonOptions.text" [type]="deleteButtonOptions.type" (onClick)="deleteButtonOptions.onClick()"></dx-button>
</div>
</div>
<div
class="dx-field">
<div
class="dx-field-label">Back</div>
<div
class="dx-field-value">
<dx-button [type]="backButtonOptions.type" (onClick)="backButtonOptions.onClick()"></dx-button>
</div>
</div>
</div>
app.component.ts
import { Component } from
'@angular/core';
import notify from
'devextreme/ui/notify';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export
class AppComponent {
title = 'app';
okButtonOptions: any;
applyButtonOptions: any;
doneButtonOptions: any;
deleteButtonOptions: any;
backButtonOptions: any;
constructor(){
this.okButtonOptions = {
text: 'OK',
type: 'normal',
onClick: function (e) {
notify("The OK button was clicked");
}
};
this.applyButtonOptions = {
text: "Apply",
type: "success",
onClick: function (e) {
notify("The Apply button was clicked");
}
};
this.doneButtonOptions = {
text: "Done",
type: "default",
onClick: function (e) {
notify("The Done button was clicked");
}
};
this.deleteButtonOptions = {
text: "Delete",
type: "danger",
onClick: function (e) {
notify("The Delete button was clicked");
}
};
this.backButtonOptions = {
type: "back",
onClick: function (e) {
notify("The Back button was clicked");
}
};
}
hello() {
alert('Hello DevExtreme!');
}
}
运行
$ ng serve
浏览器中打开网址 http://localhost:4200/
参考资源
https://github.com/devexpress/DevExtreme-angular
DevExtreme 搭建Node.js开发环境的更多相关文章
- 快速搭建 Node.js 开发环境以及加速 npm
如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...
- 【转】使用nvm快速搭建 Node.js 开发环境
原文链接:http://www.cnblogs.com/shuoer/p/7802891.html 快速搭建 Node.js 开发环境 如果你想长期做 node 开发, 或者想快速更新 node 版本 ...
- ES6 学习笔记 （2）-- Liunx环境安装Node.js 与 搭建 Node.js 开发环境
笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liu ...
- 手把手教你学node之搭建node.js开发环境
搭建node.js开发环境 本文只针对在Linux或者Mac下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 bug 处理能力,所以这部分同学麻烦 ...
- 1.0搭建 Node.js 开发环境
<搭建 Node.js 开发环境> 本课程假设大家都是在 Linux 或者 Mac 下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 ...
- MongoDB 搭建Node.js开发环境
理解Mongoose Elegant MongoDB object modeling for Node.js 安装Mongoose $ cnpm install --save mongoose ...
- Oracle 搭建Node.js开发环境
先决条件 安装oralce客户端驱动. 安装node.js. 创建项目 安装oracledb模块 $npm install oracledb 如果失败了,你可能要爬墙. 参考package ...
- Linux虚拟机中 Node.js 开发环境搭建
Node.js 开发环境搭建: 1.下载CentOS镜像文件和VMWare虚拟机程序; 2.安装VMWare——>添加虚拟机——>选择CentOS镜像文件即可默认安装带有桌面的Linux虚 ...
- [转载]Sublime Text 3 搭建 React.js 开发环境
［转载］Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...
随机推荐
- 动态横向(水平)合并GridView数据行DataRow的列
前一段时间,Insus.NET有写过<动态合并GridView数据行DataRow的列>http://www.cnblogs.com/insus/p/3238348.html, 那是纵向( ...
- c# winform使用IrisSkin2换肤弹不出窗口解决方案
winform使用IrisSkin2换肤弹不出窗口解决方案 这张图能解决超级多博友的问题,知识是共享的,绝不私吞.共同学习,共同进步! 不需要说太多,只需1张图! ...
- Go:创建新进程(os.StartProcess源码解读)
关于如何使用go语言实现新进程的创建和进程间通信,我在网上找了不少的资料,但是始终未能发现让自己满意的答案,因此我打算自己来分析这部分源代码,然后善加利用,并且分享给大家,期望大家能从中获得启发. 首 ...
- ajaxs
AJAX 是一种独立于 Web 服务器软件的浏览器技术.AJAX 基于下列 Web 标准:JavaScript XML HTML CSS 在 AJAX 中使用的 Web 标准已被良好定义,并被所有的主 ...
- PHP 符号
注解符号: // 单行注解 /* */ 多行注解 引号的使用 ’ ’ 单引号,没有任何意义,不经任何处理直接拿过来; " "双引号,PHP动态处理然后输出,一般 ...
- Oracle恢复表数据
Oracle恢复数据 在oracle 10g以及之后的版本,提供了回收站的机制,为了防止误操作将表数据清空而有回收机制. 换句话说,我们删除的表不会立马消失,而是进入回收站.下面我们可以查看回收站 查 ...
- 树状数组【bzoj1103】: [POI2007]大都市meg
1103: [POI2007]大都市meg 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了. 不过,她经常回忆起以前在乡间漫步的情景.昔日,乡 ...
- 牛客国庆集训day5 G 贵族用户 （模拟）
链接:https://www.nowcoder.com/acm/contest/205/G来源:牛客网 题目描述 终于活成了自己讨厌的样子. 充钱能让你变得更强. 在暖婊这个游戏里面,如果你充了x元钱 ...
- 洛谷 P2982 [USACO10FEB]慢下来Slowing down
题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) cows conveniently numbered 1..N mov ...
- Django 解答 01 （pycharm创建项目）
pycharm创建项目 1. 2. 3.Tools --->Deployment--->Options 这一条由always 改为 On explicit save action(Ctrl ...