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

./src/index.html

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

<ion-app></ion-app>

下面的代码接近底部：

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

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的主要模版:

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

  <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-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

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

Ionic 2 项目结构

./src/index.html

./src/

./src/app/app.html

猜你喜欢