Cordova3.x基础（10）--UI框架IonicFramework

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应用：

• 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+

和jQuery Mobile不同的是Ionic只关注的是UI部分，类似的还有Twitter Bootstrap, Foundation, Ratchet, Topcoat 等。可以看看官方对框架的解释： Where does the Ionic Framework fit in?。熟悉Bootstrap的还可以试试基于Angularjs和Bootstrap 3的 Mobile Angular UI with Bootstrap 3。

来源： http://coenraets.org

• 采用Sass/Gulp、基于AngularJS、零jQuery、最小化DOM操作
• 非常棒的性能、漂亮的界面设计、详细的文档、活跃的社区

Ionic提供了很多Directive指令（使用Javascript来实现语义化标签，类似于jsp的taglib）实现丰富的UI控件、大量的常用icon （ Icon Pack）、使用AngularUI Router模块来记录页面路由、采用Hammer.js做多点触控、通过AngularJS的扩展做UI交互、左右滑动菜单、下拉更新、自定义主题（核心CSS基于Sass）.......。官方网站也提供了很详细的使用说明。

安装ionic
引用 $ 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上下载 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)

②如果安装的是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-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
Js代码  

1. var gulp = require('gulp'),  
2.   connect = require('gulp-connect');  
3.   
4. gulp.task('connect', function() {  
5.   connect.server({  
6.     root: 'www',  
7.     livereload: true  
8.   });  
9. });  
10.   
11. gulp.task('html', function () {  
12.   gulp.src('./www/*.html').pipe(connect.reload());  
13. });  
14.   
15. gulp.task('watch', function () {  
16.   gulp.watch(['./www/*.html'], ['html']);  
17. });  
18.   
19. gulp.task('default', ['connect', 'watch']);  

引用 $ cd myApp
$ 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

基本使用：
Html代码  

1. >  
2. <html>  
3.   <head>  
4.     <meta charset="utf-8">  
5.     <meta name="viewport" content=">  
6.       
7.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">  
8.       
9.     <script src="lib/ionic/js/ionic.bundle.js">script>  
10.     <SCRIPT LANGUAGE="Javascript">  
11.     
12.       // 创建一个AngularJS模块并告诉Angular初期化它  
13.       angular.module('starter', ['ionic']);  
14.     //-->  
15.     SCRIPT>  
16.   head>  
17.   <body ng-app="starter">  
18.     <ion-header-bar class="bar-positive">  
19.       <h1 class="title">headerh1>  
20.     ion-header-bar>  
21.     <ion-content padding="true">  
22.       <h1>Hello wrold!h1>  
23.     ion-content>  
24.     <ion-footer-bar align-title="left" class="bar-assertive">  
25.       <h1 class="title">footerh1>  
26.     ion-footer-bar>  
27.   body>  
28. html>  

• 整体是 SPA（Single Page Application)
• 除过index.html外的所有页面（放入templates文件夹下）通过Ajax加载
• 基于Angular UI做页面路由
• Controller中做事件绑定和数据绑定
• View复杂的处理使用Directive・Filter
• Model中的共通处理委托给Service、Factory

单纯使用CSS（ionic很多功能是通过JS实现的所以只使用单纯CSS意义不大）：
Html代码  

1. >  
2. <html>  
3.   <head>  
4.     <meta charset="utf-8">  
5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, >  
6.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">  
7.   head>  
8.   <body>  
9.     <div class="bar bar-header bar-positive">  
10.       <h1 class="title">headerh1>  
11.     div>  
12.     <div class="scroll-content has-header has-footer">  
13.       <div class="card">  
14.         <div class="item item-divider">  
15.           I'm a Header in a Card!  
16.         div>  
17.         <div class="item item-text-wrap">  
18.           This is a basic Card with some text.  
19.         div>  
20.         <div class="item item-divider">  
21.           I'm a Footer in a Card!  
22.         div>  
23.       div>  
24.       <div class="card">  
25.         <div class="item item-divider">  
26.           I'm a Header in a Card!  
27.         div>  
28.         <div class="item item-text-wrap">  
29.           This is a basic Card with some text.  
30.         div>  
31.         <div class="item item-divider">  
32.           I'm a Footer in a Card!  
33.         div>  
34.       div>  
35.     div>  
36.     <div class="bar bar-footer bar-positive">  
37.       <h1 class="title">footerh1>  
38.     div>  
39.   body>  
40. 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/