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

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

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

Cordova、Ionic、AngularJS都是什么?

Cordova

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

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

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

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

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。

 
 

实践分享:开始用Cordova+Ionic+AngularJS开发App的更多相关文章

  1. Cordova Ionic AngularJS

    实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html

  2. vs2017 js cordova + dotnet core 开发app

    原文:vs2017 js cordova + dotnet core 开发app 1.记得在index.html加入 <meta http-equiv="Content-Securit ...

  3. 【Ionic+AngularJS 开发】之『个人日常管理』App(二)

    准备工作 资源 预装工具 安装bower npm install -g bower 安装ngCordova bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后 ...

  4. VS2015 Cordova Ionic移动开发(三)

    一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config ...

  5. VS2015 Cordova Ionic移动开发(二)

    一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结 ...

  6. 【Ionic+AngularJS 开发】之『个人日常管理』App(一)

      写在前面的话 过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和4G普及,感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了.新年伊始,对自己2016年所学知识做一个阶段性 ...

  7. ionic+angularjs开发hybrid App(环境配置+创建测试项目)

    本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.ora ...

  8. cordova+vue混合式开发App

    应要求第一次使用cordova打包了一下vue写的app项目,期间遇到了不少问题,整理一下流程并记录一下常见问题吧.        cordova打包项目需要的环境配置啥的就不具体讲啦,百度一下很多教 ...

  9. 使用cordova+Ionic+AngularJs进行Hybird App开发的环境搭建手冊

    一.所需工具 1,JDK:生成 2.安卓SDK开发环境 3,NodeJs:主要使用的还是npm 4,Python开发环境 5.VS 2012(2008,2015也能够,已亲測):安装这个主要是须要一些 ...

随机推荐

  1. 关于node中 require 和 ES6中export 、export default的总结

    nodejs中 require 方法的加载规则 方法的加载规则 1. 优先从缓存中加载 2. 核心模块 3. 路径形式的模块 4. 第三方模块 一.优先从缓存中加载 main.js:执行加载a.js模 ...

  2. Vue.extend用法

    Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data ...

  3. 八大 IoT 安全关键技术解析

    IoT 设备的增长也伴随着网络攻击的风险的增长,因此在设计产品时就必须考虑到系统的安全. 高德纳咨询公司最近的报告预测,到 2020 年,全世界将有 200.4 亿的物联网设备相互连接,且平均每天约还 ...

  4. C# params 用法简介

    params 是C#的关键字, params主要是在声明方法时参数类型或者个数不确定时使用,关于params 参数数组,需掌握以下几点: 一.参数数组必须是一维数组 二.不允许将params修饰符与r ...

  5. [待验证]使用hibernate注解忘记引入mapping导致的问题

    这个问题好像是注解主键的时候,主键没有设置为int型,我设置了个string(想直接用uuid)导致的 后来学习了一下,这个主键的注解,生成策略有很多种,换成别的,就可以使用string类型 编译报错 ...

  6. 依赖注入的方式(DI)

    方式: 接口注入: setter方法注入: 构造方法注入: 接口注入: public class ClassA { private InterfaceB clzB; public void doSom ...

  7. Leetcode120.Triangle三角形最小路径和

    给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] 自顶向下的最小路径和为 11 ...

  8. 使用Data Lake Analytics + OSS分析CSV格式的TPC-H数据集

    0. Data Lake Analytics(DLA)简介 关于Data Lake的概念,更多阅读可以参考:https://en.wikipedia.org/wiki/Data_lake 以及AWS和 ...

  9. 安装 cx_Oracle

    1.下载 oracle client instant  和  sdk,  全部解压到 /opt/instantclient_11_2/ http://www.oracle.com/technetwor ...

  10. Devexpress 中控件及GridView控件的Cell增加右键复制功能

    a) GridView中任何一个Cell增加右键复制功能GridHitInfo gridHitInfo = new GridHitInfo(); //用户接收GridView中单元格数据void gr ...