設(shè)計(jì)結(jié)構(gòu)如下

模塊化設(shè)計(jì)

其中 component.module 是公共組件的模塊。虛線的base.module 是暫時(shí)沒有實(shí)現(xiàn)的模塊,里面應(yīng)該包含所有項(xiàng)目都能通用的一些服務(wù)、組件等。

代碼結(jié)構(gòu)如下

代碼模塊結(jié)構(gòu)

根模塊內(nèi)容

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import {HttpModule} from '@angular/http';

import { MyApp } from './app.component';
import { TabsPage } from '../pages/tabs/tabs';

import { MineModule } from '../pages/mine/mine.module';
import { HomeModule } from '../pages/home/home.module';
import { ClassifyModule } from '../pages/classify/classify.module';
import { ShoppingModule } from '../pages/shopping/shopping.module';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Network } from '@ionic-native/network';
import { IonicStorageModule } from '@ionic/storage';
import { HttpService } from '../providers/HttpService';
import { NativeServiceC } from '../providers/NativeServiceC';
import { GlobalData } from '../providers/GlobalData';

@NgModule({
  declarations: [
    MyApp,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp,{
      mode:'ios', // android是"md" 統(tǒng)一為iOS平臺(tái)樣式
      backButtonText:'',
      tabsHideOnSubPages:true
    }),
    IonicStorageModule.forRoot(),
    //  自定義模塊
    MineModule,
    HomeModule,
    ClassifyModule,
    ShoppingModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Network,
    HttpService,
    NativeServiceC,
    GlobalData,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

• declarations - 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令、管道。

• exports 導(dǎo)出對(duì)外公開的組件、模塊

• imports 本模塊聲明的組件模板需要的類所在的其它模塊。

• providers 本模塊中包含的服務(wù)。

• bootstrap 指定應(yīng)用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設(shè)置bootstrap屬性。

子模塊內(nèi)容

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {HomePage} from './home';

// module
import {ComponentModule} from '../../component/component.module'

import { LoginService} from '../login/loginService'

@NgModule({
    imports: [
        IonicPageModule.forChild(HomePage),
        ComponentModule
    ],
    declarations: [HomePage],
    entryComponents: [],
    providers: [],
    exports: []
})
export class HomeModule {
}

和根模塊的內(nèi)容基本相同 較簡單 其他模塊一樣

這樣進(jìn)行 模塊化以后 每一個(gè)模塊都只關(guān)心和自己相關(guān)的組件 服務(wù)等 層級(jí)管理 較為方便

其他

項(xiàng)目代碼在碼云上管理 更新中。。。