您的位置：首页 > 其它

ionic2-项目结构介绍

2017-06-30 11:40 155 查看

首先请看下图，左侧目录为项目初始后的结构
　　　注：platforms和plugins目录是执行添加平台命令后才会生成的

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航