Ionic4.x simple project structure analysis

New Project

e2e: end to end test file 
node_modules: project required dependencies 
Resources: Android / ios resources (replacement icon and start the animation) 
src: the development of the working directory, page, style, script and pictures are placed in the directory 
www: Static file, Ionic Build - single-page static resource files prod generation 
platforms: resource generation android or ios installation package need --- (after cordova platform add android generates) 
plugins: plugins folder, which placed the installation of a variety of cordova plug-config.xml: packaged into app profiles 
package Penalty for .json: configuration item metadata and project management needed to rely ionic.config.json, ionic.starter.json: ionic profile angular.json angular profile 
tsconfig. json: typeScript project root directory, the root file and compile options used to compile the project specified tslint.json: formatting and checking typescript

Ionic4.x src the following file analysis

app: application root directory (components, pages, services, modules ...) 
Assets: Resource Directory (static files (images, js framework ...) 
Theme: the theme file, which has a scss file, set the theme information. 
, Ltd. Free Join. scss: global css file 
index.html: index entry file 
main.ts: document main inlet 
karma.conf.js / the test.js: test-related profile 
polyfills.ts: this file contains a filler Angular required, and the application before loading

app.module.ts analysis

 

// File: root module tells how ionic assembly applications 


// ionic Angular core document 
Import {} from NgModule '@ Angular / Core' ;
 Import {} from BrowserModule '@ Angular / Platform-Browser' ;
 Import {} from RouteReuseStrategy ' Angular @ / Router ' ;
 Import {IonicModule, IonicRouteStrategy} from' @ Ionic / Angular ' ; 

// Ionic packaged into app after startup screen configuration and navigation services (not control) 
Import {from} the SplashScreen' @ Ionic-Native / Screen-Splash / NGX ' ;
 Import {from} the StatusBar' @ Ionic-Native / Status-bar / NGX ' ; 

// introduction route profile 
Import {} from AppRoutingModule' ./app-routing.module'; 

// introduced into Agrobacterium assembly 
Import {} from AppComponent './app.component' ; 

@NgModule ({ 
  Declarations: [AppComponent],   // declare assembly 
  entryComponents: [], // arranged components are not used in the template 
  imports : [BrowserModule, IonicModule.forRoot (), AppRoutingModule],    // module dependencies introduced module 
  Providers: [   // configure services 
    the StatusBar, 
    the SplashScreen, 
    {Provide: RouteReuseStrategy, useClass: IonicRouteStrategy} 
  ], 
  on Bootstrap: [AppComponent] 
}) 
Export class the AppModule {}

 

app-routing.module.ts analysis

 

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 {}