Ionic模版的使用

Hybird HTML5 App(移动应用开发)之4.Ionic模版的使用

在Windows系统下使Ionic模版，可以使用之前安装的Git工具中的Git Bash。在Mac系统中可以直接使用系统自带的命令工具。在Windows系统中安装Git后，从开始菜单中找到Git文件下的Git Bash工具并打开。下面通过命令来创建App。

cd e:/work/Ionic
通过cd命令进入自定义的项目位置

ionic start defaultApp tabs
通过ionic命令生成一个以tabs为模版的App，其中defaultApp是App的项目名，tabs是Ionic的默认模板名，即使不输入tabs，创建的App仍然是基于tabs的项目。

cd e:/work/Ionic/defaultApp
ionic serve
进入App项目的根目录，输入ionic serve命令来运行应用程序，浏览器会自动打开并预览tabs模版的App。浏览器预览的效果如下：

退出启动的应用程序：
在Git Bash中输入q ，就可以退出已经启动的应用程序。

其实，通过命令我们还可以使用其他的Ionic模版，比如：
1、 ionic start blankApp blank。创建包含标题栏的App

2、 ionic start sideApp sidemenu。创建包含侧边栏的App
应用程序主视图。
打开应用程序的侧边栏。

在GitHub上有很多模版的类型，查考链接：https://github.com/driftyco/ionic-cli

可以发现。Named template、Github Repo和Codepen是比较常用的类型。前面使用的tabs、sidemenu和blank属于Named template。 而且Named template还会随时间推移，逐渐增加。你可以根据这些模版的名字，把模版下载到本地。

下面为你介绍另外一种下载Ionic模版的方法。
打开链接：http://codepen.io/ionic/pens/public/，

在网站中，可以看到很多Ionic模版，点击一个模版进入，效果图如下：

复制浏览器的链接，可以使用该链接把模版下载到本地。下载的命令如下：
ionic start navApp http://codepen.io/ionic/pen/QwamEW
下载到本地后，就可以在浏览器中查看应用程序的效果了。如下图：

了解如何下载Ionic模版后，那么这些模版在Android 和 IOS上显示的效果是什么的呢？下面我来看一下：
以defaultApp项目为例，使cd命令进入该项目的根目录，然后在使用命令：ionic serve –l
就可以查看应用程序在Android和IOS设备中的效果，如下：

可以看到，浏览器以一种不同的有趣的方式打开了App。展示了IOS和Android两种不同设备上的App的呈现视图。两者的不同之处可以很明显的看出：IOS的菜单在页面的底部，而Android的菜单位于页面的顶部。在真实的移动设备上，它们各自的App也会有这样不同的呈现。不同的页面和不同的模板App，浏览器呈现都可能会有不同，Ionic会为我们处理这些不同。以默认模版为例，你可以使用特殊的配置，可以两个平台的菜单位置保持一致。在后续的内容中会涉及到这个部分内容。好了，今天就写这么多。明天继续！详细内容可点击链接http://pan.baidu.com/s/1kTXZNuf进入云盘查看。

来源： <http://ionichina.com/topic/568f520458c6c76d17fde144>

来自为知笔记(Wiz)