项目结构

让我们来解剖一下lonic2的应用程序，在我们创建的文件夹中，有一个典型的cordova项目结构，我们可以安装插件，并创建特定于平台的项目。

一、./www/index.html

这是应用程序的主要入口点，但是他的主要目的是设置脚本和css，或者运行我们的应用程序，所以我们不会花太多时间在这上面。

lonic会在html的<ion-app>标签寻找app的功能。

在靠近底部的脚本附近;

<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>

build/js/app.bundle.js 是一个包含lonic、Angular和你的JavaScript的文件

cordova.js在开发过程中将会找不到，因为在创建过程中被注入你的项目中。

二、./app/app.ts

在我们文件目录中的预编译代码，这是大部分ionic2工作发生的地方，当我们运行ionic serve时，在app目录下的代码将会转变为合适的javascript版本来让浏览器理解。

app/app.ts是我们应用程序的入口点。

在文件中靠近顶部的地方，我们会看到：

@Component({
  templateUrl: 'build/app.html'
})
class MyApp {
  constructor() {
  }
}

ionicBootstrap(MyApp)

每个应用程序都有一个根组件来控制应用程序的其余部分，这也是我们用ionicBootstrap来引导程序的地方。

在这组件中，我们在build/app文件中设置模版文件。

三、./app/app.html

这是应用程序的主要模板文件。

<ion-menu [content]="content">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在这里面，我们设置了ion-menu来做为滑动菜单的功能，并且ion-nav部分来做为主要内容区域，ion-menu的[content]属性绑定了ion-nav中的本地变量content，所以