大家发现tabs路由增加了一个abstract字段，该字段在angular中的解释是抽象页面，不能独立作为页面展示只能作为其他页面父页面，当加载子页面之前加载父页面。
其他子页面的路由和tabs路由的配置有所不同名称命名是父路由.子路由的形式，并且增加了一个views字典，字段的key值对应着我们前面所说的tabs.html中ion-nav-view的name属性，表示该路由跳转的页面属于某个tab的子页面，同时修改我们的otherwise默认页为/tab/home。
保存之后浏览器自动刷新，我们来看一下效果。

好了，我们来点点看吧，页面切换Ionic已经帮我们实现了类似原生app的切换动画效果，是不是有一点原生app的感觉了？下面章节我们会实现在移动端的部署。

3.部署到手机和cordova插件的使用

一个简单的Web应用我们已经开发完成了，接下来我们就要做一些部署到移动端之前的准备了。
Ionic支持两个平台ios、android，默认的Ionic项目并没有添加这两个平台，我们需要手动添加，cd到开发目录下执行命令：

ionic platform add android ionic platform add ios

一般项目都需要两个平台同时部署，所以我们就添加两个，执行完毕之后执行命令查看你已经添加的平台列表：

ionic platform list

结果：

Installed platforms: android 4.0.0, ios 3.8.0 Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8

接下来的部署我们分开讲述：

Android
Android部署分真机和虚拟机，其实方法类似，在部署之前需要安装JDK、Android SDK到开发环境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到环境变量中去，并把Android SDK安装目录添加到Path中。
配置好之后打开PowerShell输入命令返回正确：

adb version

接下来就简单了，把手机连接到电脑，并开启usb调试模式，执行命令：

ionic run android

Ionic开始编译项目生成apk并远程安装到手机上后自动打开应用，是不是很简单？

IOS
ios部署需要一台mac电脑，在mac电脑上面根据本篇ionic的安装过程安装环境之后，添加ios平台到项目，因为apple开发的证书限制我们在没有申请购买apple账号的情况下，使用虚拟机来部署我们的应用，在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的，执行命令：

sudo npm install -g ios-sim

安装好之后，cd 到开发目录下执行：

sudo ionic build ios

开始编译项目，编译完成之后用Xcode打开开发目录下platform->ios->myIonic.xcodeproj的项目文件，Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机，虚拟机打开后会自动运行你应用。

PS. 为什么不用run ios 命令直接启动虚拟机呢，因为我的环境下执行run会报错，虚拟机会打开但是无法运行程序，找了半天解决解决方案没有结果，索性直接用Xcode了，效果是一样样的

到了这一步我们的app已经部署完毕了，接下来我们要为我们的app添加一个拍照功能，需要引用到cordova插件，而Ionic把一些常用到的插件用angularjs服务做了一层封装： 我们只需要在项目中安装ngCordova插件就可以想使用angularjs的服务一样在我们的项目中调用了，我们先安装ngCordova（安装需要bower包管理器，并打开VPN。。。）：

bower install ngCordova

安装完毕之后再www/index.html中引用

<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script> <script type="text/javascript" src="cordova.js"></script>

PS. ng-cordova.js需要在cordova.js引用之前

并在app.js中添加依赖注入关系，另外我发现一个问题如果安装的ngCordova的0.1.18-alpha版本，在引用时会报错，我撤回0.1.17-alpha版本就没有问题了，不知道是什么原因。

angular.module('starter', ['ionic', 'ngCordova'])

接下来cd到开发目录，我们使用ionic命令来安装插件：

cordova plugin add cordova-plugin-camera

安装完毕之后会在项目目录下的plugins文件夹中多出一个cordova-plugin-camera，这就是我们插件目录。
下面我要在home页面中增加一点按钮调用摄像头，我们先在www/js中新增一个controller.js文件编写以下代码，并在index.html中引用：

(function () { 'use strict' angular .module('starter') .controller("homeCtrl", homeCtrl, ['$cordovaCamera']) function homeCtrl ($scope, $cordovaCamera) { $scope.openCamera = function () { var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }, function(err) { // error }); } } })();

我们新建了一个homeCtrl并添加$cordovaCamera的引用，在controller中定义一个openCamera方法来调用摄像头，在home.html中加入以下代码：

<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a> <a class="button icon icon-right ion-chevron-right" ng-click="openCamera()">Camera</a>

增加了一个按钮去调用我们定义的方法openCamera，最后一步在app.js中绑定home路由和controller，在app.js中修改代码：

.state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html", controller:"homeCtrl" } } })