iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
0

簡述

要進入到首頁之前,哪些模塊跟路由需要先設定。

檔案結構

-src
  |-app
    |-app.component.css
    |-app.component.html
    |-app.component.ts
    ...
    |-core
       ...
       |-core-routing.module.ts
       |-core.module.ts
    |-model
        |-data
            |-admin.ts
            |-...
        |-base.ts
        |-tab.ts
    |-cms
       |-admin
            |-...
       |-customer
            |-...
       |-index
            |-...
       |-order
            |-...
       |-product
            |-...
       |-user
            |-...
    |-cms-resolve.ts
    |-cms-routing.ts      

實作

(一) CoreModule

首先記得在模塊註冊相關。

@NgModule({
  imports: [SharedModule, TabModule, CoreRoutingModule],
  exports: [CoreComponent],
  declarations: [CoreComponent, MenuComponent],
  providers: [CoreService]
})
export class CoreModule {
  constructor(
    @Optional()
    @SkipSelf()
    parentModule: CoreModule
  ) {
    throwIfAlreadyLoaded(parentModule, "CoreModule");
  }
}

function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
  if (parentModule) {
    throw new Error(
      `${moduleName} has already been loaded`
    );
  }
}

CoreModule宣告自己是單例模式,如果CoreModule不存在就會新創一個,
已經有的話就會用原本的。


(二) CoreRoutingModule

const routes: Routes = [
  {
    path: "cms",
    component: CoreComponent,
    canActivate: [GuardService],
    children: CmsRouting
  },
  { path: "", redirectTo: "cms", pathMatch: "full" }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [CmsResolver]
})
export class CoreRoutingModule {}

(三) CmsRouting

import { Routes } from "@angular/router";
export const CmsRouting: Routes = [
  {
    path: "index",
    loadChildren: "src/app/cms/index/index.module#IndexModule"
  },
  {
    path: "user",
    loadChildren: "src/app/cms/user/user.module#UserModule"
  },
  {
    path: "admin",
    loadChildren: "src/app/cms/admin/admin.module#AdminModule"
  },
  {
    path: "customer",
    loadChildren: "src/app/cms/customer/customer.module#CustomerModule"
  },
  {
    path: "product",
    loadChildren: "src/app/cms/product/product.module#ProductModule"
  },
  {
    path: "order",
    loadChildren: "src/app/cms/order/order.module#OrderModule"
  }
];

(四) Base

import { IModel } from "./data";

export interface IPage {
  pageIndex: number;
  pageSize: number;
  length: number;
}

export interface IData {
  res: IModel | IModel[];
  errorcode: number;
}
  • IPage物件會相對應 Angular Materia 的分頁物件。

(五) IndexModule

先簡單測試可以到首頁。

檔案結構:

-src
  |-app
    |-cms
      |-index
        |-index-routing.module.ts
        |-index.component.css
        |-index.component.html
        |-index.component.ts
        |-index.module.ts

index.component.html

<span>hello</span>

index-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: IndexComponent,
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class IndexRoutingModule {}

index.module.ts

@NgModule({
  imports: [SharedModule, IndexRoutingModule],
  declarations: [IndexComponent],
  exports: [IndexComponent],
  providers: []
})
export class IndexModule {}

範例碼

https://stackblitz.com/edit/ngcms-corecomp

Start

一開始會跳出提示視窗顯示fail為正常,
請先從範例專案裡下載或是複製db.json到本地端,
並下指令:

json-server db.json

json-server開啟成功後請連結此網址:
https://ngcms-corecomp.stackblitz.io/cms?token=bc6e113d26ce620066237d5e43f14690


上一篇
day14 TabModule
下一篇
day16 List常見問題(一)
系列文
用Angular打造完整後台30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言