下面给大家分享一下外的phonegap和ionic移动app开发框架到底有多火：
多的不说了先看图：
phonegap网站的日访问量：
基于phonegap 以及angularjs 的移动app
html5开发框架 Ionic 的日访问量
大家都懂的，下面给大家简单介绍一下
懂的可以不看
1.Phonegap介绍
PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用Phonegap运行速度
1. android环境：
a) 512内存手机可以放弃phoengap
b) 1G 双核手机
感觉速度稍微比原生慢
4核+ 手机运行流畅 看不出和原生差别
d) 部分手机兼容可能会出现问题 需要调整css（原生开发也会有次问题）
2. ios环境：
a) iphone4+运行流畅
b) iphone5+ 看不出和原生差别
2. Angularjs介绍
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中 如Gmail、Maps、Calender 等。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等。
3.Ionic介绍
Advanced HTML5 Hybrid Mobile App Framework
AngularJS 移动端解决方案
http //ionicframework com/
Ionic 是一个强大的 HTML5 应用程序开发框架，可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
Ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验
相关 [国外 phonegap ionic] 推荐：
- Web前端 - ITeye博客
下面给大家分享一下外的phonegap和ionic移动app开发框架到底有多火：. phonegap网站的日访问量：
ip:555000. 基于phonegap 以及angularjs 的移动app
html5开发框架 Ionic 的日访问量
ip:492000. 大家都懂的，下面给大家简单介绍一下
懂的可以不看.
- IT技术博客大学习
一、PhoneGap是什么.
PhoneGap是一个标准的开源框架，用PhoneGap开发移动应用是免费的，无论是商业或是开源；一个用基于HTML，CSS和JavaScript的，创建跨平台移动应用的
快速开发平台. 它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能.
Codiqa（基于 Web 的 jQuery Mobile构建工具）和
Jetstrap（基于 Web 的 Twitter Bootstrap 构建工具）之后的第三个项目. 是一个用HTML, CSS 跟JS 开发的一个用于移动设备Web App 开发框架，采用Sass与AngularJS 开发.
- snoopyxdy的博客
最近2个月一直在做一个Phonegap（现改名为cordova，其实我用的cordova来做的，但是叫惯了phonegap）的手机app项目，目前已经debug完毕，准备发布上线了，发现真印证了网上流传的一句话：. 如果你恨一个人，让他去开发PhoneGap应用；如果你爱一个人，让他去开发PhoneGap应用.
- CSDN博客推荐文章
用了3天的时间，终于把环境搭建完毕，郁闷了N天，终于完成了. 这里我只是讲述我安装的过程，仅供大家参考. 环境搭建首先要去下载一些安装包：. （下载前注意一下，电脑是32位还是64位的请注意选择安装包）. java环境的JDK：/technetwork/java/javase/downloads/index.html.
- 博客园_首页
首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图. 说明：socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求,
JS 队列里面有JS语句数据时，才是真正的1毫秒调用一下;
当没有数据, scoket server 会阻塞10毫秒, 也就是XHR 要等10秒钟才能收到结果,并进行下一次的轮询.
- SegmentFault 最新的文章
本文是一篇关于我本人在使用 Cordova + Ionic 以及 AngularJS 开发移动App的过程中的经验的总结，它不是一篇基础入门教程，而是和大家探讨一下关于如何更好的使用这些技术开发一个更好的App，文章会每天抽一点时间完成，如果您有什么问题或者想与我交流的经验，欢迎随时在本文下方评论或者邮件给我： [at] qq.com.
- HTML5研究小组
PhoneGap现已完全支持Windows Phone 7所有的原生功能，其支持力度达到了iOS与Android的水平. 微软在去年7月帮助Nitobi将PhoneGap移植到了Windows Phone Mango上，并在9月
发布了 该框架的一个可用版本. 很多原生特性都得到了支持，包括Accelerometer、Camera、Contacts、Geolocation、 Notification与MediaCapture，但团队希望能找到一些Bug.
- HTML5研究小组
@）. ）按官方说法，是HTML5移动应用平台，它包括两部分：. 1)
应用开发框架：采用Web/HTML5技术编写应用，支持设备能力（如GPS、重力感应等）调用；支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.
- SweetRiver
phonegap今年发展不错啊，至少“跨平台”一个词就是多少人无法拒绝的一个诱惑，而且使用HTML+CSS+JS开发，可灰常有吸引力. 网易轻博LOFTER的移动客户端就是用phonegap开发的，但是目前只有iOS版本，Android版本似乎还在开发中. 试用了下iOS下phonegap做出来的LOFER，应该说UI效果非常接近原生APP，但不如原生APP流畅，可以感觉到网易LOFTER团队付出了很多的努力.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。一个先进的App框架:使用Ionic创建一个简单的APP - 推酷
一个先进的App框架:使用Ionic创建一个简单的APP
自Hybrid Mobile技术发展以来，Web开发者转到移动开发的人数大大增加了。
Hybrid Mobile开发技术使得一个Web开发者能够去开发一个运行在多个平台上的移动应用。完全不用去学习相应的平台语言和使用已经存在的技术。
Hybrid Mobile技术已经发展了很多，有很多不同类型的平台存在，比如说
一个值得考虑的Hybrid Mobile开发新平台就是
Ionic 是一个先进的HTML5(Hybrid Mobile)技术App框架。它是一个可以使用HTML5来创建一个漂亮的移动应用的前端开源框架。
Ionic的App都是基于
的，所以Cordova工具可以 用来构建，部署和测试App。Ionic重点研究App的外观和感觉，它目前使用
来构建一个看起来很棒的前端。
要开始使用Ionic，首先要确保你已经安装了
然后，根据你所想要开发的App平台，安装所需的
平台附件。在这篇文章里，我们将试着创建一个Android的App。
再下一步，安装最新版本的Cordova和Ionic，命令行工具如下：
npm install -g cordova ionic
当安装完成时，试着用一个标签模版如下图所示创建一个新的项目：
ionic start myIonicApp tabs
切换到项目目录，添加ionic平台，如下所示建立app和效仿它：
cd myIonicApp
ionic platform add android
ionic build android
ionic emulate android
这是一个默认标签模版的app:
我们将要创建一个简单的 ToDo List 应用程序。让我们使用一个空模版来建立一个简单 的app,这样能够让我们从零开始。如下所示使用一个空模版建立一个新app：
ionic start myToDoList blank
如果你切换到 myToDoList/www 的目录下你可以看到AngularJS的文件。这就是我们将要添 加相关代码的地方，以便于用来创建我们的app。
创建和显示列表
首先，我们需要创建一个列表用来显示“任务列表”。为此我们将利用到
命令。如下所示将 ion-list 添加到我们的 www/index.html 中：
&ion-list&
&ion-item&Scuba Diving&/ion-item&
&ion-item&Climb Mount Everest&/ion-item&
&/ion-list&
在添加上述的 ion-list 到 index.html 之后，这里是html中所有的代码的样子：
&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&viewport& content=&initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width&&
&title&&/title&
&link href=&lib/ionic/css/ionic.css& rel=&stylesheet&&
&link href=&css/style.css& rel=&stylesheet&&
&!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
&link href=&css/ionic.app.css& rel=&stylesheet&&
&!-- ionic/angularjs js --&
&script src=&lib/ionic/js/ionic.bundle.js&&&/script&
&!-- cordova script (this will be a 404 during development) --&
&script src=&cordova.js&&&/script&
&!-- your app's js --&
&script src=&js/app.js&&&/script&
&body ng-app=&starter&&
&ion-pane&
&ion-header-bar class=&bar-stable&&
&h1 class=&title&&My ToDo List&/h1&
&/ion-header-bar&
&ion-content&
&ion-list&
&ion-item&Scuba Diving&/ion-item&
&ion-item&Climb Mount Everest&/ion-item&
&/ion-list&
&/ion-content&
&/ion-pane&
现在，让我们动手来重建和仿真出app来得到这个列表。
就像上面看到的代码，使用 ion-list 我们给我们的任务列表硬编码出2个项目。为了让app的功能更加完善，我们应该能够动态的添加和查看项目列表。
在里面， www/js/ 创建了一个 controllers.js 文件和定义了一个叫做 ToDoListCtrl 新的控制器。这是 controllers.js 文件的样子：
angular.module('starter.controllers', [])
.controller('ToDoListCtrl', function ($scope) {
在上面的代码中，我们定义了一个新的模块 starter.controller 和一个新的控制器 ToDoListCtrl 。
接下来，我们需要将这个模块添加到我们已经存在的应用中。打开 www/js/app.js 然后将这个模块添加进去。
这是添加了新的 starter.controller 模块之后的app.js代码：
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
StatusBar.styleDefault();
下一步，定义一个 $scope 来支撑任务列表项目。在里面， ToDoListCtrl 声明了一个新的 $scope 变量 toDoListItems ，如下所示：
.controller('ToDoListCtrl', function ($scope) {
$scope.toDoListItems = [{
task: 'Scuba Diving',
status: 'not done'
task: 'Climb Everest',
status: 'not done'
在 index.html 里的 app.js 包含着 controllers.js 。
我们需要将上述的控制器逻辑添加到我们 index.html 里的 ion-list 中,如下图所示修改 ion-list ：
&ion-list ng-controller=&ToDoListCtrl&&
&ion-item ng-repeat=&item in toDoListItems&&
{{item.task}}
&/ion-item&
&/ion-list&
正如你在上述代码中所看到的，我们使用 ng-controller 指令来将控制器添加到 ion-list 中。我们使用了 ng-repeat 指令在 $scope 的变量中反复定义了 toDoListItems 将它展示在列表中。
现在，通过行动来重建app和仿真出你想要做的列表。
在列表中添加项目
接下来，我们需要实现出可以将项目添加到已存在的列表中的一种方式。为此，我们将会利用
，它可以在按钮被点击之后让展开的列表向上滚动起来。
首先在展开的页面的顶部添加一个按钮，以便于给列表添加新的项目。
然后，让我们利用
来使我们列表的头部看起来更加富有色彩的。如下所示修改代码：
&ion-header-bar align-title=&left& class=&bar-positive&&
&h1 class=&title&&My ToDo List&/h1&
&div class=&buttons&&
&button class=&button& ng-click=&openModal()&&Add&/button&
&/ion-header-bar&
正如你在上面的代码中所看到的，我们添加了一个类名为 bar-positive 的 ion-header-bar 标签，它可以为列表添加颜色。你可以很多不同类型的头部，请参考
的详细文档。
我们也已经在我们列表的头部的右侧添加了一个名为 Add 的新按钮，它将会调用一个函数来打开一个模式窗口（我们将会立即定义这个模式）。
如下所示在 index.html 中添加一个模式弹出：
&script id=&modal.html& type=&text/ng-template&&
&div class=&modal&&
&div class=&bar bar-header bar-calm&&
&button class=&button& ng-click=&closeModal()&&back&/button&
&h1 class=&title&&Add Item&/h1&
&form ng-submit=&AddItem(data)&&
&div class=&list&&
&div class=&list list-inset&&
&label class=&item item-input&&
&input type=&text& placeholder=&ToDo Item& ng-model=&data.newItem&&
&button class=&button button-block button-positive& type=&submit&&
按照上面的代码，我们有一个头部文件在我们的模式集中，一个输入框和一个将新项目添加到任务列表中的添加按钮。
我们在头部文件中有一个返回按钮，我们给它添加了一个 closeModal() 函数来使用 ng-click 来关闭模式。我们使用 ng-submit 给表单添加了一个叫做 AddItem 的函数，当表单 提交的时候将会添加项目到已有的列表中。
现在，我们需要将ionic模式结合到我们的控制器中。我们将 $ionicModal 添加到控制器并定义所需要到的函数，如下所示：
angular.module('starter.controllers', [])
.controller('ToDoListCtrl', function ($scope, $ionicModal) {
// array list which will contain the items added
$scope.toDoListItems = [];
//init the modal
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal =
// function to open the modal
$scope.openModal = function () {
$scope.modal.show();
// function to close the modal
$scope.closeModal = function () {
$scope.modal.hide();
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function () {
$scope.modal.remove();
//function to add items to the existing list
$scope.AddItem = function (data) {
$scope.toDoListItems.push({
task: data.newItem,
status: 'not done'
data.newItem = '';
$scope.closeModal();
正如在上述代码中所看到的，我们使用 .fromTemlateUrl 来加载html文本，在给 $scope 定义初始化时定义了两个选项还有当文本加载的时候的动画类型。
我们同样定义了打开，关闭模式的函数，同时还定义了一个向已存在的数组中添加项目的函数。
我们的实现已经完成，我们已经准备好要运行和仿真我们的app。保存所有文件，重建并且仿真app。我们任务列表的app的两个屏幕应该是这个样子的：
在这里输入图片描述
在这篇文章里，我们看到了如何从零开始使用Ionic——混合应用程序开发中的一个先进的HTML5框架。我们使用一些Ionic的工具如 ionicModal 和 ion-list 来开发一个简单的基础的任务列表app。
这个app可以扩展出更多的功能，
有详细说明。为了更好的去理解AngularJS，我建议参考
。同时上述文章中的代码可以在
》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致Ionic：高级的 HTML5 移动APP（Web App）开发框架 | DeveWork
当前位置： &
打破沉默，我来发表评论鸟~欢迎光临！
ionic框架配置教程
ionic框架配置教程
编辑日期： 字体：
这段时间在做手机应用开发，由于目前部分缺少Android开发人员，所以想做个WebApp的形式，然后用phoneGap打包，先做第一个样品试用。研究了比较多的开发框架，后来自己用AngularJS和Ratchet搭建了一个小框架，做的差不多了，然后感觉有些限制，用cordova编译之后，在Android平台上的运行效果并是不太好。所以又看了一下其他的框架，比如：Lungo和QuoJS等，突然发现了一个目前比较先进的框架ionic，所以就拿来用用。目前文档比较少，有的也仅是翻译官网的，所以我把自己的配置过程记录一下，分享给喜欢的同学。
教程索引：(持续更新)
ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。目前绑定的与angularJS和SASS。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
首先需要安装cordova和android环境。这个参考我的另一篇文章：，上面写的很详细，还有常见的错误及解决办法。
然后安装ionic:
npm install -g ionic
安装完成之后，就可以使用ionic创建项目了。
ionic start myApp tabs //创建带有top栏和bottom栏的示例项目
ionic start myApp sidemenu //创建带有左侧带有menu栏的示例项目
ionic start myApp blank //创建空白项目
具体效果，可以查看官网：
然后可以使用：
ionic serve
该命令会自动启动流浏览器，查看当前效果。
添加Android平台
添加android平台之前，需要先搭建Android开发环境。参考
如果是MAC系统，请参考
执行下面的命令,
ionic platform add android //这行可能会报错
ionic build android
ionic emulate android
其实上面的使用方法和cordova差不多，添加android的时候可能会报错，如下：
The error is:
=======================================
events.js:72
// Unhandled ‘error’ event
Error: spawn ENOENT
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34)
解决的方法很简单，将ionic换成cordova即可，经测试works fine。
cordova platform add android //这行可能会报错
cordova build android
cordova emulate android
添加ios平台
需要先安装xcode，升级mac系统，安装最新的xcode版本。安装完xcode之后要启动一下，会安装一些组件。
首先安装ios-sim，然后添加ios平台。
npm install -g ios-sim
ionic platform add ios //这行可能会报错
ionic build ios
ionic emulate ios
需要注意的坑爹事情来了，这是我亲自实践的，爬了好多的stack overflow，尝试了很多次，最后得到了结果。
在mac Mavericks 10.9.5 上安装Xcode 6.0.1之后，自动安装的是ios模拟器 是ios8.0版本，这个版本下不论你怎么搞，使用模拟运行命令时都是会报错的。错误如下：
Session could not be started: Error Domain=DTiPhoneSimulatorErrorDomain Code=2 “Simulator session timed out.” UserInfo=0x7fe6e8f240d0 {NSLocalizedDescription=Simulator session timed out.}
Error: /Users/chale/ionic/iosApp/platforms/ios/cordova/run: Command failed with exit code 1
at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:766:16)
at Process.ChildProcess._handle.onexit (child_process.js:833:5)
关于这个错误网上的解决办法是, 直接启动模拟器，然后如下图操作，选择reset content：
但是这个在ios 8.1下面是没用的，试了好多次，或许在早些版本有用。参考stack overflow的朋友的解决方法是：
进入Xcode->Preferences->Downloads，下载安装ios 7.1 simulators，然后在Product->Destination 中选择ios7.1，这样就正常了。
参考地址：
今天又试了一下，成功了，还是ios8.1 但是是iphone 6.看下图：
上面是实例项目:
xcode和模拟器sdk下载
如果你的xcode和ios sdk下载慢，试试下面的地址，已经共享到网盘。
Xcode 6.2 Beta 2:
Xcode 6.2 Beta:
Xcode 6.1.1 GM SEED:
支持Yosemite和Mavericks。
Xcode 6.1 正式版:
这个应该就是6.1的正式版了，支持Yosemite和Mavericks，包含iOS 8.1、OS X 10.10 、OS X 10.9的SDK，其中对Swift的语法和一些方法又有一些小改动。
Xcode 6.1 GM seed for OS X Yosemite：
Xcode 6.1 Beta3：
Xcode 6.1 Beta2（Swift 1.1）：
Xcode 6.1 Yosemite版：
Xcode6 GM版：
Xcode6 Beta7：
Xcode6 Beta6：
这是修复崩溃Bug的版本，版本号是(6A280e)。国内小水管下载相当不易。。支持的顶一下。。。
注：如果安装Xcode6 Beta6之后，编译之前的项目出现forceBridgeFromObjec以及getter、setter的问题，具体看这里。
Xcode6 Beta5：
可以说目前Xcode的每一个Beta版都修复了很多问题，如果你在用Beta版的话，保持最新总能解决很多疑难杂症。这一版中，对Swift的跳转定义终于变得好用了。
模拟器下载
安装SDK就等于安装了模拟器，如果你嫌Xcode下载SDK太慢的话，可以选择手动安装，具体的手动安装方法：解压后放到以下目录即可。
/Applications/Xcode.App/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs
iPhone Simulator 8.0 SDK:
iPhone Simulator 7.1 SDK:
iPhone Simulator 6.1 SDK:
其他常见错误
生成项目(ionic start myApp tabs)时可能会报错，如下：
Error: command failed:fatal:could not create work tree dir:’C: Users/ADMINI~1 AppData Local Temp plugman git 3′.:No such file or directory
解决办法：进入上面对应的目录，建立对应的文件。比如在temp目录下建立plugman目录，在plugman目录下建立git目录，然后再git下建立3目录。即可，经测试有效。
本文固定链接:
转载请注明:
作者：leehom
本博客主要是把自己的经验记录于此，方便自己以后查阅及其他遇到类似问题的朋友参考。如果你有觉得不错的文章，可以注册会员发布文章或者邮箱发给我文章地址，谢谢！
如果觉得文章还不错，请麻烦点下广告，算是赞助下本站服务器费用，谢谢！
您可能还会对这些文章感兴趣！[转载]Cordova 3.x 基础（10） — UI框架Ionic Framework – Fish Where The Fish Are – ITeye技术网站
Ionic是继（基于 Web 的
Mobile构建工具）和（基于 Web 的 Twitter Bootstrap 构建工具）之后的第三个项目。面向使用HTML5开发混合式应用的的前端UI开源框架。
Documentation
Learn Ionic
Ionic Crash Course
Ionic Tutorial
Structure of an Ionic App
：Cordova API的AngularJS 扩展
：免费的icon font
：在线可视化工具
：ngCordovaMocks
：Ionic Cordova
官方Blog上推荐的Built with Ionic应用：
Crafted Here
目前版本发布的速度很快，具体可以参考
需要注意的是：
目前还是Beta版
面向Hybrid Mobile App而不是Mobile Web App
只支持iOS 6+ /
和 Mobile不同的是Ionic只关注的是UI部分，类似的还有Twitter Bootstrap, Foundation, Ratchet, Topcoat 等。可以看看官方对框架的解释：。熟悉Bootstrap的还可以试试基于Angularjs和Bootstrap 3的 。
采用Sass/Gulp、基于AngularJS、零、最小化DOM操作
非常棒的性能、漂亮的界面设计、详细的文档、活跃的社区
Ionic提供了很多Directive指令（使用来实现语义化标签，类似于jsp的taglib）实现丰富的UI控件、大量的常用icon （）、使用AngularUI Router模块来记录页面路由、采用Hammer.js做多点触控、通过AngularJS的扩展做UI交互、左右滑动菜单、下拉更新、自定义主题（核心CSS基于Sass）…….。官方也提供了很详细的使用说明。
$ npm install -g cordova gulp ionic
$ ionic start myApp blank
新建一个空白页面
$ ionic start myApp tabs
新建一个带底部标签的页面
$ ionic start myApp sidemenu 新建一个带侧边栏的页面
$ cd MyApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
另外项目用到gulp来做自动化项目构建。
其中start一个项目的时候是从github上下载后展开使用，所以也可以通过Cordova CLI创建一个工程后删除www文件夹，从github上下载后解压覆盖www文件夹即可。
也可以从手动下载。
安装或更新时候的错误：
①提示以下错误是因为没有安装Python：
gyp ERR! configure error
gyp ERR! stack Error: Can’t find Python executable “python”, you can set the PYTHON env variable.
gyp ERR! stack
at failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:113:14)
gyp ERR! stack
at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:81:11
gyp ERR! stack
at Object.oncomplete (fs.js:107:15)
②如果安装的是python3比如python-3.4.0，会提示以下错误，安装python-2.7.6就OK啦。
gyp ERR! configure error
gyp ERR! stack Error: Python executable “python” is v3.4.0, which is not supported by gyp.
gyp ERR! stack You can pass the –python switch to point to Python &= v2.5.0 & & 3.0.0.
gyp ERR! stack
at failPythonVersion (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:118:14)
gyp ERR! stack
at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:107:9
gyp ERR! stack
at ChildProcess.exithandler (child_process.js:635:7)
gyp ERR! stack
at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack
at maybeClose (child_process.js:735:16)
gyp ERR! stack
at Process.ChildProcess._handle.onexit (child_process.js:802:5)
查看了一下CLI的源代码，ionic引入了vinyl-fs的依赖，用于npm\node_modules\ionic\lib\ionic \serve.js中，vinyl-fs的vfs.watch(‘www/**/*’)，而它又有子依赖：vinyl-fs@0.1.4 -& glob-watcher@0.0.6 -& gaze@0.6.4。gaze的源码是C++的，需要做本地编译，是Node.js本地代码编译构建工具，查看它的安装说明，需要Python2不支持Python3，还需要Visual Studio C++的支持。再查看，发现是为了支持Livereload才引入了vinyl-fs。
本地测试：
（1）启动Python
进入工程的www文件夹，执行“python -m SimpleHTTPServer 8000”后，在Chrome或Safari中输入“http://localhost:8000”就可以测试了。
（2）启动Gulp
项目用到gulp来做自动化项目构建
修改gulpfile.js
var gulp = require(‘gulp’),
connect = require(‘gulp-connect’);
gulp.task(‘connect’, function() {
connect.server({
root: ‘www’,
livereload: true
gulp.task(‘html’, function () {
gulp.src(‘./www/*.html’).pipe(connect.reload());
gulp.task(‘watch’, function () {
gulp.watch([‘./www/*.html’], [‘html’]);
gulp.task(‘default’, [‘connect’, ‘watch’]);
$ cd myApp
$ npm install -g gulp
$ npm install
访问： http://localhost:8080
（3）其他HTTP server
还有很多其他的Simple HTTP server，比如： 就是一个NodeJS 下很好用的HTTP Server
npm install http-server -g
基本使用：
&!DOCTYPE html
charset=“utf-8”
name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”
href=“lib/ionic/css/ionic.css” rel=“stylesheet”
src=“lib/ionic/js/ionic.bundle.js”
LANGUAGE=“”
// 创建一个AngularJS模块并告诉Angular初期化它
angular.module(‘starter’, [‘ionic’]);
ng-app=“starter”
class=“bar-positive”
class=“title”header
padding=“true”
Hello wrold!
align-title=“left” class=“bar-assertive”
class=“title”footer
除过index.html外的所有页面（放入templates文件夹下）通过Ajax加载
基于Angular UI做页面路由
Controller中做事件绑定和数据绑定
View复杂的处理使用Directive?Filter
Model中的共通处理委托给Service、Factory
单纯使用CSS（ionic很多功能是通过JS实现的所以只使用单纯CSS意义不大）：
&!DOCTYPE html
charset=“utf-8”
name=“viewport” content=“initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”
href=“lib/ionic/css/ionic.css” rel=“stylesheet”
class=“bar bar-header bar-positive”
class=“title”header
class=“scroll-content has-header has-footer”
class=“card”
class=“item item-divider”
I’m a Header in a Card!
class=“item item-text-wrap”
This is a basic Card with some text.
class=“item item-divider”
I’m a Footer in a Card!
class=“card”
class=“item item-divider”
I’m a Header in a Card!
class=“item item-text-wrap”
This is a basic Card with some text.
class=“item item-divider”
I’m a Footer in a Card!
class=“bar bar-footer bar-positive”
class=“title”footer
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic 、 、
下载次数: 11
本文的评论功能被关闭了.