WebApp开发框架Ionic+AngularJS+Cordova

目前的手机APP有三类：原生APP、WebAPP、HybridApp；HybridApp结合了前两类APP各自的优势，愈来愈流行。

 

Ionic

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

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

Ionic同时它是基于 AngularJs的。

AngularJs

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

Cordova

Cordova就是一个中间件，让咱们把WebAPP打包成HybridAPP，而且它提供了很是多的插件，方便咱们使用原生APP的功能。

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。

 

本文咱们在win7中搭建 AngularJS+Ionic+Cordova 开发环境，包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。

关于Android开发环境的搭建，以及Cordova的安装教程：http://www.cnblogs.com/webapi/p/5519468.html

这一篇，咱们来使用 AngularJS+Ionic+Cordova 快速地作出咱们第一个HybridAPP，开始吧！

开始步骤网站上有： http://ionicframework.com/getting-started/

官网css组件： http://ionicframework.com/docs/components/#header

1 安装Ionic和Cordova

官网 http://ionicframework.com/

国内 http://www.ionic.wang/

命令行安装ionic

$ npm install -g cordova ionic

2 新建一个Ionic项目

$ ionic start myApp tabs 

3 运行咱们刚才建立的Ionic项目

$ cd myApp
$ ionic platform add android $ ionic build android $ ionic emulate android 

4 在浏览器预览并实时刷新

$ ionic serve

咱们选择localhost，并把浏览器调成mobile模式；

而后咱们进入编辑器修改项目文件夹www中的代码，看到，浏览器已经能够跟着咱们的保存实时刷新，很是好用！！！