实践分享:开始用Cordova+Ionic+AngularJS开发App
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。
转载于:https://www.cnblogs.com/itlover2013/p/4630023.html
实践分享:开始用Cordova+Ionic+AngularJS开发App相关推荐
- vs2017 js cordova + dotnet core 开发app
原文:vs2017 js cordova + dotnet core 开发app 1.记得在index.html加入 <meta http-equiv="Content-Securit ...
- 【Ionic+AngularJS 开发】之『个人日常管理』App(二)
准备工作 资源 预装工具 安装bower 1 npm install -g bower 安装ngCordova 1 bower install ngCordova (*由于网络获取资源的原因,后面几次 ...
- 搭建 Angular + Cordova + Ionic 集成开发环境
IDE VS Code WebStorm IDEA 简介 轻量 前端开发 全栈开发 插件 Angular Cordova Lombok 准备 建立基本开发环境 1. 安装 Node.js 注:使用 ...
- ionic+angularjs开发hybrid App(环境配置+创建测试项目)
本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.ora ...
- VS2015 Cordova Ionic移动开发(五)
一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合 ...
- Cordova/Ionic Android 开发环境搭建 - Windows系统
电脑操作系统 - windows 10 IDE - WebStorm 2019 Node v10.15.3 npm v6.4.1 Ionic v3 Angula v5 Cordova 移动设备 - 机 ...
- ionic混合开发APP基础知识点及生命周期使用一
导入storage app.module.ts文件 import { IonicStorageModule } from '@ionic/storage'; imports: [BrowserModu ...
- ionic capacitor 开发APP问题集合
1. 闪屏页,启动图标生成(利用 cordova-res 制作) cordova-res android 2. 闪屏页启动时 statusbar 为黑色 配置 splashscren 参数 " ...
- 敏捷回顾会议的套路与实践分享
01 - 关于敏捷回顾会议 实践过敏捷的人都知道,在敏捷中会有很多的会议要开,比如计划会议(Planning).站立会议(Daily Scrum).评审会议(Review)以及回顾会议(Retrosp ...
最新文章
- [Cocos2d-x]视差滚屏效果的实现
- 杭电oj java printf_杭电oj1042题大数,java,百思不得其解为何WA,求指教
- arm java 性能怎么样,ARM v6上使用java的Number to String转换性能
- 如何让CSS动画中途停止并维持姿态
- 信息论与贝叶斯(二)
- VS2019 配色_OPPO Enco M31颜值太顶了,斩获 A'设计大奖赛金奖,引领时尚潮流|oppo|大奖赛|无线耳机|配色|时尚|卡特...
- vios接口虚拟服务器,虚拟VIOS服务器安装手册V1.0.doc
- Dracena:实时数字孪生平台
- 2019牛客多校第九场 H Cutting Bamboos (二分主席树)
- 描述一系列的几何图形,包括矩形,圆形,三角形
- 我花了五个小时的时间,将全部文章详细整理出来了,千万不要错过!
- python中的位运算符
- python生成二维码的库——qrcode
- 微信支付宝用二维码支付服务谁能征服世界
- 文化的品位和文化的品格
- python爬虫之request.get()参数
- 三种有序表的查找算法
- Apache Shiro 框架简介
- TUTK普通家用摄像头常见功能介绍
- verycd电驴免铜光盘下载,verycd资源获取器 GetVeryCD