解剖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,所以它知道它的动作。