Ionic 2 项目结构

解剖Ionic 2 app。进入项目创建的文件夹，这里有一个典型的Cordova项目结构，我们可以安装原生插件，创建平台定义工程文件。

./src/index.html

src/index.html是app的主入口, 设置脚本和CSS，引导、启动我们的应用。对于app的应用，Ionic在HTML中寻找标签。

下面的代码接近底部：

• build/main.js
  包含了Ionic、Angular和App自己的JavaScript的综合文件。

• cordova.js
  本地开发时404，Cordova构建过程中会注入你的项目。

./src/

在src目录中含有我们原始的未经编译的代码。也是我们编写Ionic 2 APP的主要工作目录。当我们运行 Ionic serve，我们在src目录下的代码编译成浏览器可以理解的（当前是ES5）正确JavaScript版本。这意味者我们可以使用TypeScript的高级特性，但是编译会使用浏览器需要的低级版本。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都有一个根模块控制应用。这很像Ionic和Angular1的ng-app。这同样也是我们使用ionicBootstrap引导我们app的地方。
这个模块中，我们设置跟组件到src/app/app.component.ts里面MyApp。这个我们的app加载的第一个组件，通常这是用于其他组件加载的空壳。在app.component.ts中，我们设置了src/app/app.html的模版，来看一下：

./src/app/app.html

这里是app中src/app/app.html的主要模版:

  
    
      Pages
    
  
  
  
    
      
        {{p.title}}
      
    
  

在这个模板中,我们建立一个ion-menu作为一个菜单,然后一个ion-nav组件作为主要内容区域。ion-menu的[content]属性绑定到本地变量ion-nav中的content,所以它知道它的动作。