Ionic4基础--目录结构以及核心文件分析

1、Ionic4.x 目录结构分析

e2e：端对端测试文件

node_modules：项目所需要的依赖包

resources：Android / iOS 资源 （更换图标和启动动画）

src：开发工作目录，页面、样式、脚本和图片都放在这个目录下

www：静态文件，ionic build --prod 生成的单页面静态资源文件

platforms：生成 Android 或者 iOS 安装包需要的资源（cordova platform add Android后会生成）

plugins：插件文件夹，里面放置各种cordova安装的插件

config.xml：打包成 app 的配置文件

package.json：配置项目的元数据和管理项目所需要的依赖

ionic.config.json：ionic配置文件

angular.json：angular配置文件

tsconfig.json：TypeScript 项目的根目录，指定用来编译这个项目的问根文件和编译选项

tslint.json：格式化和校验 typescript

2、src 下面文件分析

app：应用根目录（组件、页面、服务、模块）

assets：资源目录（静态文件，图片，js框架...）

theme：主题文件，里面有一个scss文件，设置主题信息

global.scss：全局 css 文件

index.html：index 入口文件

main.ts：主入口文件

karma.conf.js / test.js：测试相关的配置文件

polyfills.ts：这个文化包含 Angular 需要的填充，并在应用程序之前加载

 

3、app.module.ts 分析

/*这个文件是Ionic 根模块，告诉 Ionic 如何组装应用*/

//angular 核心
import { NgModule } from '@angular/core';
//BrowserModule，浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
//路由
import { RouteReuseStrategy } from '@angular/router';
//ionic 核心模块
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
//启动画面插件相关服务
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
//导航条插件相关服务
import { StatusBar } from '@ionic-native/status-bar/ngx';
//路由模块
import { AppRoutingModule } from './app-routing.module';
//根模块
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],//配置当前项目运行的组件
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],//配置当前模块运行依赖的其他模块
  providers: [//配置项目所需要的服务
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]//指定应用的主视图（称为根组件）通过引导根 AppModule来启动应用，这里一般写的是根组件
})
export class AppModule {}