原https://blog.csdn.net/sinat_28597179/article/details/79094235
开发工具--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 {}