作为一名学习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 

(2)Ionic View 
http://view.ionic.io/ 
 

Cordova+Angularjs+Ionic 混合开发入门讲解的更多相关文章

  1. Cordova+angularjs+ionic+vs2015开发(三)

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选 ...

  2. Cordova+angularjs+ionic+vs2015开发(五)

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideM ...

  3. Cordova+angularjs+ionic+vs2015开发(四)

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合, ...

  4. Cordova+angularjs+ionic+vs2015开发(二)

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者Ty ...

  5. Cordova+angularjs+ionic+vs2015开发(一)

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选 ...

  6. 基于AngularJS/Ionic框架开发的性能优化

    AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...

  7. 齐博x1频道的二次开发入门讲解

    要进行频道的二次开发,首先我们要先了解一下频道的目录结构,如下图最基本的几个目录admin 后台文件存放目录index 前台文件存放目录member 会员中心存放目录model 数据表模型目录trai ...

  8. cordova+angularJS+ionic

    1.创建项目 2.路由 angular.module("starter",['ionic']) // 依赖 ionic 提供的ui-router .config(function ...

  9. ionic移动开发入门

    学习资料:http://www.ionic.wang http://www.ionicframework.com/

随机推荐

  1. POJ 2369 Permutations(置换群概念题)

    Description We remind that the permutation of some final set is a one-to-one mapping of the set onto ...

  2. yum配置Linux的Web服务器

    1.打开终端:输入su -root用于切换至root用户,目的是为了取得权限2.安装步骤如下(1)安装文件[root@localhost ~]# yum -y install httpd.i686[r ...

  3. JAVA接口传递参数(POST),从接口接收数据(JSON) -----记录

    1,给接口传递json格式的数据 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOEx ...

  4. 首席数据官(CDO)的崛起

    数据在我们的日常生活中发挥着核心作用,几乎渗透到商业和公共部门的每一项活动中.它现在被认为是任何一个严肃组织的难题之一,可以实现从改变游戏规则的洞察到整个新技术或商业模式的诞生. 事实上,现在数据非常 ...

  5. Spring Boot 揭秘与实战 自己实现一个简单的自动配置模块

    文章目录 1. 实战的开端 – Maven搭建 2. 参数的配置 - 属性参数类 3. 真的很简单 - 简单的服务类 4. 自动配置的核心 - 自动配置类 5. spring.factories 不要 ...

  6. asm磁盘组,asm磁盘状态学习

    说明:在数据库中巡检,发现,数据库某个磁盘组状态为mount,其余磁盘组均为CONNECTED状态,排除是否异常 文档流程: 1.实际环境查询校验 2.官方文档视图中对磁盘组,磁盘状态的解释说明 3. ...

  7. MySQL篇,第三章:数据库知识3

    MySQL 数据库 3 索引 1.普通索引(MUL)   2.唯一索引(UNI)   3.主键索引(PRI) 1.使用规则 1.一个表中只能有一个主键(primary)字段 2.对应字段的值不允许重复 ...

  8. PYTHON 定时器简单封装,基于SCHED

    python fresher,轻拍. 在写后台服务时经常会遇到很多定时器的场景,threading.Timer类每实例化一个定时器会有一个新线程去执行,在客户端使用倒是没有问题,如果是服务器端定时器数 ...

  9. 如何上传本地项目到github

    github作为git的代码托管,而许多大神都在上面托管自己的开源项目.现在,我来记录一下我是如何将本地项目上传到github上. 一.安装git工具(具体方法见百度) 二.配置全局 三.创建.ssh ...

  10. django JsonResponse和HttpResponse的在后端和前端区别

    JsonResponse和HttpResponse的区别 1.from django.http import JsonResponse return JsonResponse('例子') 2.impo ...