IONIC--项目目录结构

最新推荐文章于 2025-05-30 14:43:40 发布

转载最新推荐文章于 2025-05-30 14:43:40 发布 · 2.8k 阅读

ionic 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Ionic框架构建的应用程序的目录结构及核心文件app.module.ts的内容。详细解释了如何通过Visual Studio Code打开并查看项目的目录结构，并展示了app.module.ts中如何引入和配置Angular与Ionic的模块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具--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 
  class
  AppModule {}