3.3.项目结构

现在来看一下一个 Ionic 2 App 的结构。这是一个标准的 Cordova 项目结构。

./src/index.html

./src/index.html 是App的主要入口,设置脚本和CSS,运行整个App。我们不会花费太多时间在这个文件上,你可以看到HTML代码里有一个 <ion-app> 标签,像下面这样:

<ion-app></ion-app>

在底部还有以下的脚本:

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

build/main.js是自动生成的,实际上是把TypeScript转成了普通的JavaScript

cordova.js在本地开发的时候在浏览器中浏览会报404错误,这个文件会在Cordova打包的时候自动加到项目里。

./src/

src目录里我们会找到原始的没有经过编译的代码,这也是我们的主要工作目录。当我们运行ionic serve命令的时候,在src/目录下的文件会被转译成正确的浏览器能够解释的JavaScript版本(当前是ES5)。这意味着我们可以使用高级的TypeScript,但是会编译回浏览器需要的老版本的JavaScriptsrc/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 module来控制应用中其他的部分。如果你用过Ionic1Angular1的话,有点类似ng-app。这也是我们使用ionicBootstrap来启动应用的地方。

./src/app/app.html

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上,所以它能够知道要显示什么。

下面我们来看如何来创建新页面并实现基本的导航。

results matching ""

    No results matching ""