ionic2+angular2+cordova搭建app

（一）IONIC介绍：

Ionic是基于Cordova的使用Web技术开发混合应用的前台基于Angular的框架，Ionic1使用的是Angular1，Ionic2之后使用的都是Angular2技术栈，Ionic以后更多的新版本也都是在2的版本上迭代。Ionic2之后只支持android4.3以上的版本。

注：该文章只介绍搭建app的整体流程，具体页面开发使用到 一些技术（例如angular和ionic的使用问题，本文章盖不做介绍，此项请具体查看angular和ionic的官网）；

（二）Angular主要有五个核心特性：

双向数据绑定—— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。

模板—— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。

MVVM—— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。

依赖注入—— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

指令—— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性

ionic主要包括三个部分：

CSS框架- 提供原生_App质感的CSS样式模拟_。ionic这部分的实现使用了ionicons图标样式库。

JavaScript框架- ionic基于AngularJS基础框架开发，遵循AngularJS的框架约束；主要提供了适应移动端UI的 AngularJS的扩展，主要包括指令和服务。此外，ionic使用AngularUI Router来实现前端路由。

命令行/CLI- 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。

由于ionic使用了HTML5和CSS3的一些新规范，所以要求iOS7+/Android4.1+。 在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。

(三)搭建Ionic应用

1）安装node.js  npm

2）安装Ionic CLI、cordova；

npm install -g cordova ionic

3)通过Ionic创建一个项目

使用Ionic 官方提供的现有应用程序模拟，或一个空白的项目创建一个IONIC应用；

进入电脑的某个文件夹，打开命令行：ionic start MyProject tutorial

start 代表新建一个IONIC应用；Myproject 是项目名称；tutorial 是应用模板；

Ionic内部还有一些其他的模板：

1、tabs:底部三个tabs模板；

2、sidemenu：侧边栏菜单模板；

3、blank：空白模板；

4、super：带有十几个页面的模板（比如登录、列表、谷歌地图等）；

5、tutorial:项目目录比较完整的引导模板；

这个需要等待。。成功之后生成一个文件夹：

如果失败出现这个错误：ionic Error:read ECONNRESET

原因：ionic版本导致

解决方法一：

回退ionic版本为3.9.2就可以了，至于其他的版本还没测试过：

npm install -g [email protected]

就可以了，成功后如图：

方法二：简单粗暴，不用ionic命令，直接到ionic的github下载开源包。如创建一个"tabs" app;

(1) 打开ionic-team

（2）搜索“base”，下载“ionic2-app-base” ,该文件夹包含了ionic项目需要配置的文件；

（3）

再去搜索 “tabs”，下载 “ionic2-starter-tabs”（注：这是使用的是 ionic2，如果使用 ionic1 的，请下载 “ionic-” 为前缀的），文件夹只包含 src 和 www 两个文件夹，其中 src 实现 tabs 类型的逻辑 ，src 也是平常开发过程中最熟悉的部分

（4）

上述文件下载好，把 “ionic2-starter-tabs” src 中的 app 和 pages 这个两个文件夹复制到 “ionic2-app-base” 的 src 中。最后，“ionic2-app-base” 就是一个完整的 tabs app 项目了，安装依赖即可运行项目，创建其他类型的 app 项目也可以这样操作。