ionic start myApp tabs后会创建一个工程包如下:
1.hooks忽略 、node_modules 依赖包、resources android与ios相关、src 主要的程序包、www为图片或者css或者js
2.config.xml 为工程配置文件,插件的版本等等类似pom.xml文件与web.xml的合体,为工程主要的配置文件
<content src="index.html" />定义首页
看一下index.html里面的内容<ion-app></ion-app> 为ionic的根,是app的开始如下注释:<!-- Ionic's root component and where the app will load -->
系统会自动调用
app.module.ts 所有的ts,都要在该文件声明
IonicModule.forRoot(MyApp),这边设置开始的app为MyApp
然后看Myapp 在文件app.component.ts里面声明如下:@Component({ templateUrl: 'app.html' }) export class MyApp { rootPage:any = TabsPage; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); }); } }展示界面app.html内容<ion-nav [root]="rootPage"></ion-nav> 看到了rootPage,rootPage:any = TabsPage;则继续走了TabsPage.ts@Component({ templateUrl: 'tabs.html' }) export class TabsPage { tab1Root = HomePage; tab2Root = AboutPage; tab3Root = ContactPage; constructor() { } }然后到界面tabs.html,内容如下:<ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> </ion-tabs>然后到about.ts、contact.ts、home.ts,然后看看about.html 、contact.html、home.html