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 



（2）Ionic View 
http://view.ionic.io/ 


 

com.adobe.phonegap.app-v1.3.0.rar (682.7 KB)
ionicview-v1.0.0.part2.rar (4.3 MB)
ionicview-v1.0.0.part1.rar (10 MB)