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教程的更多相关文章

  1. Animate.css 教程

    animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中.不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果. 基本用法 引入CSS文件 这个对你来 ...

  2. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  3. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  4. 麦子学院bootstrap实战项目官网，后台，jquery.singlePageNav.min.js ，wow.min.js，animate.css使用

    1.源码笔记 我的源码+笔记(很重要):链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2 感谢麦子学院项目相关视频:链接: https://pan.baidu ...

  5. Bootstrap CSS教程

    Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  6. Animate.css 前端动画开发教程

    1.首先下载animate.css文件: 2.打开动画预览地址选择想要的动画,地址:https://daneden.github.io/animate.css/  ,选择好后记住动画的名字在你下载的a ...

  7. bootstrap 实战入门教程（一）

    说起响应式前端框架,比较而言,bootstrap还是不错的,虽然可能很多文档都是英文的.今天就整理下自己在学习及使用bootstrap3时的重要知识点和使用案例 参考资料: runoob的bootst ...

  8. angular+bootstrap+MVC 之三，分页控件初级版

    今天实现一个分页控件,效果如下: 1.HTML: <!doctype html> <!--suppress ALL --> <html ng-app="appT ...

  9. angular+bootstrap+MVC 之二，模态窗

    本例实现一个bootstrap的模态窗 1.HTML代码 <!doctype html> <!--suppress ALL --> <html ng-app=" ...

随机推荐

  1. python 基础总结1

    1.python简介特点:    是简单义学,有功能强大,高性能.面向对象,对动态输入的支持.解释性语言的本质,是大多数平台上理想的脚本语言. 简单,义学                    免费, ...

  2. C语言 · 字符串变换

    算法训练 字符串变换   时间限制:1.0s   内存限制:256.0MB      问题描述 相信经过这个学期的编程训练,大家对于字符串的操作已经掌握的相当熟练了.今天,徐老师想测试一下大家对于字符 ...

  3. selenium.common.exceptions.WebDriverException: Message: "Can't load the profile.

    记录一下,Selenium在最新版本中修好了这个问题.运行CMD,然后输入 pip install -U selenium

  4. Vagrant (2) —— 基本安装与配置（下）

    Vagrant (2) -- 基本安装与配置(下) 摘要 基本安装与配置 版本 Vagrant版本: 1.8.1 内容 预置 我们可以通SSH登录然后安装一个web服务器,但是这样每个使用Vagran ...

  5. Vagrant (1) —— 基本安装与配置（上）

    Vagrant (1) -- 基本安装与配置(上) 摘要 基本安装与配置 版本 Vagrant版本: 1.8.1 内容 启动运行 $ vagrant init hashicorp/precise64 ...

  6. 从商业角度探讨API设计

    为Web设计.实现和维护API不仅仅是一项挑战:对很多公司来说,这是一项势在必行的任务.本系列将带领读者走过一段旅程,从为API确定业务用例到设计方法论,解决实现难题,并从长远的角度看待在Web上维护 ...

  7. 虚拟机创建及安装ELK

    虚拟机创建及安装ELK 作者:高波 归档:学习笔记 2018年5月31日 13:57:02 快捷键: Ctrl + 1    标题1 Ctrl + 2    标题2 Ctrl + 3    标题3 C ...

  8. 升级 Elasticsearch 集群数量实战记录

    搜索引擎 升级 Elasticsearch 集群数量实战记录 现在线上有一个elasticsearch集群搜索服务有三台elasticsearch实例(es1.es2.es3),打算将其升级为5台(增 ...

  9. java 、HashMap 和单例

    前段时间在项目中遇到一个问题.当多个系统同时运行时,大部分系统能够良好运转,部分却卡死在了启动界面.以下是我解决该问题的步骤和总结:   1.复现问题.重新走了一遍出问题的过程,发现问题的确存在.说明 ...

  10. orcale存储过程学习之路--创建空存储过程（二）

    --创建表 create table TESTTABLE(  id1  VARCHAR2(12),  name VARCHAR2(32))select t.id1,t.name from TESTTA ...