IONIC--项目目录结构

开发工具--Visual Studio Code

 https://code.visualstudio.com/

点击打开文件夹--打开创建的app的目录可查看目录结构

ionic目录结构

主要是看SRC目录：（其他作为了解）





pages中about、content、home目录下的html就是app显示的html；<ion-title>--标题，<ion-content>--内容

*app--app.module.ts

/**根模块--告诉ionic如何组装应用 */
//引入ionic、angular的系统模块
import { NgModule,ErrorHandler }from'@angular/core';
import { BrowserModule }from'@angular/platform-browser';
import { IonicApp,IonicModule,IonicErrorHandler }from'ionic-angular';

//引入根组件
import { MyApp }from'./app.component';

//引入自定义的组件(页面)
import { AboutPage }from'../pages/about/about';
import { ContactPage }from'../pages/contact/contact';
import { HomePage }from'../pages/home/home';
import { TabsPage }from'../pages/tabs/tabs';

//打包成app后配置启动画面、导航条等的服务--忽略
import { StatusBar }from'@ionic-native/status-bar';
import { SplashScreen }from'@ionic-native/splash-screen';

@NgModule({
declarations: [//声明组件
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [//引入的模块（依赖的模块）
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],//启动模块
entryComponents: [//配置不会在模板中使用的组件
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [//配置服务
StatusBar,
SplashScreen,
{provide: ErrorHandler,useClass:IonicErrorHandler}
]
})
export classAppModule {}