hammer.js对angular非常友好,无论是angular1还是angular2都可以很好的使用hammer.js进行移动端手势开发。
工具及技术选型
- 开发框架:angular 2
- 构建工具:angular-cli
- 样式:less
- 手势库:hammer.js
开始开发
首先安装angular-cli
npm install -g angular-cli
构建开发环境
新建文件夹 ng2-hammer-bigpicture
命令行进入ng2-hammer-bigpicture文件夹下,输入ng init
,等待安装结束
修改angular-cli.json
我们要用less来写样式,修改默认的样式文件。在项目根目录中将angular-cli.json
中的
"styles": [
"styles.css"
],
改为
"styles": [
"styles.less"
],
进入src目录,新建文件style.less,同时删除文件style.css。
把defaults
下的
"styleExt": "css",
改为
"styleExt": "less",
新建hammer组件
运行
ng g component hammer
在 src/app
目录下生成文件夹hammer
hammerponent.html的内容为
<p>
hammer works!
</p>
将appponent.html的内容改为
<app-hammer></app-hammer>
之后运行ng serve
,在浏览器中打开localhost:4200,就能看见hammer works!
更多推荐
使用hammer为angular2添加手势支持(1)环境搭建
发布评论