实践分享:开始用Cordova+Ionic+AngularJS开发App

http://www.cocoachina.com/webapp/20150707/12395.htmlhtml

 

app500.jpg

本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程当中的经验的总结,它不是一篇基础入门教程,而是和你们探讨一下关于如何更好的使用这些技术开发一个更好的App。前端

声明:这是一篇中立的文章,我无心于挑起孰好孰坏的争论,这只是一篇经验分享文,至于为何选择这种技术,由于我会这个,感受还不错。web

Cordova、Ionic、AngularJS都是什么?编程

Cordova后端

Cordova是一款开放源代码的App开发框架,旨在让开发者使用HTML、Javascript、CSS等WebAPIs开发跨平台的移动平台应用程序,其原名称之为PhoneGap,Adobe收购Nitobi公司后,PhoneGap商标保留,代码贡献给了Apache基金会,而Apache将其命名为ApacheCallback,其后发布新版本时,定名为ApacheCordova。浏览器

Cordova是一个行动设备的API接口集,利用JavaScript存取这些接口能够调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML五、CSS3技术的UI框架,如jQueryMobile、DojoMobile或SenchaTouch,开发者得以快速地开发跨平台App而不须要编写任何的原生代码。前端框架

注意到由于Cordova自己还是一个原生程式,为App打包时依然须要用到这些系统平台的SDK。服务器

本文将结合Ionic前端框架进行开发。app

Ionic框架

Ionic是一个新的、可使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”。该框架提供了不少基本的移动用户界面范例,例如像列表(lists)、标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目。它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单。

Ionic宣称他们极度强调性能,而且经过限制DOM交互、彻底移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。

AngularJS

AngularJS是创建在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程很是适合来表示业务逻辑。[1]框架采用并扩展了传统HTML,经过双向的数据绑定来适应动态内容,双向的数据绑定容许模型和视图之间的自动同步。所以,AngularJS使得对DOM的操做再也不重要并提高了可测试性。

设计目标:

  • 将应用逻辑与对DOM的操做解耦。这会提升代码的可测试性。

  • 将应用程序的测试看的跟应用程序的编写同样重要。代码的构成方式对测试的难度有巨大的影响。

  • 将应用程序的客户端与服务器端解耦。这容许客户端和服务器端的开发能够齐头并进,而且让双方的复用成为可能。

  • 指导开发者完成构建应用程序的整个历程:从用户界面的设计,到编写业务逻辑,再到测试。

Angular遵循软件工程的MVC模式,并鼓励展示,数据,和逻辑组件之间的松耦合。经过依赖注入(dependencyinjection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。所以,后端减小了许多负担,产生了更轻的Web应用。

开发环境

我所使用的开发环境包括下面这些:

工做站:一台13寸的MacBookProRetina+iPadMini

使用Mac开发前端有不少优点,对于我来说,最大的优点就在于我仍是一个Linux用户,不少的Linux习惯在Windows下面老是会有一些不适应,再者,OSX的系统稳定性以及各类各样优秀的App,也让它一直都成为个人工做利器。

我没有像不少牛逼的大神们购买多块屏幕,我只有一台iPadMini,而后还有一个叫做Duet的App,它可让我把iPad做为个人Mac的第二块屏幕,通常不须要,可是它真的能提升个人工做效率,并且能够直接使用到iPad的触摸屏,这对于移动开发来说,很好。

我还有一台Lenovo的Yoga3,装了Ubuntu,不过不多用,显示有点儿别扭,可是,比起其它的PC机,这台仍是很不错了,你们也能够试试。

开发工具

之前是Notepad++的忠实用户,而后还有Coda、TextMate、BBEdit、SublimeText等等的,如今用的(并且可能之后会一直使用的)——WebStorm。