项目结构

让我们通过一个 Ionic 2 程序来剖析项目结构，在这个被创建的文件夹中，我们有一个典型的 Cordvoa 项目结构让我们可以安装原生插件并且可以创建平台的特定文件。

./src/index.html

src/index.html

是这个程序的主入口, 他的目地是设置, 或者开始运行我们的程序. 我们不会花太多时间在这个文件上.

为了您的程序功能，Ionic 从 HTML 文件中寻找 <ion-app> 标签,比如这个例子中：

<ion-app></ion-app>

和底部附近的 Script

<script src="cordova.js"></script>
<script src="build/main.js"></script>

• build/main.js 是一个 Ionic 中的连接件, Angular 和 你应用的 JavaScript.

• cordova.js 当您本地开发的时候会显示 404, 因为他会在 Cordova 创建过程注入您的项目。

./src/

在src目录中我们发现原始,没有编译过的代码。这里是 Ionic 2 大多数工作的地方，当我们运行 ionic serve 命令，我们的 src/ 中的代码会被 解释器（transplied） 转换成正确的浏览器能够理解的 Javascript。（现在是 ES5），这就意味着我们可以使用高版本的 TypeScript 来编写代码，但是会自动编译成浏览器需要的 JavaScript 版本。

src/app/app.module.ts 是我们 App 的入口点.

在这个文件头部的部分，我们会看到：

@NgModule({
  declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
  imports: [IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
  providers: []
})
export class AppModule {}

每个 App 都有一个基本上控制应用程序的其余部分的 root moudle，这和 Ionic 1 和 Angluar 1 中的 ng-app 很相似。这也是我们通过 ionicBootstrap 引导我们的 App.

在 src/app/app.component.ts 这个模块中，我们为我们的 App 设置 根组件（root component），这是在我们的应用程序中加载的第一个组件，通常它是一个空的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>

在这个模板中，我们设置一个 ion-menu 作为侧边栏，然后一个ion-nav组件作为主要内容区域。 ion-menu的[content]属性绑定到我们的ion-nav的局部变量nav，所以它知道它应该在哪里动画。

接下来，我们来看看如何创建更多的页面并执行基本的导航。