一个基于Angular+Ionic+Phonegap的混合APP实战

大多数的 web
开发者一直在用关键点来寻找动态的框架,这样能简化他们的设计和开发工作。

奥门新浦京官方网站 ,这个项目做得比较早,当时是基于ionic1和angular1做的。做了四个tabs的app,首页模仿携程首页,第二页主要是phonegap调用手机核心功能,第三页模仿微信和qq聊天页,第四页模仿一般手机的表单设置页。同时还模仿知乎做了一个侧边栏页(账号:wty,密码:123456)。

HTML5 框架在所有的 web
浏览器和手机应用上都展现了优秀的性能。它不仅简化了 HTML5 开发中 CSS
开发的沉重负担,还提高了网站的可见性。主要的原因是 HTML5
提供了独有的特征,例如特殊的架构标签,动画,浏览器支持等。

如果你正打算使用AngularJS构建Web应用程序,那么你需要一段时间上手。不过你也不用担心,因为有一些框架可以让你轻松获取
AngularJS支持。并且框架中一些预先安装好的Web组件,允许你快速构建Web应用程序。下面就是五款这样的框架,这些框架可以帮助你使用
AngularJS建立基于Web的应用程。

没有后台,纯前端展示,功能还比较多,调用系统的声音、震动和手机设备信息等。有二维码扫描功能,还做了类似qq消息可拖拽效果,上拉下拉刷新,轮播图组件。

最近,大量的 HTML5 框架在行业内可免费获得,这使得 HTML5
开发者们不知道到底哪一个框架才是最好的。为了避免上述问题,本文在下面会列出
2015 年最流行的 5 个框架,让我们一起以一个简单的方式来开始讨论吧。

1. AngularUI Bootstrap

安卓apk下载

如果你是 web 设计者并准备用 HTML5 进行设计工作,现在是时候开始阅读了。

该框架基于Bootstrap,一个前端框架的基础上。它包含了一组Bootstrap部件,如Carousel、Alert、Collapse、
Rating和TimePicker。所有的组件都使用AngularJS指令和自定义HTML元素。如果你喜欢使用Bootstrap程序,那么这个框
架必将成为你的好帮手。

奥门新浦京官方网站 1

Ionic

奥门新浦京官方网站 2

Ionic 是一个神奇的框架和强大前端开源系统,使用先进的 web 技术比如
CSS、HTML 和 JS
来创建令人惊叹的手机应用。它已经定制了在所有手机设备上的快速操作,并且确保简单的功能和大量的手机组件。

您可以通过一个命令创建来测试和使用基于任何平台上的 ionic
应用。此外,该框架为它自己的组件提供了一套 Angular 指令(自定义的 HTML
元素),从而使它可以简单的编写一行 HTML
代码。类似指令,它使用视图动画逻辑,异步通信,Angular 的触摸识别和 HTML
清洁处理。

奥门新浦京官方网站 3

线上地址

Siimpler 

奥门新浦京官方网站 4

Siimpler 是一个简单的 HTML
开发框架,他可以通过选择你自己喜欢的部分,来帮助你快速又简单的创建 HTML5
开发结构。根据你的项目需求,你可运用 Siimpler
开发你自己熟悉的前端结构。网络设计者们也可以通过使用 Siimpler
框架类的文件和文件夹来无缝的开始一个 web 项目。

官方网站:

一、基本概念

Foundation

奥门新浦京官方网站 5

Foundation
是世界上最精妙的前端响应框架,同时,它可以兼容所有的浏览器和网络设备。Foundation
拥有移动友好型的用户接口,并且获得了许多的原件来帮助你快速又完美的建立一个响应站点。Foundation
设置了许多关键的特性,例如 HTML,CSS UI
原件,模板,小代码块,含有按钮,表单,字体,导航等功能的响应组件。

2.Angular Foundation:

1. Angularjs简介

Angularjs是一款优秀的前端 JS 框架,已用于 Google 的多款产品当中 如
Gmail、Maps、Calender
等。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义标签、依赖注入,等等。

LimeJS

针对于所有的最新的桌面浏览器和触屏设备,LimeJS
对于有用户经验的游戏开发者而言是最好的和最强大的开发框架。LimeJS
对于在线游戏开发而言能够带来更好的功能和更快的开发过程,而且适合所有的浏览器和触屏设备。

奥门新浦京官方网站 6

这也是一个被移植过来的可以使用AngularJS的一个流行框架。它改变了Foundation的组件,采用AngularJS指令和自定义
HTML元素,以此通过HTML元素来构建Web应用。基于这个原因,比起上面那个,可能你会更喜欢这个框架。你可以下载Angular
Foundation,并且通过其GitHub页面保持项目的开发更新。

2. Ionic简介

Ionic是一个强大的 HTML5
应用程序开发框架,具有速度快,界面现代化、美观等特点。特别适合用于基于
Hybird 模式的 HTML5 移动应用程序开发。

Enyo

奥门新浦京官方网站 7

Enyo 是一个开源的 JavaScript 框架,该框架能够让你创建顶级的 HTML5
应用程序,该应用程序能够运行在各种各样的电子设备上,比如说手机,台式机,笔记本,电视,以及
web 应用。对于很多流行的手机公司开发的重要应用都是采用该框架实现的。

最后:

这篇文章谈论的是对于一个 HTML 开发公司的独特的功能,操作,需求,以及
HTML5 框架的最好的表现。

奥门新浦京官方网站 8

3. Phonegap简介

Phonegap是一个用基于 HTML, CSS 和 JavaScript
的,创建移动跨平台移动应用程序的
快速开发平台。它使开发者能够手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap
拥有丰富的插件,可以调用。

官方网站:

二、项目各tab主要功能介绍

3.Ionic Framework:

1. 初始化配置

  • 手机上app显示的图标、名称、开机画面
  • 注入依赖
  • 隐藏显示键盘
  • hammer触屏手势插件配置
  • 菜单栏的位置、导航条文字位置、回退按钮图标等
  • 切换页面的过渡效果(bug)
  • AngularUI Router
  • services服务

Ionic包含的一些构建模块,可以让我们快速简单地开发移动应用程序。Ionic
Framework的组件已经在触摸和手势方面优化了它的移动体验。UI组件均采用自定义的HTML元素。此外,还有Ionic
Creator选项,有助于我们更便捷地创建应用程序。所以,如果你对性能和速度方面的要求最高,那么Ionic
Framework将会是最适合你的框架。

2. tab-home

  • 幻灯指令 ion-slide-box
  • 触屏手势切换页面
  • 栅格系统
  • 触屏手势touch-bases和hammerjs
  • ng-init、ng-click、 ng-src、 ng-repeat指令,双向数据绑定
  • 打开app内置的浏览器webview方法
  • 上拉刷新

奥门新浦京官方网站 9

3. tab-dash

  • phonegap功能的应用:二维码扫描、调用系统弹窗、震动铃声功能、获取设备信息
  • ion-side-menus侧边栏功能
  • ionic 动态组件 $ionicModal弹出登录界面
  • ng-show、ng-model 双向数据绑定实现登录验证的实时监控
  • ionic 动态组件 $ionicPopup弹出注销界面
  • 更换头像(访问手机摄像头、图库功能)
  • 切换主题颜色

官方网站:

4. tab-chats

  • 删除按钮和重新排序按钮
  • 下拉刷新
  • 滑动显示分享编辑按钮
  • 长按显示动态组件$ionicActionSheet选项
  • 红色消息badge

4.Mobile Angular UII:

5. tab-account

  • ionic的表单应用
  • “声音”选项被选中播放铃声
  • “震动”选项被选中开始震动
  • 实现全选、全不选、反选的功能
  • ionic动态组件$ionicPopup
  • 根据被选择数显示相应弹窗内容

Mobile Angular
UII是一款移动UI框架,是Bootstrap框架的扩展,用于更快地构建移动应用程序。它使用的是Bootstrap3的语法和一些特定的移动部件,
并且它能通过添加CSS使得内容可以响应、具备触摸功能,从而将Web应用程序转换为它的移动版本。

三、演示如下:

ionic实战动态图演示

奥门新浦京官方网站 10

四、总 结

优点: 通过使用 web 技术开发 App,采用
Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发,避免了不同平台原生开发体系的学习,学习成本低,
上手快、 效率高,一次开发微信 wap app 全部搞定;

缺点:app 在 android 平台性能上有一些损失,
但是相信硬件的发展会接近原生。

欢迎大家star学习交流:github地址
| 我的博客

官方网站:

参考文献

  1. PhoneGap3.4安装视频教程下载
  2. Angular1官网
  3. Angular中文社区
  4. AngularJS Nice Things
  5. phonegap 中文网
  6. ionic官网

5.  UI Grid:

如果你需要在网格中工作或者用AngularJS制作表格,那么UI
Grid可能是最适合的框架了。无论是简单的还是复杂的数据集,此框架丰富的功能都允许一一显示在网格中。

奥门新浦京官方网站 11

官方网站:

以上5个AngularJS框架就是我们推荐的,欢迎推荐更好的AngularJS框架。

译文链接:
英文原文:5 Best Frameworks To Build Applications With
AngularJS

【编辑推荐】

发表评论

电子邮件地址不会被公开。 必填项已用*标注