Cordova+Angularjs+Ionic 混合开发入门讲解
作为一名学习Android开发的学生,对于移动开发的发展趋势颇为关注,大家都知道,现在原生的移动开发在企业上基本很少使用了,大部分企业为了降低成本,选择了webapp,hybrid(混合开发)这两种模式,所以对于这种情况,我也去学习了有关这方面的框架,比如:JqueryMobile,Sencha Touch,MUI,还有我们今天说的Cordova+AngularJS+Ionic,在这几种框架来说,我个人觉得最有前景的就是 Cordova+Angularjs+Ionic 这种框架的开发模式了。下面我们就来说一下它是如何实现这种混合开发的。
Cordova:
以前叫PhoneGap,是一个可以与手机原生代码交互的框架,主要用于调用手机功能,比如调用拍照功能,定位功能等。
Cordova是贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。你可以把它们的关系想象成类似于Webkit和Google Chrome的关系
Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。
Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
Angularjs:
是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等
Ionic:
ionic是一个用来开发混合手机应用的,开源的,免费的代码库。可以优化html、css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。
环境搭建:
网上有很多关于ionic项目环境搭建的文章,但是它的搭建过程比较麻烦,所以有些文章说得不太详细,这里我推荐两个, 写得挺详细的:
PhoneGap+Angularjs+ionic 环境搭建 ionic环境搭建
环境搭建好了应该下载IDE了,不过这个可以随意,根据个人喜好,我选择了 WebStorm 和Ionic Lab
WebStorm:是一个很优秀的前端代码编辑器,我们就用它来作为我们的IDE
Ionic Lab:是一个将ionic项目由命令行的方式转换成图形界面管理的一个工具,这样就不用老是查看命令了。
下面给大家推荐一些真机调试工具:
(1)PhoneGap Developer App
不需要编译就能在真机上测试应用,GapReload和LiveReload一起使用也可以做到相同的事。通过phonegap serve指令起一个服务器,通过WiFi与一台移动设备上的PhoneGap配对。这台服务器监控代码的变动,并把它们自动地发送到那台设备上,而不用执行本地编译。
http://app.phonegap.com 
Cordova+Angularjs+Ionic 混合开发入门讲解的更多相关文章
- Cordova+angularjs+ionic+vs2015开发(三)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选 ...
- Cordova+angularjs+ionic+vs2015开发(五)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideM ...
- Cordova+angularjs+ionic+vs2015开发(四)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合, ...
- Cordova+angularjs+ionic+vs2015开发(二)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者Ty ...
- Cordova+angularjs+ionic+vs2015开发(一)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选 ...
- 基于AngularJS/Ionic框架开发的性能优化
AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...
- 齐博x1频道的二次开发入门讲解
要进行频道的二次开发,首先我们要先了解一下频道的目录结构,如下图最基本的几个目录admin 后台文件存放目录index 前台文件存放目录member 会员中心存放目录model 数据表模型目录trai ...
- cordova+angularJS+ionic
1.创建项目 2.路由 angular.module("starter",['ionic']) // 依赖 ionic 提供的ui-router .config(function ...
- ionic移动开发入门
学习资料:http://www.ionic.wang http://www.ionicframework.com/
随机推荐
- Python 数据结构--查找
1 顺序查找O(n) def sequential_search(a_list, item): pos = 0 found = False while pos < len(a_list) and ...
- js中call、apply和bind的区别
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...
- Java应用集群下的定时任务处理方案(mysql)
Java应用集群下的定时任务处理方案(mysql) 因为自己有csdn和博客园两个博客, 所以两边都会发一下. csdn地址: http://blog.csdn.net/u012881584/ar ...
- 【转载】 从ACM会议看中国大陆计算机科学与国外的差距
ps: 这是一篇06年的文章,与今日的国内计算机行业学术圈环境简直是天翻地覆,很不错的history,值得mark下,今日的cs学术发展十号是坏不发表意见,但是history是值得对比,借鉴,思考 ...
- C++指针易错点梳理
1 指针定义 指针是一个变量:指针的值是另一个变量的地址.变量的声明 type *var-name; var-name 是指针变量的名称.星号是用来指定一个变量var-name是指针变量. int * ...
- Sublime Text 3(中文)在Windows下的配置、安装、运行
Sublime Text 3(中文)下载.安装.运行! 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 具体 ...
- SFM学习记录(二)
分析生成文件 在.nvm.cmvs/00/下有:(也可能是其他数字) models/option-0000.ply:是生成的密集点云模型 txt:文件夹下(还没弄明白ν_v) visualize:保存 ...
- 陕西师范第七届K题----动态规划
ps: 自己的方法绝对是弱爆了 肯定存在更优的方法 O(n^3)复杂度 暴力求解的.. 链接:https://www.nowcoder.com/acm/contest/121/K来源:牛客网 柯怡最近 ...
- root/base/stem概念
The verb root (or base form): 1.is the same as the infinitive不定式 (e.g., to dive, to jump, to wonder) ...
- 20155208实验三 敏捷开发与XP实践
20155208实验三 敏捷开发与XP实践 一.实验内容 (1)在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己感觉最 ...