WebApp开发框架Ionic+AngularJS+Cordova

目前的手机APP有三类:原生APP、WebAPP、HybridApp;HybridApp结合了前两类APP各自的优点,越来越流行。

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,开始吧!

开始步骤网站上有: http://ionicframework.com/getting-started/

官网css组件: http://ionicframework.com/docs/components/#header

1 安装Ionic和Cordova

官网 http://ionicframework.com/

国内 http://www.ionic.wang/

命令行安装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

4 在浏览器预览并实时刷新

$ ionic serve

我们选择localhost,并把浏览器调成mobile模式;

然后我们进入编辑器修改项目文件夹www中的代码,看到,浏览器已经可以跟着我们的保存实时刷新,非常好用!!!

时间: 2024-10-27 12:21:08

WebApp开发框架Ionic+AngularJS+Cordova的相关文章

ionic+angularJS+cordova(FileTransfer)上传图片

[功能介绍] 在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像.本文介绍的是基于ionic框架,在移动端上传图片的功能. [功能流程] (1)点击页面上的头像,弹出一个对话框,选择[拍照]或者[从相册选择]: (2)选取/拍摄照片: (3)上传照片: [html核心代码] <div ng-controller="myCtrl"> <a ng-click="choosePicMenu()"> <img ng-src=

ZH奶酪:ionic+angularJS+cordova(FileTransfer)上传图片【移动端】

[功能介绍] 在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像.本文介绍的是基于ionic框架,在移动端上传图片的功能. [功能流程] (1)点击页面上的头像,弹出一个对话框,选择[拍照]或者[从相册选择]: (2)选取/拍摄照片: (3)上传照片: [html核心代码] <div ng-controller="myCtrl"> <a ng-click="choosePicMenu()"> <img ng-src=

Hybrid App混合模式移动应用开发(AngularJS+Cordova+Ionic)

以前公司开发了某手机APP是通过jquerymobile来实现的,发现它对手机上的原生设备无能为力.于是在下一个项目到来之际,通过筛选最终决定使用cordova+Ionic.看起来简单,但是因为他们各自有一些依赖,林林总总,最终涉及的内容便不少了. 如下所示: 环境搭建:window 1.JAVA-SDK 安装配置(版本7以上) 这个没什么难度,到官网下载jdk,然后按照步骤配置环境变量即可.配置完成后,记得校验jdk安装是否成功. JDK安装及环境变量配置 2.Android-SDK 安装配置

ionic 和cordova的区别是什么

很多新朋友ionic基础教程都学完了,还是不知道ionic 和cordova 是什么关系 ionic是什么: Ionic(ionicframework)一款开源的Html5移动App开发框架,是AngularJS移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本,让开发者可以通过命令行工具快速生成android  ios移动app应用 phoengap是什么? phonegap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发

使用Ionic + Apache Cordova开发跨平台混合型的移动应用

JavaScript 写多了,要想真正提高js水平,研究其他js框架源码是不错的选择.Github上大部分都是js.css相关的项目,可以有目的性的 check out 下来,研读研读,还是非常收益的,跟随nb的人,也会慢慢变的nb. 场景:有一个朋友,他公司是做移动应用开发的,3个安卓开发人员,3个 ios,然后是 java 开发,美工 ,10多个人的公司,主要是以接项目为主,一个项目(电商.微信.聊天 类型的)大概在20万左右, 差不多1个半月 做完(代码质量能不能保证,不知道,不过我觉得开

ionic2/Angularjs cordova node.js

ionic 和 cordova 的区别 环境的搭建{node.js,jdk1.8/jdk1.7,android sdk,intellijIdea,ionic,cordova} nodejs+ionic+cordova+intellijIdea搭建webApp环境 原文地址:https://www.cnblogs.com/jeryM/p/8784867.html

【Ionic+AngularJS 开发】之『个人日常管理』App(一)

写在前面的话 过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和4G普及,感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了.新年伊始,对自己2016年所学知识做一个阶段性总结,记录一个自制的"小而萌"Hybrid App开发历程,共勉! [扩展阅读] 企业移动应用开发 混合开发成香饽饽 2016年JavaScript领域中最受欢迎的"明星"们 Hybrid APP混合开发的一些经验和总结 App预览 (*模糊化的个人数据) 简介 个人日常管

安装ionic 以及 cordova 环境配置详细过程,(错误解决)

[摘要:全部装置进程: 1. jdk 1.7.2 (http://www.oracle.com/technetwork/java/javase/downloads/index.html) 装置好以后 情况变量设置装备摆设: 新建体系变量JAVA_HOME 战CLASSPATH 变量名:JAVA_HOME 变量:C:Program FilesJavajdk1.7.0 变量] 整个安装过程: 1. jdk 1.7.2   (http://www.oracle.com/technetwork/java

[ionic开源项目教程] - 手把手教你使用移动跨平台开发框架Ionic开发一个新闻阅读APP

前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. 项目介绍 本项目基于移动跨平台开发框架 Ionic 开发,主要包含健康.医疗.生活.农业.和用户五大模块,以下是功能架构图. 目录 第1讲 前言,技术储备,环境搭建,常用命令 第2讲 新建项目,架构页面,配置app.js和controllers.js 第3讲 使用Tabs和SlideBox实现左右滑动菜单 第4讲 第4讲 通过Service层获取新