Phonegap集成angular/bootstrap/animate.css教程

時間 2019-12-01

標籤 phonegap 集成 angular bootstrap animate.css animate css 教程欄目 AngularJS 简体版

原文原文鏈接

1，phonegap集成angular

按照這篇文檔的步驟：http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-go/javascript

首先，對windows用戶而言，該教程中用到的是linux shell命令，須要瞭解一些shell命令與cmd命令之間的對照
若是不用命令行，其實就是一些文件和複製和刪除更名等動做，本身到資源管理器操做就好了。
不過，若是你裝過git for windows的話，會有一個bash環境，這些命令也是能夠用的，建議裝一個，會方便不少。css

1.1 安裝phonegap，下載angular-seed項目

npm install -g phonegap
cd path/where/you/do/work/
phonegap create seedgap com.example.seedgap SeedGap
git clone https://github.com/angular/angular-seed.githtml

1.2 刪除一些再也不須要的資源

主要避免安裝文件過大，否則此步可略過java

cd ../
rm seedgap/www/spec.html
rm -R seedgap/www/spec/
rm seedgap/www/img/logo.png
rm seedgap/www/css/index.cssnode

1.3 手動建新文件

用意未知，這個須要跟.gitignore配合纔有意義，按示例加上吧
若是不用touch命令，如何添加一個點號開頭的文件，請自行放狗搜索linux

touch seedgap/www/img/.gitkeepandroid

1.4 把angular-seed裏面的文件複製到phonegap裏面

cp angular-seed/app/js/* seedgap/www/js/
cp angular-seed/app/css/* seedgap/www/css/
cp -R angular-seed/app/lib/ seedgap/www/lib
cp -R angular-seed/app/partials/ seedgap/www/partials
mv seedgap/www/index.html seedgap/www/index-old.html
cp angular-seed/app/index.html seedgap/www/index.html
cp angular-seed/{package.json,README.md} seedgap/
cp -R angular-seed/config/ seedgap/config
cp -R angular-seed/logs/ seedgap/logs
cp -R angular-seed/scripts/ seedgap/scripts
cp -R angular-seed/test/ seedgap/testcss3

若是用資源管理器來操做：git

把see/app目錄下的（css, lib, partials)幾個文件夾拷貝到www目錄下便可
同時把www/index.html更名爲index-old.html，由於咱們還須要用它來拷貝一些代碼
隨後把angular-seed裏面的Index.html複製進去
最後幾行是把測試框架和一個用node寫的webserver加上去了，若是你有此需求，也把相關文件複製進去，不然文件拷貝工做就結束了angularjs

1.5 修改index.html

我下面的代碼都來自更名後的index-old.html文件，再也不說明多少行了

1.5.1，拷貝以下兩行代碼到<head>標籤裏

<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium" />

注意target-densitydpi=medium，原文件是target-densitydpi=device-dpi，我把其改成meduim是爲了保證在高分屏下字體、圖標不會變得太小。

1.5.2，拷貝以下兩行到angularjs加載的標籤前

<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>

1.6 修改index.js

最後，在www/js/index.js文件中的receivedEvent裏面把頁面用angular給驅動起來

receivedEvent: function(id) {
  console.log('Received Event: ' + id);
  angular.bootstrap(document, ["myApp"]);//添加本行代碼
}

1.7 編譯運行

此時，進入phonegap項目根目錄
phonegap run android
此時在你的模擬器或設備應該能正常跑起來

2，集成Twitter Bootstrap

若是你沒有用任何UI庫，那麼可能你但願集成一個bootstrap，很簡單，集成bootstrap是不須要任何教程的，把bootstrap下載下來，裏面的js, css和font三個文件夾所有拷到www目錄下便可
咱們如今玩的是phonegap，顯然是在作手機應用，因此建議優先考慮bootstrap 3，這是一個優先爲移動平臺設計的版本。

3，集成animate.css

這裏說到了兩件事

1，angular對directive的動畫的支持從1.1.4開始，一直在變，無論你之前沒用過，仍是用過，這裏以1.2.0版的調用方式爲基礎。
2，我講的是與animate.css(http://daneden.me/animate/)這個項目進行整合，它是一個純用css3實現的動畫庫，很是簡單輕便

這裏建議下載animate.css的非壓縮版，由於既然是動畫，你自定義的意願確定很強，這時候你就須要修改源碼，或者至少拷貝源碼出來作本身的效果了（對不熟悉css3動畫的人而言）
在上面的例子裏，咱們切換view，但願它有一個動畫，好比新頁面從右往左滑入，老頁面左右向右滑出，咱們經過網站的示例，知道了這兩個動畫的名稱(其實就是css中的keyframe)分別叫slideInRight和slideOurLeft，如今開始
爲ng-view標籤添加一個class爲'view-animate'做爲鉤子，順便把其容器加上'view-container'這個class

<div class="view-container">
  <div ng-view class="view-animate"></div>
</div>

爲這個鉤子寫css

  .view-container{position:relative;height:200px;overflow: hidden;  }
  .view-animate{top:0; position:absolute;}
  .view-animate.ng-enter {
    -webkit-animation: slideInRight 1s;
    -moz-animation: slideInRight 1s;
    -ms-animation: slideInRight 1s;
    animation: slideInRight 1s;
  }
  .view-animate.ng-leave {
    -webkit-animation: slideOutLeft  1s;
    -moz-animation: slideOutLeft  1s;
    -ms-animation: slideOutLeft  1s;
    animation: slideOutLeft  1s;
  }

說明：

1，view-container的樣式純粹是演示用，就事論事，不把容器位置固定起來，這些滑動效果很差，具體各位本身去調，這不屬於集成的一部分2，主要原理實際上是angular在ng-view切換的時候，會把舊的view加上ng-leave和ng-leave-active這兩個class，把新的view加上ng-enter和ng-enter-active這兩個class，因此據此把這兩個class應用已經在animate.css裏面定義好的keyframe就好了，一樣，你本身學會寫keyframe了的話，也就能夠應用本身的動畫了。3，動畫記得至少要加上-webkit-這一節，由於大部分手機的瀏覽器仍是基於webkit的