ionic2-项目结构介绍

时间：2022-12-25 22:58:48
首先请看下图，左侧目录为项目初始后的结构

　　　注：platforms和plugins目录是执行添加平台命令后才会生成的

ionic2-项目结构介绍
ionic项目结构
./src/ 目录是项目JS源代码文件夹，可以用ES6或者TS来写，最后会转译为ES5或其他版本的JS。
./src/index.html 是项目的起始入口。

在这个文件内会有
<ion-app></ion-app> 标签。ionic查找这个标签来运行app
<script src="cordova.js"></script> 本地部署时会打包到项目中
<script src="build/main.js"></script> 代码编译打包的最终文件，把ionic、angular和我们的App连接起来

src/app/app.module.ts 项目App的入口，是根模块
@NgModule({
  declarations: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
  imports: [BrowserModule,IonicModule.forRoot(MyApp),],
  bootstrap: [IonicApp],
  entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
  providers: [StatusBar,SplashScreen,{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

着这个文件中会做一下事情：
设置根组件为MyApp，位于src/app/app.component.ts文件，这个组件会第一个被加载

src/app/app.component.ts 项目App的根组件，组织、管理其他组件，HTML模板文件是src/app/app.html 
@Component({
  templateUrl: 'app.html'
})
export class MyApp {}
./src/app/app.html 项目根HTML模板，包括各种ionic组件和自定义组件
<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 [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
标签：

相关文章