使用hammer为angular2添加手势支持(1)环境搭建


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

这里写图片描述

hammer.component.html的内容为

<p>
hammer works!
</p>

将app.component.html的内容改为

<app-hammer></app-hammer>

之后运行ng serve,在浏览器中打开localhost:4200,就能看见hammer works!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: