Cordova 3.x 基础（10） -- UI框架Ionic Framework

Ionic是[url=http://drifty.com/]Drifty[/url]继[url=https://codiqa.com/]Codiqa[/url]（基于 Web 的 jQuery Mobile构建工具）和[url=https://jetstrap.com/]Jetstrap[/url]（基于 Web 的 Twitter Bootstrap 构建工具）之后的第三个项目。面向使用HTML5开发混合式应用的的前端UI开源框架。

[url=http://ionicframework.com/]http://ionicframework.com/[/url]

Demos [url=http://codepen.io/ionic/public-list]http://codepen.io/ionic/public-list[/url]
Showcase [url=http://showcase.ionicframework.com/]http://showcase.ionicframework.com/[/url]
Forum [url=http://forum.ionicframework.com/]http://forum.ionicframework.com/[/url]
Documentation [url=http://ionicframework.com/docs/]http://ionicframework.com/docs/[/url]
Learn Ionic [url=http://learn.ionicframework.com/]http://learn.ionicframework.com/[/url]
Ionic Crash Course [url=https://www.youtube.com/watch?v=C-UwOWB9Io4]https://www.youtube.com/watch?v=C-UwOWB9Io4[/url]
Ionic Tutorial [url=http://ccoenraets.github.io/ionic-tutorial/]http://ccoenraets.github.io/ionic-tutorial/[/url]
Structure of an Ionic App [url=http://mcgivery.com/structure-of-an-ionic-app/]http://mcgivery.com/structure-of-an-ionic-app/[/url]

Book:
[url=http://www.manning.com/wilken/]Manning: Ionic in Action[/url]

[url=http://ngcordova.com/]ngCordova[/url]：Cordova API的AngularJS 扩展
[url=http://ionicons.com/]Ionicons[/url]：免费的icon font
[url=http://ionicframework.com/creator/]Ionic Creator[/url]：在线可视化工具

[url=https://github.com/ecofic/ngCordovaMocks]https://github.com/ecofic/ngCordovaMocks[/url]：ngCordovaMocks
[url=https://github.com/driftyco/ionic-cordova-android-vagrant]https://github.com/driftyco/ionic-cordova-android-vagrant[/url]：Ionic Cordova Android Vagrant

官方Blog上推荐的Built with Ionic应用：
[list][*]Songhop [url=https://songhop.fm/]https://songhop.fm/[/url]
[*]Mallzee [url=http://mallzee.com/]http://mallzee.com/[/url]
[*]Sworkit [url=http://sworkit.com/]http://sworkit.com/[/url]
[*]Coride [url=https://coride.co/]https://coride.co/[/url]
[*]Throwback [url=http://www.throwbacknow.com/]http://www.throwbacknow.com/[/url]
[*]HabitRPG [url=https://habitrpg.com/static/front]https://habitrpg.com/static/front[/url]
[*]Crafted Here [url=http://www.craft-boom.com/]http://www.craft-boom.com/[/url]
[*]FitRPG [url=http://fitrpg.co/]http://fitrpg.co/[/url][/list]

目前版本发布的速度很快，具体可以参考[url=https://github.com/driftyco/ionic/blob/master/CHANGELOG.md]https://github.com/driftyco/ionic/blob/master/CHANGELOG.md[/url]

需要注意的是：
[list][*]目前还是Beta版
[*]面向Hybrid Mobile App而不是Mobile Web App
[*]只支持iOS 6+ / Android 4+ [/list]
和jQuery Mobile不同的是Ionic只关注的是UI部分，类似的还有Twitter Bootstrap, Foundation, Ratchet, Topcoat 等。可以看看官方对框架的解释：[url=http://ionicframework.com/blog/where-does-the-ionic-framework-fit-in/]Where does the Ionic Framework fit in?[/url]。熟悉Bootstrap的还可以试试基于Angularjs和Bootstrap 3的 [url=https://github.com/mcasimir/mobile-angular-ui]Mobile Angular UI with Bootstrap 3[/url]。
[img]http://dl2.iteye.com/upload/attachment/0094/4037/84677dff-6987-36d1-912a-6446c3e996bc.jpg[/img]
来源：[url=http://coenraets.org]http://coenraets.org[/url]

[list]
[*]采用Sass/Gulp、基于AngularJS、零jQuery、最小化DOM操作
[*]非常棒的性能、漂亮的界面设计、详细的文档、活跃的社区[/list]
Ionic提供了很多Directive指令（使用JavaScript来实现语义化标签，类似于jsp的taglib）实现丰富的UI控件、大量的常用icon （[url=http://ionicons.com/]Icon Pack[/url]）、使用AngularUI Router模块来记录页面路由、采用Hammer.js做多点触控、通过AngularJS的扩展做UI交互、左右滑动菜单、下拉更新、自定义主题（核心CSS基于Sass）.......。官方网站也提供了很详细的使用说明。

安装ionic
[quote]$ npm install -g cordova gulp ionic[/quote]

新建项目
[quote]$ ionic start myApp blank 新建一个空白页面
$ ionic start myApp tabs 新建一个带底部标签的页面
$ ionic start myApp sidemenu 新建一个带侧边栏的页面[/quote]

运行项目
[quote]$ cd MyApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios[/quote]

另外项目用到gulp来做自动化项目构建。

其中start一个项目的时候是从github上下载[url=https://github.com/driftyco/ionic-angular-cordova-seed]seed工程[/url]后展开使用，所以也可以通过Cordova CLI创建一个工程后删除www文件夹，从github上下载[url=https://github.com/driftyco/ionic-angular-cordova-seed]seed工程[/url]后解压覆盖www文件夹即可。
[img]http://dl2.iteye.com/upload/attachment/0094/2918/b50261ef-78b5-3281-9c5c-48fe2bc947bc.png[/img]

也可以从[url=http://code.ionicframework.com/]http://code.ionicframework.com/[/url]手动下载。

[color=red][b]
--> 2014/05/19
安装或更新时候的错误：[/b][/color]

①提示以下错误是因为没有安装Python：
[quote]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)[/quote]

②如果安装的是python3比如python-3.4.0，会提示以下错误，安装python-2.7.6就OK啦。
[quote]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)[/quote]

【原因】
查看了一下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++的，需要做本地编译，[url=https://github.com/TooTallNate/node-gyp]node-gyp[/url]是Node.js本地代码编译构建工具，查看它的安装说明，需要Python2不支持Python3，还需要Visual Studio C++的支持。再查看[url=https://github.com/driftyco/ionic-cli/commit/ee87fb0fce90f8ff8b31424aa82674e575bf0103]ionic-cli的修改历史记录[/url]，发现是为了支持Livereload才引入了vinyl-fs。

本地测试：

[b]（1）启动Python[/b]
进入工程的www文件夹，执行“python -m SimpleHTTPServer 8000”后，在Chrome或Safari中输入“http://localhost:8000”就可以测试了。

[b]（2）启动Gulp[/b]
项目用到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']);

[quote]$ cd myApp
$ npm install -g gulp
$ npm install
$ gulp[/quote]
访问： http://localhost:8080

[b]（3）其他HTTP server[/b]
还有很多其他的Simple HTTP server，比如：[url=http-server]http-server[/url] 就是一个NodeJS 下很好用的HTTP Server
[quote]npm install http-server -g[/quote]

基本使用：

<!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>

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

单纯使用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。
[url=http://codecanyon.net/collections/4884964-ionic-apps]http://codecanyon.net/collections/4884964-ionic-apps[/url]

[url=https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk]AngularJS Chrome调试插件Batarang[/url]
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic [url=https://developer.salesforce.com/blogs/developer-relations/2014/04/building-beautiful-mobile-apps-in-visualforce-using-angularjs-and-ionic-part-1.html]Part 1[/url]、 [url=https://developer.salesforce.com/blogs/developer-relations/2014/04/part-2-building-beautiful-mobile-apps-in-visualforce-using-angularjs-and-ionic.html]Part 2[/url]、 [url=https://developer.salesforce.com/blogs/developer-relations/2014/04/building-beautiful-mobile-apps-in-visualforce-using-angularjs-and-ionic-part-3-remote-objects.html]Part 3[/url]
[url=http://www.zhouwenbin.com/tag/ionic/]http://www.zhouwenbin.com/tag/ionic/[/url]
[url=http://julienrenaux.fr/2014/05/09/ionic-framework-features-you-may-have-missed/]http://julienrenaux.fr/2014/05/09/ionic-framework-features-you-may-have-missed/[/url]