Ionic是Drifty继Codiqa(基于 Web 的 jQuery Mobile构建工具)和Jetstrap(基于 Web 的 Twitter Bootstrap 构建工具)之后的第三个项目。面向使用HTML5开发混合式应用的的前端UI开源框架。
http:/// Demos http:///ionic/public-list Showcase http://showcase./ Forum http://forum./ Documentation http:///docs/ Learn Ionic http://learn./ Ionic Crash Course https://www./watch?v=C-UwOWB9Io4 Ionic Tutorial http://ccoenraets./ionic-tutorial/ Structure of an Ionic App http:///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://
安装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./手动下载。 --> 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代码
引用 $ 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代码
单纯使用CSS(ionic很多功能是通过JS实现的所以只使用单纯CSS意义不大): Html代码
AngularJS Chrome调试插件Batarang Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic Part 1、 Part 2、 Part 3 http://www./tag/ionic/ http:///2014/05/09/ionic-framework-features-you-may-have-missed/ |
|