Phonegap集成angular/bootstrap/animate.css教程
1,phonegap集成angular
按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-go/
首先,对windows用户而言,该教程中用到的是linux shell命令,需要了解一些shell命令与cmd命令之间的对照
如果不用命令行,其实就是一些文件和复制和删除改名等动作,自己到资源管理器操作就行了。
不过,如果你装过git for windows的话,会有一个bash环境,这些命令也是可以用的,建议装一个,会方便很多。
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.git
1.2 删除一些不再需要的资源
主要避免安装文件过大,不然此步可略过
cd ../
rm seedgap/www/spec.html
rm -R seedgap/www/spec/
rm seedgap/www/img/logo.png
rm seedgap/www/css/index.css
1.3 手动建新文件
用意未知,这个需要跟.gitignore配合才有意义,按示例加上吧
如果不用touch命令,如何添加一个点号开头的文件,请自行放狗搜索
touch seedgap/www/img/.gitkeep
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/test
如果用资源管理器来操作:
把see/app目录下的(css, lib, partials)几个文件夹拷贝到www目录下即可
同时把www/index.html改名为index-old.html,因为我们还需要用它来拷贝一些代码
随后把angular-seed里面的Index.html复制进去
最后几行是把测试框架和一个用node写的webserver加上去了,如果你有此需求,也把相关文件复制进去,否则文件拷贝工作就结束了
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的
Phonegap集成angular/bootstrap/animate.css教程相关推荐
- vue动画效果-定义动画帧过度效果集成第三方动画animate.css
1.定义动画帧 <template><div><button @click="isShow=!isShow">显示/隐藏</button& ...
- Vue实现集成使用第三方Animate.css动画库详细教程(解决鼠标移入移出闪烁问题)
vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多 ...
- Vue动画——使用最新版Animate.css教程
目录 1. 安装Animate.css 2. 配置 Animate.css 3. 在指定元素上使用 4. 在过渡动画中使用 5. 经典范例 -- 页面向下滚动到指定位置时,顶部显示悬浮搜索框 6. a ...
- vue3项目引入animate.css教程
0.项目背景:vue3 + vite + typescript 以下是项目使用的版本 "vue": "^3.0.4", "typescript&quo ...
- 2020使用animate.css和wow.js最新教程
animate.css可以使用动画,wow.js可以让页面滚动加载动画,oppo官网首页https://www.dowebok.com/demo/131/index2.html是一个经典的例子,只需三 ...
- 基于Bootstrap和animate.css的模态框动画效果
最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果,故记录一下.原文地址点这里 此动画效果需要引入animate.css,可以在animate.css官方网址中点击下载animat ...
- 前端进阶必学必会动画学习之Animate.css的使用与解析:一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...
- (其他页面问题)基于HTML+CSS+JavaScript的网页项目大作业其他页面部分(含前后端,Jquery,Bootstrap,Animate.css,Node等)
文章目录 平台网页 设计思路 开始所想: 实际开发过程 css代码 Html代码 运营网页设计 设计思路: css代码 Html代码 JS代码 登录页面设计 Logo部分 设计思路 开始所想 实际开发 ...
- css js写在一起 vue_如何把vue2.0 和 animate.css合并在一起使用(详细教程)
animate.css是一款前端动画库,相似的有velocity-animate.这篇文章给大家介绍vue2.0 和 animate.css的结合使用,需要的朋友参考下吧 这里说的是vue2.0和an ...
最新文章
- 设计Optaplanner下实时规划服务的失败经历
- 技术解析:如何用pyecharts绘制时间轮播图
- freemarker的空值和默认值
- Javascript 引擎工作机制(js层面梳理)
- arcgis中python窗口在哪_python在arcgis中的应用
- oracle迁移需要注意配置文件,xtts迁移实践
- FTT字体绘制,2D阶段
- JPA、JTA、XA相关索引
- 深入浅出谈SCADA
- KVM虚拟化教程(超详细)
- iOS 开发者应该知道的 ARM 结构(转自apple4us)
- PS学习笔记----图层锁定
- stack unwinding
- Oracle-SQL查询表的一条数据
- 用MTALAB绘制铁磁性材料磁滞回线
- 2021天津高考高中成绩查询系统,2021天津市地区高考成绩排名查询,天津市高考各高中成绩喜报榜单...
- HTML禁止复制粘贴以及禁止下载图片的小技巧
- 微信小程序---发送网络请求
- 机器学习 -- PCA(Ⅵ 使用PCA降噪)
- 魔力Python——对象