安装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的底部

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，所以它知道应该在哪里动画