Ionic 是 Drifty 繼 Codiqa(基于 Web 的 jQuery Mobile 構(gòu)建工具)和 Jetstrap(基于 Web 的 Twitter Bootstrap 構(gòu)建工具)之后的第三個(gè)項(xiàng)目。面向使用 HTML5開發(fā)混合式應(yīng)用的的前端UI開源框架。
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 擴(kuò)展
Ionicons:免費(fèi)的 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 應(yīng)用:
目前版本發(fā)布的速度很快,具體可以參考 https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
需要注意的是:
和 jQuery Mobile 不同的是 Ionic 只關(guān)注的是UI部分,類似的還有 Twitter Bootstrap, Foundation, Ratchet, Topcoat 等??梢钥纯垂俜綄蚣艿慕忉專?a rel="nofollow" >Where does the Ionic Framework fit in?。熟悉 Bootstrap 的還可以試試基 于Angularjs 和 Bootstrap 3的 Mobile Angular UI with Bootstrap 3。
http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/10.1.jpg" alt="picture10.1" />
Ionic 提供了很多 Directive 指令(使用 JavaScript 來實(shí)現(xiàn)語義化標(biāo)簽,類似于 jsp 的 taglib)實(shí)現(xiàn)豐富的 UI 控件、大量的常用 icon (Icon Pack)、使用 AngularUI Router 模塊來記錄頁面路由、采用 Hammer.js 做多點(diǎn)觸控、通過 AngularJS 的擴(kuò)展做 UI 交互、左右滑動(dòng)菜單、下拉更新、自定義主題(核心 CSS 基于 Sass).......。官方網(wǎng)站也提供了很詳細(xì)的使用說明。
安裝 ionic
引用
$ npm install -g cordova gulp ionic
新建項(xiàng)目
引用
$ ionic start myApp blank 新建一個(gè)空白頁面
$ ionic start myApp tabs 新建一個(gè)帶底部標(biāo)簽的頁面
$ ionic start myApp sidemenu 新建一個(gè)帶側(cè)邊欄的頁面
運(yùn)行項(xiàng)目
引用
$ cd MyApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
另外項(xiàng)目用到 gulp 來做自動(dòng)化項(xiàng)目構(gòu)建。
其中 start 一個(gè)項(xiàng)目的時(shí)候是從 github 上下載 seed 工程后展開使用,所以也可以通過 Cordova CLI 創(chuàng)建一個(gè)工程后刪除 www 文件夾,從 github 上下載 seed 工程后解壓覆蓋 www 文件夾即可。
http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/10.2.png" alt="picture10.2" />
也可以從 [http://code.ionicframework.com/](也可以從http://code.ionicframework.com/手動(dòng)下載。 )手動(dòng)下載。
--> 2014/05/19
安裝或更新時(shí)候的錯(cuò)誤:
①提示以下錯(cuò)誤是因?yàn)闆]有安裝 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,會提示以下錯(cuò)誤,安裝 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 本地代碼編譯構(gòu)建工具,查看它的安裝說明,需要 Python2不支持 Python3,還需要 Visual Studio C++的支持。再查看 ionic-cli 的修改歷史記錄,發(fā)現(xiàn)是為了支持 Livereload 才引入了 vinyl-fs。
本地測試:
(1)啟動(dòng)Python
進(jìn)入工程的 www 文件夾,執(zhí)行“python -m SimpleHTTPServer 8000”后,在 Chrome 或 Safari 中輸入“http://localhost:8000”就可以測試了。
(2)啟動(dòng) Gulp
項(xiàng)目用到 gulp 來做自動(dòng)化項(xiàng)目構(gòu)建
修改 gulpfile.js
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
(3)其他HTTP server
還有很多其他的 Simple HTTP server,比如:http-server 就是一個(gè) NodeJS 下很好用的 HTTP Server
引用
npm install http-server -g
基本使用:
Html 代碼
<!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擴(kuò)展、ngAnimate/ngSanitize/ui.router模塊 -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 創(chuàng)建一個(gè)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>
單純使用 CSS(ionic 很多功能是通過 JS 實(shí)現(xiàn)的所以只使用單純 CSS 意義不大):
Html 代碼
<!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>
幾個(gè)完整的 Project 模板 ionFullApp、ionWordpress。
http://codecanyon.net/collections/4884964-ionic-apps
AngularJS Chrome 調(diào)試插件 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/