HybridAPP开发框架Ionic+AngularJS+Cordova搭建
Ionic
Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目。它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单。
Ionic宣称他们极度强调性能,并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。
Ionic同时它是基于 AngularJs的。
AngularJs
AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。
Cordova
Cordova就是一个中间件,让我们把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我们使用原生APP的功能。
Cordova是一款开放源代码的App开发框架,旨在让开发者使用HTML、Javascript、CSS等WebAPIs开发跨平台的移动平台应用程序,其原名称之为PhoneGap,Adobe收购Nitobi公司后,PhoneGap商标保留,代码贡献给了Apache基金会,而Apache将其命名为ApacheCallback,其后发布新版本时,定名为ApacheCordova。
Cordova是一个行动设备的API接口集,利用JavaScript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架,如jQueryMobile、DojoMobile或SenchaTouch,开发者得以快速地开发跨平台App而不需要编写任何的原生代码。
注意到因为Cordova本身仍是一个原生程式,为App打包时依然需要用到这些系统平台的SDK。
本文我们在win7中搭建 AngularJS+Ionic+Cordova 开发环境,包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。
关于Android开发环境的搭建,以及Cordova的安装教程:http://www.cnblogs.com/webapi/p/5519468.html
这一篇,我们来使用 AngularJS+Ionic+Cordova 快速地做出我们第一个HybridAPP,开始吧!
安装Ionic
安装Cordova
创建APP测试是否安装成功
开始步骤网站上有: 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 androi
$ ionic emulate android
4 在浏览器预览并实时刷新
$ ionic serve
我们选择localhost,并把浏览器调成mobile模式;
然后我们进入编辑器修改项目文件夹www中的代码,看到,浏览器已经可以跟着我们的保存实时刷新,非常好用!!!
HybridAPP开发框架Ionic+AngularJS+Cordova搭建的更多相关文章
- WebApp开发框架Ionic+AngularJS+Cordova
目前的手机APP有三类:原生APP.WebAPP.HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用 ...
- ZH奶酪:ionic+angularJS+cordova(FileTransfer)上传图片【移动端】
[功能介绍] 在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像.本文介绍的是基于ionic框架,在移动端上传图片的功能. [功能流程] (1)点击页面上的头像,弹出一个对话框,选 ...
- 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP
这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...
- Hybrid App混合模式移动应用开发(AngularJS+Cordova+Ionic)
以前公司开发了某手机APP是通过jquerymobile来实现的,发现它对手机上的原生设备无能为力.于是在下一个项目到来之际,通过筛选最终决定使用cordova+Ionic.看起来简单,但是因为他们各 ...
- Cordova Ionic AngularJS
实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html
- [目录]hybrid app 开发实战(基于ionic,cordova,angularjs)
序:为什么要写这个系列 第一章:hybrid app开发之技术选型 第二章:ionic,cordova,phonegap关系浅析 第三章:ionic环境搭建之windows篇 第四章:ionic环境搭 ...
- 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Mac下安装ionic和cordova,并生成iOS项目
为了开发HTML5,除了最新使用React Native等之外,目前首选的为稳定的ionic+Angularjs来开发iOS和android. Ionic(ionicframework一款接近原生的H ...
- 基于ionic4、cordova搭建android开发环境
前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解and ...
随机推荐
- angluarjs2入门学习资源
http://www.runoob.com/angularjs2/angularjs2-tutorial.htmlhttps://segmentfault.com/a/1190000008423981 ...
- 新概念英语(1-109)A Good Idea
Lesson 109 A good idea 好主意 Listen to the tape then answer this question. What does Jane have with he ...
- 集合之深入理解HashMap
Hashmap是一种非常常用的.应用广泛的数据类型 1.hashmap的数据结构 要知道hashmap是什么,首先要搞清楚它的数据结构,在java编程语言中,最基本的结构就是两种,一个是数组,另外一个 ...
- codeforces round 425 div2
A. Sasha and Sticks 水题,判断一下次数的奇和偶就可以的. B. Petya and Exam 赛上的时候没有写出来,orz,记录一下吧. 题意:给出一个模式串,可能会有?和*两种符 ...
- datatables
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 参加Java培训到底靠不靠谱?
导读 科技越发展,社会越进步,人们越便利,便衍生出更多的人从事程序员这个高大上的职业,可哈尔滨Java培训学校这么多,到底靠不靠谱,会不会处处是陷阱,爱尚实训帮你擦亮眼 随着时代的发展,越来越多的人对 ...
- SQL Server 2008 R2 安装注意事项
上个星期自己第一次安装SQL Server 2008 R2,安装失败几次,结果用了将近1天的时间安装,最后成功了. 心得:1.安装SQL Server 2008 R2时,最好在第一次就安装成功.在百度 ...
- [Other] Nuget 构建服务器与常用命令
公司出于某些原因需要自己在内部网络搭建一个私有的 Nuget 服务器,而且要运行在 Linux服务器上面.如果说 Windows 下搭建的话很简单,直接在项目当中引入 Nuget 的库就 OK,这儿的 ...
- NC帮助文档网址
NC帮助文档: https://wenku.baidu.com/view/2d05a77c0b4e767f5acfceb6.html NC方法总结: ...
- ASwipeLayout一个强大的侧滑菜单控件
Android中侧滑的场景有很大,大部分是基于RecyclerView,但是有些时候你可以动态地addView到一个布局当中,也希望它实现侧滑,所以就产生了ASwipeLayout,该控件不仅支持在R ...