使用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!