使用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 联系我们: