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.starter.json:ionic 配置文件 angular.json angular 配置文件
tsconfig.json: TypeScript 項目的根目錄，指定用來編譯這個項目的根文件和編譯選項 tslint.json:格式化和校驗 typescript

Ionic4.x src 下面文件分析

app:應用根目錄 (組件、頁面、服務、模塊...) 
assets:資源目錄(靜態文件(圖片，js 框架...) 
theme:主題文件，里面有一個 scss 文件，設置主題信息。 
global.scss:全局 css 文件
index.html:index 入口文件
main.ts:主入口文件
karma.conf.js/test.js:測試相關的配置文件
polyfills.ts: 這個文件包含 Angular 需要的填充，並在應用程序之前加載

app.module.ts 分析

 

//文件：根模塊  告訴ionic如何組裝應用


//ionic angular的核心文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

//ionic打包成app以后配置啟動畫面 以及導航條的服務  （不用管）
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]
})
export class AppModule {}

 

app-routing.module.ts 分析

 

import { NgModule } from '@angular/core';
//路由相關配置
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
//路由配置
const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'button', loadChildren: './button/button.module#ButtonPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}