安装ionic
npm install -g ionic cordova
＃创建ionic app
ionic start myApp
app模板
tabs：简单的3选项卡布局
sidemenu：侧边栏有滑动菜单的布局
blank：只有一页的空启动程序
super：有超过14个可使用页面设计的启动项目
tutorial：有向导的入门项目
模板使用方法示例：ionic start myApp tutorial
不指定模板，则默认使用tabs作为模板
浏览器端运行app
cd myApp
ionic serve
项目结构
在我们创建的文件夹里，有一个典型的Cordova项目结构，在这个项目里可以安装本地插件，还可以创建特定平台的项目文件
./src/index.html
src/index.html是应用程序的主入口点，尽管它的目的是建立脚本、css包含、引导程序或者开始运行我们的app，但我们不会花太多时间在这篇文档上
为了使app正常工作，ionic会在HTML中寻找<ion-app>标签，例如：
<ion-app></ion-app>
这些文件在index.html的底部
<script src="cordova.js"></script>
<script src="build/main.js"></script>
build/main.js是一个级联文件包含ionic、Angular、和app 脚本
cordova.js在本地开发时会出现404，因为它是在Cordova编译的过程中被注入到项目中的
./src
在src目录下我们可以找到原始的、未编译的代码。这是ionic app大部分工作的地方。当我们运行ionic serve时，src里的代码会被编译成浏览器能够理解的javascript版本（当前是ES5）。这意味着我们可以使用Typescript在更高版本上运行，但是需要向下编译到浏览器所需要的旧版本。
src/app/app.module.ts是我们app的入口
在文件的顶部我们可以看到如下内容：
@NgModule({
declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
imports: [ BrowserModule, IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
providers: []
})
export class AppModule {}
基本上每个app都有一个根模块去控制应用程序的其他部分，这与Ionic和Angular 1的ng-app指令非常相似，这也是我们使用ionicBootstrap引导app程序的地方。
在这个模块中，我们在src/app/app.component.ts文件中设置myApp的根组件，这是第一个在应用程序中加载的组件，通常它是一个空的shell，用于加载其他组件。在app.component.ts中，我们将src/app/app.html设置为模板，文件内容如下
./src/app/app.html
这是src/app/app.html的主要模板
<ion-nav id="nav" [root]="rootPage" #nav swipeBackEnabled="false"></ion-nav>
<ion-menu [content]="nav">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
在这个模板里，我们设置了一个ionic菜单作为侧边菜单，之后ion-nav组件作为主要内容区域，ion-menu的[content]属性是被绑定到我们ion-nav的本地变量nav，所以它知道应该在哪里动画
