下载掌阅APP，畅读海量书库
立即打开
在配置好了ionic的开发环境之后，我们就来快速了解下ionic以及其工作流吧。
Ionic以被ionic团队扩展了的AngularJS为 Web 应用框架，以Cordova为APP编译基础，以自带的CLI（命令行）为交互工具，让用户可以快捷的使用HTML,CSS和Javascript将项目打包为跨平台的应用。
我们先来了解下其工作流，以大致了解ionic是如何工作的。
简单来说，ionic的工作流大致为：创建项目->编码调试->模拟->构建/编译。本节我们将在Windows平台上，通过一个ionic官方示例APP把整个流程走一遍儿。
ionic start chapter2 tabs--type=ionic1
执行之后，Ionic CLI将会在当前目录下创建一个chapter2目录，这就是这个ionic项目的工作目录，然后，它再从Github下载一个tabs类型的APP模板，并放在chapter2项目的工作目录下，并对下载的APP模板进行配置，然后告诉你，它搞定了：
图2.2.1
【提示】ionic提供了多种类型的APP项目模板，可在命令行工具中输入
ionic start--list
查看项目模板的说明。
可使用ionicCLI 在浏览器中快速的模拟部分APP特性（与设备相关的特性，在本机浏览器中难以模拟或者无法模拟）。
我们刚才创建了一个项目，现在，在这个命令行工具中把目录切换到项目的工作目录下：
cd chapter2
然后在默认的浏览器中模拟这个项目：
ionic serve
收到这条命令后，ionic CLI将会运行一个虚拟机，并解析到本地链接上，并使用默认浏览器打开：
图2.2.2
上图为命令行工具的运行结果，下图为ionic执行后，浏览器中模拟该项目的效果：
图2.2.3
以上两条命令可以写成一行：
cd chapter2 &&ionicserve
如想同时再浏览器中预览项目再iOS和Android上的表现，可使用如下命令：
ionic serve -l
在项目工作目录执行：
ionic emulate android
如果你在Android Studio中已经正确设置了虚拟设备，将会看到：
图2.2.4
如果没有，或者不会在AndroidStudio中设置虚拟设备，也没有关系，接着往下看！
按Ctrl+C，点击“Y”，关闭浏览器模拟，使用下面的命令添加对安卓操作系统的支持：
ionic platform add android
执行成功之后，命令行工具会提示：
add to body class: platform-android
使用下面的命令，把这个APP编译为可在安卓操作系统上运行的apk包：
ionic build android
执行成功之后，命令行工具会提示(示例)：
BUILD SUCCESSFUL
Total time: 2.084 secs
Built the following apk(s):
Y:/books/start-with-ionic/chapter2/platforms/android/build/outputs/apk/android-debug.apk
要想在实体安卓设备上运行apk，应先使用数据线把你的安卓设备连接到本机上。我们至少有两种方式可以在实体设备上运行APP：一种是编译加安装执行；第二种是仅一次性安装（如果实体设备上已安装了ID相同的APP，那么，本次安装将会失败）。
第一种方式： 如果还没有编译为apk，或者已经修改了项目的任何部分，想在实体设备中查看修改后的效果，可以执行：
ionic runAndroid-l -c
ionic将会把项目编译为apk，并在连接到你电脑上的实体安卓设备上安装和调试它，如有js调试内容，将会在CLI上显示；
第二种方式： 如果你是把项目初次编译为apk，那么，可以执行下面的命令(命令文本是一行的)：
adb -d install Y:/books/start-with-ionic/chapter2/platforms/android/build/outputs/apk/android-debug.apk
就可以把刚才编译后的apk安装到实体的安卓设备上了(上面这条命令的缺点是：如果设备上已经有了这个APP，那么，再次安装时，会失败，所以推荐第一种方式)：
图2.2.5
这时候发现：主菜单意外的出现在了上方，而不是在底部，我们修改下这个APP的配置，修改下这个默认的设置即可修正这个问题。
使用编辑器(比如Sublime Text 3)打开项目目录下的\www\js\app.js文件：
在.config(function($stateProvider, $urlRouterProvider){ 内加上参数 $ionicConfigProvider让它成为：
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){
注入了配置服务之后，在{ 之后，换行写：
/*
tabs 默认出现在 top, 我们想让它出现在 bottom;
*/
$ionicConfigProvider.tabs.position('bottom');
/*
各个操作系统下统一样式
*/
$ionicConfigProvider.tabs.style("standard");
再次编译，再次在实体设备上运行：
图2.2.6
可以看到tabs已经出现在APP的底部了。