最佳(也许)实践:开始用Cordova + Ionic + AngularJS 开发你的 App

标签: cordova ionic angularjs app 移动应用开发 | 发表时间:2015-07-02 16:54 | 作者:pantao
出处:http://segmentfault.com/blogs

本文是一篇关于我本人在使用 Cordova + Ionic 以及 AngularJS 开发移动App的过程中的经验的总结,它不是一篇基础入门教程,而是和大家探讨一下关于如何更好的使用这些技术开发一个更好的App,文章会每天抽一点时间完成,如果您有什么问题或者想与我交流的经验,欢迎随时在本文下方评论或者邮件给我:54778899 [at] qq.com。

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

Cordova, Ionic, AngularJS 都是什么?

Cordova

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

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

注意到因为Cordova本身仍是一个原生程式,为App打包时依然需要用到这些系统平台的SDK。

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

Ionic

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

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

AngularJS

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

设计目标:

  • 将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。
  • 将应用程序的测试看的跟应用程序的编写一样重要。代码的构成方式对测试的难度有巨大的影响。
  • 将应用程序的客户端与服务器端解耦。这允许客户端和服务器端的开发可以齐头并进,并且让双方的复用成为可能。
  • 指导开发者完成构建应用程序的整个历程:从用户界面的设计,到编写业务逻辑,再到测试。

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

开发环境

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

工作站:一台13寸的 MacBook Pro Retina + iPad Mini

使用Mac开发前端有很多优势,对于我来讲,最大的优势就在于我还是一个Linux用户,很多的Linux习惯在Windows下面总是会有一些不适应,再者,OS X的系统稳定性以及各种各样优秀的App,也让它一直都成为我的工作利器。

我没有像很多牛逼的大神们购买多块屏幕,我只有一台iPad Mini,然后还有一个叫作 Duet 的App,它可以让我把 iPad 作为我的 Mac 的第二块屏幕,一般不需要,但是它真的能提高我的工作效率,而且可以直接使用到 iPad 的触摸屏,这对于移动开发来讲,很好。

我还有一台 Lenovo 的 Yoga 3,装了 Ubuntu,不过很少用,显示有点儿别扭,但是,比起其它的PC机,这台还是很不错了,大家也可以试试。

开发工具

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

相关 [实践 cordova ionic] 推荐:

最佳(也许)实践:开始用Cordova + Ionic + AngularJS 开发你的 App

- - SegmentFault 最新的文章
本文是一篇关于我本人在使用 Cordova + Ionic 以及 AngularJS 开发移动App的过程中的经验的总结,它不是一篇基础入门教程,而是和大家探讨一下关于如何更好的使用这些技术开发一个更好的App,文章会每天抽一点时间完成,如果您有什么问题或者想与我交流的经验,欢迎随时在本文下方评论或者邮件给我:54778899 [at] qq.com.

Ionic简单接触:Windows下Ionic Android开发环境搭建

- - Java - 编程语言 - ITeye博客
(一)Ionic简单介绍:.         首先,Ionic是什么.         Ionic是一款基于PhoneGap及AngularJS开发Hybrid/Web APP的前端框架,类似的其他框架有:Intel XDK等.         简单来说就是可以将你的Web应用打包发布成IOS/Android APP,并且提供了PhoneGap之外很多强大的服务和新的特性.

移动开发框架:Ionic Framework

- - 标点符
Ionic是 Drifty继 Codiqa(基于 Web 的 jQuery Mobile构建工具)和 Jetstrap(基于 Web 的 Twitter Bootstrap 构建工具)之后的第三个项目. 是一个用HTML, CSS 跟JS 开发的一个用于移动设备Web App 开发框架,采用Sass与AngularJS 开发.

cordova与ios native code交互的原理

- - CSDN博客推荐文章
很早以前写了一篇博客,总结cordova插件怎么调用到原生代码: cordova调用过程,不过写得太水,基本没有提到原理. 最近加深了一点理解,重新补充说明一下. 下面是我们产品中的代码片段:. cordova插件最终表现出来的都是js接口,并且调用者完全不需要知道自己在调用一个cordova插件.

构建一个完整的Cordova应用

- - SegmentFault 最新的文章
本文承接上篇《创建Cordova插件》,通过实现一个简单的应用作为这个Cordova初级系列的结束. 前边对Cordova编程已经讲了不少了,还没有拿真实应用为例完整的演练一遍构建过程. 这里将用一个完整的应用为例从头到尾一步步的演示如何创建和测试应用. 把所有的API集中在一个例子中展示是一个好办法.

基于Apache Cordova开发移动平台上的Chrome Apps

- - Chrome迷
不好意思,迟到的新闻,同时给大家拜个晚年,祝大家马年吉祥马上有钱. 据去年9月份的消息,Chrome Apps将可以像原生应用一样在各终端设备上离线运行,目前已经做到兼容了所有的桌面平台. 而现在通过一个基于 Apache Cordova的开发者预览版工具包,Chrome Apps已经实现可以直接在Android和iOS设备上运行了.

看看国外的phonegap和ionic移动app开发框架有多火

- - Web前端 - ITeye博客
下面给大家分享一下外的phonegap和ionic移动app开发框架到底有多火:. phonegap网站的日访问量:  ip:555000. 基于phonegap 以及angularjs 的移动app  html5开发框架 Ionic 的日访问量  ip:492000. 大家都懂的,下面给大家简单介绍一下  phonegap   Angularjs    ionic  懂的可以不看.

OpenStack实践

- - 开放博客
作者:Baihuogou DevOps Team. 我们在公司内部部署OpenStack主要是内部管理虚拟机的需要. 公司内部之前使用virt-manager来管理内部虚拟机,但是缺点有二:. 虽然提供图形界面,但是是桌面软件形式,需要安装软件. 所以现在需要一个新的管理软件来解决这些问题,满足两个特性:.

『DevOps 最佳实践』 — DevOps 实践

- -
Culture – 文化:公司各个角色一起担当业务变化,实现有效协作和沟通;. Automation – 自动化:在价值链中尽量除去手工步骤;. Lean – 精益:运用精益原则更频繁地交付价值;. Metrics – 度量:度量并使用数据来优化交付周期;. Sharing – 分享:分享成功和失败的经验来相互学习.

jQuery最佳实践

- andi - 阮一峰的网络日志
上周,我整理了《jQuery设计思想》. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery". 今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks).