[转载]Cordova 3.x 基础(10) — UI框架Ionic Framework – Fish Where The Fish Are – ITeye技术网站.
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
新建项目
$ ionic start myApp tabs 新建一个带底部标签的页面
$ ionic start myApp sidemenu 新建一个带侧边栏的页面
运行项目
$ 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! 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! 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’]);
$ npm install -g gulp
$ npm install
$ gulp
访问: http://localhost:8080
(3)其他HTTP server
还有很多其他的Simple HTTP server,比如:http-server 就是一个NodeJS 下很好用的HTTP Server
基本使用:
- <!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>
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.rar (6.1 KB)
- 下载次数: 11