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