官方网站    http://ionicframework.com 然后在Get Start里面可以了解到,安装Ionic需要安装 Node.js. 文件来源 http://www.tuicool.com/articles/VJBnIva和http://blog.nodejs.org/2014/09/16/node-v0-10-32-stable/ 弄下来之后,双击安装.然后启动cmd或command,运行 npm install -g cordova ionic 命令,执行日志: ionic…

ionicframework I -------------  初体验 Create hybrid mobile apps with the web technologies you love. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JScomponents for building highly interactive apps. Built with Sass and op…

Start building with Ionic! Follow these quick steps and start building high quality mobile apps in minutes. For a more indepth overview, watch our Crash Course video, which covers everything else you'd want to know. Install Ionic First, install Node.…

好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学习了一下.后来看到TypeScript,觉得这个真不错,强类型,有点类似c#的感觉,而且如果写错了编辑器都可以感知出来,于是就开始看ionic2.ionic2是基于angular2的,语法跟以前有了很大的变化.但自己写原生app写惯了,反而觉得这种方式更方便一些.每个页面都是一个组件,组件里也可以套组件…

安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneGap.ionic.AngularJS这些框架或库的关系,我个人理解是这样,PhoneGap是一个商业项目,用来实现HTML5式的跨平台开发,后来Adobe公司将其中的核心代码开源,就是Cordova,Cordova只负责实现JavaScript调用原生代码的功能,是一个壳,而壳里具体用什么样式,在H…

一 Angular Angular使用了MVVC设计模式,MVVC在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把model绑定到UI的元素上. 1  下载地址 http://angularjs.org 2 学习教程 开发工具: HBuilder 学习教程: http://www.runoob.com/angularjs/angularjs-tutorial.html 二 IONIC安装 1 安装环境 ionic 最新…

为了开发HTML5,除了最新使用React Native等之外,目前首选的为稳定的ionic+Angularjs来开发iOS和android. Ionic(ionicframework一款接近原生的HTML5移动App开发框架 会html css js就可以开发app 博客地址: http://blog.img421.com/ ionic中文教程讲解的很清楚,此网站翻译了一些原官网文档,而且也有诸多例子,让我们能够更好的学习.本教程讲述一下ionic.cordova安装的具体内容. 1. 安装n…

目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我们使用原生APP的功能. Ionic是一个界面样式库,仿照原生的ios和android界面:同时它是基于AngularJs的. 本文我们在win7中搭建 AngularJS+Ionic+Cordova 开发环境,包括所涉及的Node.js.Cordova CL…

使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势.而且私以为在目前激烈而又变化快速的移动APP市场环境下,用phonegap来开发APP未尝不是一种低成本mvp的方案,快速发布,成王败寇^-^ 为什么选用ionic 其中ionicframework便是phonegap开发hybrid APP技术中的一员新秀,甚至可以说是一员虎将,而且免费且开源. Ionic的优势非常显著: 性能优异…

VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Android SDK 首先Android的SDK最好提前下好,我是从另一个电脑上把已经下好的sdk复制到D盘Android目录下,这样安装VS2015的时候就不用选择SDK下载了,速度会快点. 安装VS2015的时候最好网络FQ一下,不然有些组件有可能会下载失败.安装的组件我没选Xamarin,这玩意太贵用…

一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括: 1．简单易用2．渐进增强和优雅降级3．Accessibility4．小规模5．主题设置6．跨平台 官网:http://jquerymobile.com/ 学习容易,资料丰富,但早期的版本使用时非常卡,也早期的硬件也有关系,后续版本在性能方面有改进. 二.Framework7 覆盖了原生iOS应用所能呈现的…

这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://github.com/foreverjiangting/myApp/tree/master/myApp 一:环境搭建 1.配置java的运行环境,包括path变量的路径,这里不再详细讲解,请自行百度. 2.下载Android  Studio,并配置path变量,以及sdk路径.这个下载比较麻烦,请自行去…

ionic项目在使用ionic build browser或者打包ios时如果设置头部高度 方法如下 .bar-header { padding:; height:; } .scroll-content { top:; } 更改之后在安卓和ionic serve下界面显示正常,但是在生成网页或者ios打开时,显示错版,原因是因为设置的header头部无效造成的, 查看源代码可以看到设置的样式被如下样式覆盖 .platform-ios.platform-cordova:not(.fullscree…

iOS发展这么多年了,很多第三方语言都向开发一种自己的iOS,于是多种跨平台诞生了! Object-c.swift: 当然是开发iOS的首先,毕竟是苹果自己的东西,也是最流行.最适合开发ios的,无论是UI库.性能.打包.编译.调试.上传等一些列无疑都是最优的 Java: 万能的Java当然可以开发ios了,RoboVM(http://docs.robovm.com/getting-started/eclipse.html)就是其中一种,它作为一种插件集成在exlipse中 C#: 大微软也不甘…

ionicFramework 我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web程序员开发出漂亮又好用的UI层框架.在历经了jqmobile.sencha touch等框架后,一直没能找到一个真正符合我的想法的框架:它应该为hybrid app设计.组件化结构.UI简洁而优美. 很多同学不明白为Hybrid app设计跟为Mobile web设计有什么不同,我只说最典型的一点:Hybrid App的资源都在本地的,没有网络读取的消耗,所以最理想的方式是一次…

具体流程可见http://bbs.ionic-china.com/read-7.html 问题1.安装ionic cordova失败 解决方法:修改npm的源,npm config set registry "http://registry.cnpmjs.org",输入npm config list(或者npm config get registry)查看是否设置成功,再试试能否安装成功:不行再使用淘宝镜像网站,npm config set registry " https:…

很久就想把使用的工具及收藏的资源整理一番:一是为了传达博客社区的理念:资源共享,而是方便自己及团队快速获取. 学习资源: 首推两个入门级在线参考网站. 1 w3c school. 2 Runoob.com(菜鸟教程). HTML5:标记语言,是HTML和XHTML的最新版本. HTML5 Outliner HTML5在线生成. 模板: jade:Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用. jade API:运行在N…

转自:http://blog.csdn.net/i348018533/article/details/47258449/ 折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此篇文章留作记录. 当初想着因为项目不大人力足够的并且因为团队没有移动开发经验的情况下,是不是能够是用hybrid app来代替原生来完成这个项目,经过一些技术调研之后选择了Ionic.当时是对Ionic一无所知,凭借一些盲目的自信,想着方正有开发文档能有什么问题呢.现在想想都觉得当时有点冲动万一中间…

1.ionic简介 ionic 是用于敏捷开发APP的解决方案.核心思路是:利用成熟的前端开发技术,来写UI和业务逻辑.也就是说,就是一个H5网站,这个区别于react-native,native.即是:“写一次,到处运行”. 从去年到现在,也是红得发紫,很多APP相继喷薄而出,至今也见过学多做得非常好的APP,当然,是指在iOS的机器上体验到的.android不敢恭维. 简介参见官网: http://cordova.apache.org/http://ionicframework.com/ i…

系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构  实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能 实战使用Axure设计App,使用WebStorm开发(6) –…

在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的.下面这些资源覆盖面很广,看一下有没有你需要的: PS:嫌麻烦的可以直接在这里找:http://thompsonemerson.github.io/ionic-collection/ 太多了,就不一一翻译了,哪些英文不懂的就百度或留言 Ionic Basics Hello World: Your Fi…

android sdk环境搭建并非易事,本人经过无数失败,才使用以下方式成功 配置Ionic 开发环境 1.下载JDK并配置Java运行环境 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 安装后需要进行如下配置: 在“系统变量”中,设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击“编辑”,不存在则点击“新建”. 1)JAVA_HO…

写博客,不容易,你们的评论和转载,就是我的动力,但请注明出处,隔壁老王的开发园:http://www.cnblogs.com/titibili/p/5124940.html 2016年1月11日 21:53 作者:隔壁老王的开发园 内容摘要:初识ionic框架,及ionic  CSS样式.UI控件的添加,了解angular在ionic中的  重要性 经过上一篇的博客介绍,我们已经完成了win10下ionic的环境搭载工作,原文链接: http://www.cnblogs.com/titibili…

本文转自:http://ionicframework.com/docs/api/directive/ionSlideBox/ The Slide Box is a multi-page container where each page can be swiped or dragged between: Deprecated API will be removed in the next Ionic release in favor of the new ion-slides component…

移动前端UI选择 目录 三.SUI Mobile   一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括:1．简单易用2．渐进增强和优雅降级3．Accessibility4．小规模5．主题设置6．跨平台 官网:http://jquerymobile.com/ 学习容易,资料丰富,但早期的版本使用时非常卡,也早期的硬件也有关系,后续版本在性能方面有改进. 二.…

https://github.com/paveisistemas/ionic-image-lazy-load <script src="lib/ionic/js/ionic-image-lazy-load.js"></script> 加载到你的模块: angular.module('yourapp', ['ionic', 'ionicLazyLoad']) 设置指令lazy-scroll到你的 <ion-content>标签,将监听滚动事件: <…

1.开发环境需要的软件有: node.js http://nodejs.org  可以到官方网站下载对应平台的安装包安装即可,如果已经安装,需要把它升级到最新的稳定版本   在终端可以输入$node -v来查看node版本以检测是否安装成功 Ionic         CLI http://ionicframework.com Cordova    http://cordova.apache.org    用一条命令就可以安装Ionic和Cordova:$sudo npm install -g…

个人一直想做个App,但是学习 IOS 的过程发现 原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了 混合式App 定义 Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具"Native App良好用户交互体验的优势"和"Web App跨平台开发的优势" 平台框架选择 APICloud Dcloud Ionic 平台对比 Dcloud 平台 大量使用H5接口 提供一些原生Api(官方号称40万A…

HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个Provider Service,Injectable 依赖注入 HTML5手机APP开发入门(2) 利用ionic2 向导生成一个项目并开发一个简单的通讯录的APP HTML5手机APP开发入门(1) ionic2+angular2 开发环境的配置 内容 完成一个登录验证的功能 这里我要向大家介绍一…

HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,AddItemPage 知识点: 如何添加新的模块(page) 如何实现页面导航 如何实现对数据的绑定 创建项目 (--ts:表示使用typescript语法) $ ionic start contact-app blank –v2 --ts 创建完成后 运行一下看看 注意:这里又有可能出现很多erro…