手机APP有三类:原生APP,WebAPP,HybridApp
搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
目前的手机APP有三类:原生APP,WebAPP,HybridApp;HybridApp结合了前两类APP各自的优点,越来越流行。
Cordova就是一个中间件,让我们把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我们使用原生APP的功能。
Ionic是一个界面样式库,仿照原生的ios和android界面;同时它是基于AngularJs的。
本文我们在win7中搭建 AngularJS+Ionic+Cordova 开发环境,包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。
关于Android开发环境的搭建,以及Cordova的下载使用,我们上一篇已经说明:《Cordova环境搭建 & HelloWorld》
这一篇,我们来使用 AngularJS+Ionic+Cordova 快速地做出我们第一个HybridAPP,开始吧!
开始步骤网站上有: http://ionicframework.com/getting-started/
官网css组件:http://ionicframework.com/docs/components/#header
1 安装Ionic和Cordova
命令行安装ionic
$ npm install -g cordova ionic
2 新建一个Ionic项目
$ ionic start myApp tabs
3 运行我们刚才创建的Ionic项目
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
首次运行虚拟机可能里边没有安装上我们的应用,可以新开一个cmd,运行:
$ adb install [APK-PATH]
然后虚拟机里边就能找到应用并打开了。
4 在浏览器预览并实时刷新
$ ionic serve
我们选择localhost,并把浏览器调成mobile模式;
然后我们进入编辑器修改项目文件夹www中的代码,看到,浏览器已经可以跟着我们的保存实时刷新,非常好用!!!
手机APP有三类:原生APP,WebAPP,HybridApp的更多相关文章
- 05- 移动端APP的分类 与对比webApp hybridApp nativeApp
随着智能手机的普及,移动端应用几乎成为每个互联网产品的标配.在快速迭代的互联网战场中高效开发.低成本上线产品,是每个应用开发团队追求的目标.此时,选择合适的应用类型和开发模式便至关重要.移动应用可以粗 ...
- atitit.html5 vs 原生 app的区别与选择
atitit.html5 vs 原生 app的区别与选择 1. html5的优点 1 1.1. 最大优势::在跨平台(ios苹果,android安卓等) 1 1.2. 开放性 1 1.3. 快速的更 ...
- Do带你解析:原生APP与web APP的区别
对于DeviceOne原生跨平台APP与WEB APP的区别,很多人还不是很清楚,下面就让小编来简单介绍DeviceOne原生APP的功能以及与WEB APP的区别. 定义,什么是原生APP和web ...
- WebAPP与原生APP的交互设计区别
WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5 )的移植,故总结一下期间遇到的问题及不同点总结. 从使用场景上,WebAPP用户 ...
- 原生app,WEBAPP,混合app
什么叫做原生App? 原生App是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过网络商店或者卖场来获取例如 The App Store 与 Android Ap ...
- 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面
PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...
- 手机APP与原生APP设计的区别
交互上可以按照原生App的设计方式,效果将越来越接近,主要区别在于: 1.设计中要考虑到浏览器地址栏和工具栏的占有空间,和其对App的操作存在一定的影响. 2.暂时不适合调用系统底层接口,更适合web ...
- 原生app与WebApp的区别
Native App开发Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由 ...
- webAPP 原生APP 对比
Web App即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架 ...
随机推荐
- [计算机基础]关于实体( Entity )和模型( Model )
实体与模型的浅析 在日常开发过程中经常看到Entity,Model,DataModel,它们之间到底有什么异同?下面是我个人的一些理解. 一.Entity,Model,它们是什么? 维基百科描述: 实 ...
- Oracle百问百答(一)
Oracle百问百答(一) 01.如何查看oracle的版本信息? 02.如何查看系统被锁的事务信息? 03.怎么获取有哪些用户在使用数据库? 04. 数据表中的字段最大数是多少? 表或视图中的最大列 ...
- EasyUI初体验--右键弹框
在C/S中可能非常easy实现右键弹框,但在B/S中直到今天我才搞定,小小得瑟一下.只一个html页面,导入相关的Easy-UI类库就能搞定,Easy-UI类库下载地址 <!DOCTYPE ht ...
- HDU1385 【输出字典序最小的最短路】
这题经过的结点比较好处理. 主要是字典序的处理. 先是floyd做法,采用记录后驱的方法. path[i][j]=j[初始化...] #include <iostream> #inclu ...
- 一则简单演示样例看Oracle的“无私”健壮性
Oracle的强大之处就在于他能总帮助让你选择正确的运行计划,即使你给了它错误的指示. 实验: 1. 创建測试表: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...
- VLC笔记 它 立志
不过,别忘了找工作的时候毕业,我说:"至少不会操心你会饿死了". 直到刚刚我才认为我妈有点过于乐观了. 今天下午,在做vlc如今播放器部分,一堆代码看的我头大. 正在此时,boss ...
- UVA 11237 - Halloween treats(鸽笼原理)
11237 - Halloween treats option=com_onlinejudge&Itemid=8&page=show_problem&category=516& ...
- SQL简单的日报和月报
--320, SQL SERVER 日报 --查询2009-01-01当天客户A1,A2,A3的订单数量 SELECT Cust_Name , CONVERT(CHAR(10), Order_Date ...
- 怎样在Linux下通过ldapsearch查询活动文件夹的内容
从Win2000開始.微软抛弃NT域而採用活动文件夹来管理Windows域.而活动文件夹就是微软基于遵守LDAP协议的文件夹服务.假设用扫描器扫描的话能够发现活动文件夹的389port是打开的.并且微 ...
- [Sqlite] 移动嵌入式数据库Sqlite日报SQL操作语句汇总
,EXPLAIN分析 没有建立索引之前.分析都是表扫描: sqlite> EXPLAIN SELECT * FROM COMPANY WHERE Salary < 20000; add ...