ionic1入门
参考自：
简介
ionic 是一个强大的HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)，可以帮助您使用Web技术，比如HTML、CSS和Javascript构建接近原生体验的移动应用程序。
ionic特点：
- ionic 基于Angular语法，简单易学。
- ionic 是一个轻量级框架。
- ionic 完美的融合下一代移动框架，支持Angularjs的特性，MVC，代码易维护。
- ionic 提供了漂亮的设计，通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。
- ionic 专注原生，让你看不出混合应用和原生的区别
- ionic 提供了强大的命令行工具。
- ionic 性能优越，运行速度快。
- ionic1是基于angularjs1，ionic2是基于angularjs2，两者的语法有很大的不同
ionic2借助Angular2的革命性改进，与1.x版本相比具有以下优势：
更快的性能：Angular2比Angular1快5到10倍
- 更清晰的项目结构：Angular2应用是模块化的，每个页面的控制层代码、模板、样式都放在一起。
- 更强大的CLI：ionic cli可以生成pages,provides,tabs,pipes,components,directives等。如添加一个页面，使用命令
ionic g page newPage，就会生成以下文件，并且文件中已经生成了基本的代码
-new-page
--new-page.ts
--new-page.html
--new-page.scss- 更友好的页面导航
- 更强大的模板语法
- 更高效的开发体验：支持类、模块、接口、lamba表达式
安装
Ionic开发是依赖于Nodejs环境的，所以在开发之前我们需要安装好Nodejs。下载安装：http://nodejs.org/
安装完成之后打开终端，输入命令node -v和npm -v验证是否安装成功，如果返回版本号则说明成功。
在终端命令行中执行：
npm install -g cordova ionic
这是使用npm包管理器安装cordova和ionic，-g的意思是全局安装，全局安装后在终端中任何目录下都可以使用cordova和ionic的命令。
注意：不指定版本的话，默认是安装最新版本，而最新版本可能打包的时候有问题，推荐制定一个不是最新的版本，如 sudo cnpm install –g [email protected] 。我就是最新版本，然后在add ios时一直卡在cordova fetch那里，换一个低版本后，就可以添加ios平台了。
创建ionic项目
Ionic官网提供了三个项目模板blank、tabs和sideMenu，这里创建一个blank（空） 的ionic项目。
ionic start myIonic blank
如果因为npm packages安装导致创建失败的话，可以尝试如下步骤来解决：
- 先使用国内镜像cnpm来安装：
npm install -g cnpm
- 然后执行跳过安装npm packages这步，执行如下命令：
ionic start myIonic --skip-npm
如果要设置ionic2项目的版本执行如下命令：
ionic start myIonic --v2 --skip-npm
- 执行完上面这步之后再到项目的目录,打开cmd执行如下命令：
cnpm install --save
创建项目完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹，这个文件夹就是Ionic项目的所在目录了。
目录下有以下文件：
hooks // 在编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
plugins //cordova插件的目录
scss //scss文件，发布时编译这个目录下的文件输出到www的css目录中
www //我们的开发目录，页面、样式、脚本和图片都放在这个目录下
--css
--img
--js
--lib
--index.html
bower.json //bower配置文件
config.xml //Ionic的配置文件，可以配置app的id，名称、描述起始页和其他配置
gulpfile.js //gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等
ionic.project //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
package.json //npm配置文件调试ionic项目
在ionic项目目录下，打开终端执行
ionic serve
执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面，浏览器打开页面时，Ionic已经给我们开启了livereload模式，开启之后我们编辑www下的文件后，保存时Ionic会通过websocket通知浏览器刷新页面，我们就不用每次修改完毕手动刷新页面了，又极大的提高了我们的工作效率。
开启livereload后Ionic会默认监听www下面的文件，如果需要自定义的话请编辑ionic.project的watchPatterns来设置需要监听的范围。
安装并配置ngCordova
Ionic把一些常用到的插件用angularjs服务做了一层封装：http://ngcordova.com/。
我们只需要在项目中安装ngCordova插件就可以像使用angularjs的服务一样在我们的项目中调用了，我们先安装ngCordova：
npm install ngCordova --save
安装完毕之后再www/index.html中引用
<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script>
<script type="text/javascript" src="cordova.js"></script>ng-cordova.js需要在cordova.js引用之前
并在app.js中添加依赖注入关系
angular.module('starter', ['ionic', 'ngCordova'])