- 浏览: 3512457 次
- 性别:
- 来自: 大连
博客专栏
-
使用Titanium Mo...
浏览量:37452
-
Cordova 3.x入门...
浏览量:604194
-
常用Java开源Libra...
浏览量:677862
-
搭建 CentOS 6 服...
浏览量:87184
-
Spring Boot 入...
浏览量:399731
-
基于Spring Secu...
浏览量:69037
-
MQTT入门
浏览量:90417
文章分类
最新评论
-
afateg:
阿里云的图是怎么画出来的?用什么工具?
各云服务平台的架构图 -
cbn_1992:
博主,采用jdbctoken也就是数据库形式之后,反复点击获取 ...
Spring Security OAuth2 Provider 之 数据库存储 -
ipodao:
写的很是清楚了,我找到一份中文协议:https://mcxia ...
MQTT入门(6)- 主题Topics -
Cavani_cc:
还行
MQTT入门(6)- 主题Topics -
fexiong:
博主,能否提供完整源码用于学习?邮箱:2199611997@q ...
TensorFlow 之 构建人物识别系统
Ionic是Drifty继Codiqa(基于 Web 的 jQuery Mobile构建工具)和Jetstrap(基于 Web 的 Twitter Bootstrap 构建工具)之后的第三个项目。面向使用HTML5开发混合式应用的的前端UI开源框架。
http://ionicframework.com/
Demos http://codepen.io/ionic/public-list
Showcase http://showcase.ionicframework.com/
Forum http://forum.ionicframework.com/
Documentation http://ionicframework.com/docs/
Learn Ionic http://learn.ionicframework.com/
Ionic Crash Course https://www.youtube.com/watch?v=C-UwOWB9Io4
Ionic Tutorial http://ccoenraets.github.io/ionic-tutorial/
Structure of an Ionic App http://mcgivery.com/structure-of-an-ionic-app/
Book:
Manning: Ionic in Action
ngCordova:Cordova API的AngularJS 扩展
Ionicons:免费的icon font
Ionic Creator:在线可视化工具
https://github.com/ecofic/ngCordovaMocks:ngCordovaMocks
https://github.com/driftyco/ionic-cordova-android-vagrant:Ionic Cordova Android Vagrant
官方Blog上推荐的Built with Ionic应用:
目前版本发布的速度很快,具体可以参考https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
需要注意的是:
来源:http://coenraets.org
安装ionic
新建项目
运行项目
另外项目用到gulp来做自动化项目构建。
其中start一个项目的时候是从github上下载seed工程后展开使用,所以也可以通过Cordova CLI创建一个工程后删除www文件夹,从github上下载seed工程后解压覆盖www文件夹即可。
也可以从http://code.ionicframework.com/手动下载。
--> 2014/05/19
安装或更新时候的错误:
①提示以下错误是因为没有安装Python:
②如果安装的是python3比如python-3.4.0,会提示以下错误,安装python-2.7.6就OK啦。
【原因】
查看了一下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-gyp是Node.js本地代码编译构建工具,查看它的安装说明,需要Python2不支持Python3,还需要Visual Studio C++的支持。再查看ionic-cli的修改历史记录,发现是为了支持Livereload才引入了vinyl-fs。
本地测试:
(1)启动Python
进入工程的www文件夹,执行“python -m SimpleHTTPServer 8000”后,在Chrome或Safari中输入“http://localhost:8000”就可以测试了。
(2)启动Gulp
项目用到gulp来做自动化项目构建
修改gulpfile.js
访问: http://localhost:8080
(3)其他HTTP server
还有很多其他的Simple HTTP server,比如:http-server 就是一个NodeJS 下很好用的HTTP Server
基本使用:
单纯使用CSS(ionic很多功能是通过JS实现的所以只使用单纯CSS意义不大):
几个完整的Project模板ionFullApp、ionWordpress。
http://codecanyon.net/collections/4884964-ionic-apps
AngularJS Chrome调试插件Batarang
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic Part 1、 Part 2、 Part 3
http://www.zhouwenbin.com/tag/ionic/
http://julienrenaux.fr/2014/05/09/ionic-framework-features-you-may-have-missed/
http://ionicframework.com/
Demos http://codepen.io/ionic/public-list
Showcase http://showcase.ionicframework.com/
Forum http://forum.ionicframework.com/
Documentation http://ionicframework.com/docs/
Learn Ionic http://learn.ionicframework.com/
Ionic Crash Course https://www.youtube.com/watch?v=C-UwOWB9Io4
Ionic Tutorial http://ccoenraets.github.io/ionic-tutorial/
Structure of an Ionic App http://mcgivery.com/structure-of-an-ionic-app/
Book:
Manning: Ionic in Action
ngCordova:Cordova API的AngularJS 扩展
Ionicons:免费的icon font
Ionic Creator:在线可视化工具
https://github.com/ecofic/ngCordovaMocks:ngCordovaMocks
https://github.com/driftyco/ionic-cordova-android-vagrant:Ionic Cordova Android Vagrant
官方Blog上推荐的Built with Ionic应用:
- Songhop https://songhop.fm/
- Mallzee http://mallzee.com/
- Sworkit http://sworkit.com/
- Coride https://coride.co/
- Throwback http://www.throwbacknow.com/
- HabitRPG https://habitrpg.com/static/front
- Crafted Here http://www.craft-boom.com/
- FitRPG http://fitrpg.co/
目前版本发布的速度很快,具体可以参考https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
需要注意的是:
- 目前还是Beta版
- 面向Hybrid Mobile App而不是Mobile Web App
- 只支持iOS 6+ / Android 4+
来源:http://coenraets.org
- 采用Sass/Gulp、基于AngularJS、零jQuery、最小化DOM操作
- 非常棒的性能、漂亮的界面设计、详细的文档、活跃的社区
安装ionic
引用
$ npm install -g cordova gulp ionic
新建项目
引用
$ ionic start myApp blank 新建一个空白页面
$ ionic start myApp tabs 新建一个带底部标签的页面
$ ionic start myApp sidemenu 新建一个带侧边栏的页面
$ ionic start myApp tabs 新建一个带底部标签的页面
$ ionic start myApp sidemenu 新建一个带侧边栏的页面
运行项目
引用
$ cd MyApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
另外项目用到gulp来做自动化项目构建。
其中start一个项目的时候是从github上下载seed工程后展开使用,所以也可以通过Cordova CLI创建一个工程后删除www文件夹,从github上下载seed工程后解压覆盖www文件夹即可。
也可以从http://code.ionicframework.com/手动下载。
--> 2014/05/19
安装或更新时候的错误:
①提示以下错误是因为没有安装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)
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)
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-gyp是Node.js本地代码编译构建工具,查看它的安装说明,需要Python2不支持Python3,还需要Visual Studio C++的支持。再查看ionic-cli的修改历史记录,发现是为了支持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
$ gulp
$ npm install -g gulp
$ npm install
$ gulp
访问: http://localhost:8080
(3)其他HTTP server
还有很多其他的Simple HTTP server,比如:http-server 就是一个NodeJS 下很好用的HTTP Server
引用
npm install http-server -g
基本使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- Ionic的CSS --> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <!-- 包含了Ionic核心JS、AngularJS、Ionic的AngularJS扩展、ngAnimate/ngSanitize/ui.router模块 --> <script src="lib/ionic/js/ionic.bundle.js"></script> <SCRIPT LANGUAGE="JavaScript"> <!-- // 创建一个AngularJS模块并告诉Angular初期化它 angular.module('starter', ['ionic']); //--> </SCRIPT> </head> <body ng-app="starter"> <ion-header-bar class="bar-positive"> <h1 class="title">header</h1> </ion-header-bar> <ion-content padding="true"> <h1>Hello wrold!</h1> </ion-content> <ion-footer-bar align-title="left" class="bar-assertive"> <h1 class="title">footer</h1> </ion-footer-bar> </body> </html>
- 整体是 SPA(Single Page Application)
- 除过index.html外的所有页面(放入templates文件夹下)通过Ajax加载
- 基于Angular UI做页面路由
- Controller中做事件绑定和数据绑定
- View复杂的处理使用Directive・Filter
- Model中的共通处理委托给Service、Factory
单纯使用CSS(ionic很多功能是通过JS实现的所以只使用单纯CSS意义不大):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> </head> <body> <div class="bar bar-header bar-positive"> <h1 class="title">header</h1> </div> <div class="scroll-content has-header has-footer"> <div class="card"> <div class="item item-divider"> I'm a Header in a Card! </div> <div class="item item-text-wrap"> This is a basic Card with some text. </div> <div class="item item-divider"> I'm a Footer in a Card! </div> </div> <div class="card"> <div class="item item-divider"> I'm a Header in a Card! </div> <div class="item item-text-wrap"> This is a basic Card with some text. </div> <div class="item item-divider"> I'm a Footer in a Card! </div> </div> </div> <div class="bar bar-footer bar-positive"> <h1 class="title">footer</h1> </div> </body> </html>
几个完整的Project模板ionFullApp、ionWordpress。
http://codecanyon.net/collections/4884964-ionic-apps
AngularJS Chrome调试插件Batarang
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic Part 1、 Part 2、 Part 3
http://www.zhouwenbin.com/tag/ionic/
http://julienrenaux.fr/2014/05/09/ionic-framework-features-you-may-have-missed/
发表评论
-
如何制作一个发布版的ionic应用?
2015-04-23 11:27 16723如何为Android APK签名,已经在这里说过了。这里说说如 ... -
Cordova各版本的不同
2015-04-12 17:26 31110Cordova每次大版本的发布都会带来系统架构很大的变化,很多 ... -
把CordovaWebView嵌入到自己的应用(Embedding WebViews)
2015-04-07 10:56 25048以下以Android为例。 (1)下载最新版的Cordova ... -
完整配置的Cordova-Phonegap-Ionic-Android环境
2015-01-22 17:01 9527搭建开发环境是程序员的基本功,虚拟机技术(VMware、Vir ... -
Cordova 3.x 入门 - 目录
2014-12-06 21:32 59232这个系列是基于Cordova 3. ... -
Awesome PhoneGap/Cordova
2014-12-03 22:23 3420A curated list of amazingly awe ... -
把Crosswalk打包到Cordova应用中
2014-10-09 16:02 4799(1)从Crosswalk官网下载Cordova Androi ... -
Eclipse开发ionic应用
2014-09-19 11:10 22065(1)首先下载最新版的Eclipse 4.4 (Luna) ... -
Cordova 3.x 实用插件(6) -- 检查APP是否被安装
2014-09-12 11:17 9998应用中经常要启动其他应用,比如:打开市场为自己的应用打分、强制 ... -
Cordova 3.x 实用插件(5) -- 通过自定义URL Scheme启动你的APP
2014-09-11 14:45 7441通过URL Scheme来启动APP是一种很常见的做法,比如: ... -
Cordova 3.x 实例开发 -- 基于Ionic的Todo应用
2014-05-27 13:04 31872基于Ionic的Todo应用,以下为Android截图,代码在 ... -
PhoneGap和Cordova的区别
2014-05-15 10:56 9958Cordova历史发展 ・2009年 通过iPhoneDevC ... -
Cordova Android中ShowTitle的问题
2014-04-28 13:34 3934根据官方文档的描述,要想显示TitleBar需要在config ... -
Cordova 3.x 源码分析(7) -- CordovaLib概要
2014-04-25 17:16 10189在http://rensanning.iteye.com/bl ... -
Cordova 3.x 源码分析(6) -- cordova.js本地交互JS<->Native
2014-04-24 12:11 15666src/android/android/nativeapipr ... -
Cordova 3.x 源码分析(5) -- cordova.js导入、初始化、启动、加载插件
2014-04-22 16:44 27002执行cordova.js的入口就以下2行代码: // 导入co ... -
Cordova 3.x 源码分析(4) -- cordova.js事件通道pub/sub
2014-04-22 15:40 4249作为观察者模式(Observer)的一种变形,很多MV*框架( ... -
Cordova 3.x 源码分析(3) -- cordova.js模块系统require/define
2014-04-16 13:21 6440类似于Java的package/import,在JavaScr ... -
Cordova 3.x 源码分析(2) -- cordova.js概要
2014-04-16 13:14 11439前提环境: 引用Platform: android Versi ... -
Cordova 3.x 源码分析(1) -- Cordova CLI
2014-04-15 15:07 6143(1)Node.js的使用 Cordova CLI基于node ...
相关推荐
发电机-M v1.1.0为什么需要它使用您喜欢的工具快速构建移动 Cordova/PhoneGap 应用...ui/ui-router 离子- http://ionicframework.com/ ngCordova - http://ngcordova.com/ 科尔多瓦- http://cordova.apache.org/ 许多
Learn how to build app store-ready hybrid apps with the Ionic 2, the framework built on top of Apache Cordova (formerly PhoneGap) and Angular. This practical guide shows you how to use Ionic’s tools ...
Generator-M v1.2.2 为什么需要它 使用您喜欢的工具快速构建移动Cordova / PhoneGap应用程序:Yeoman,Gulp,... 离子-http : //ionicframework.com/ ngCordova - http: //ngcordova.com/ 科尔多瓦-http : //cordov
Generator-M v1.2.2为什么需要它使用您喜欢的工具快速构建移动Cordova / PhoneGap应用程序:Yeoman,...ui/ui-router 离子-http : //ionicframework.com/ ngCordova - http: //ngcordova.com/ 科尔多瓦-http : //cordov
Generator-M v1.1.0 为什么需要它 使用您喜欢的工具快速构建移动Cordova / PhoneGap应用程序:Yeoman,Gulp,... 离子-http : //ionicframework.com/ ngCordova - http: //ngcordova.com/ 科尔多瓦-http : //cordov
Develop engaging mobile experiences with a native-looking UI in Ionic and AngularJS. Use out-of-the-box Ionic functionalities, customize existing components, and add new components with this ...
Ionic本身是致力于建立统一的移动混合app构建平台,核心基础是Angular+Cordova。 - 通过Angular指令封装,以及预定义的CSS,提供了开箱即用的HTML5 Mobile组件。 - 构建与开发支持,能够直接运行www目录下的index....
Mastering Ionic 2 takes you through working with the Ionic 2 framework on a step-by-step basis from basic concepts and core technologies through to developing fully functional mobile apps with 3 ...
Ionic uses Angular as the JavaScript framework and has a nice default UI style with a similar look and feel to native apps. Firebase is a realtime database which can be accessed in web apps using ...
令人敬畏的离子2+组件对我而言, 是与结合使用的最佳移动应用UI框架之一。 该列表不包含任何教程,外部帮助页面,提示和技巧。 此列表仅包含可以立即使用的实际组件和工具。 所以享受它! 它应该可以帮助您获得Ionic...
在github上关注我! ...Ionic 4和Firebase多平台入门套件,用于登录和注册Firebase这是一种...设计和UI 这是应用程序的外观 建立 npm安装 离子发球 您可以在Ionic 进行测试 演示: : 去做 社交媒体主页 用@进行个人资
移动应用评估 对“自动完成”案例进行了评估,用户可以搜索街道,车站,... 使用Ionic Framework,AngularJS,Angular-UI-Router,Cordova GeoLocation插件和Google Maps API制作的移动应用程序 作者:Cengiz Ulusoy