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

Ionic4.x 项目结构简单分析

猜你喜欢