全站共用的元件

PChome

24h

app

Pi

Component

region.page.ts | html | css

Component

  • Home／平台功能

app - 24h

  • Member／會員功能
  • region
  • store
  • Replenish／熱銷補貨
  • sign
  • shared
  • Shared／共享：共用元件
  • Cutprice／最新降價

pages

Onsale／瘋殺特賣

components

Module

hp_onsale.page.ts | html | css

pages

Prod／單品

region

Sign／路標

  • hp

store_list

Store／館

Sign

Module

  • Hp／首頁
  • checkout
  • replenish
  • core

Replenish

  • prod

components

pages

Module

  • components

components

  • Component

Enterprice／企業登入

  • Module
  • pagination

Module

Component

hp.page.ts | html | css

Component

Module.ts

Login／登入

  • Component

services / 服務元件

  • prod／商品

cutprice

【公告】
有更好的命名或是延伸
可直接寫在旁邊討論
或是用分隔線列出(A/B/C/D/)以此類推

Module.ts

Component

pages

Component

Region／區頁

Component

Module.ts

  • cutprice

pages

Hito／搶購活動

Module.ts

pages

Module

核心模組

  • EDM／活動功能

hp

Component

pages

checkout_receipt

components

pages

Component

  • nav

Component

Component

components

prod

Component

Module.ts

Component

Module.ts

checkout_customer

Component

hp_onsale

Component

Component

結構規劃兩種版本

loader／加載

  • prodItem

Component

components

共用模組

  • Component

components

Module

sign.page.ts | html | css

Component

Component

store.page.ts | html | css

sign

Component

cutprice

Component

Travel

replenish

Component

Module.ts

nav_cutprice

Component

頁面共用的元件

components

navbar／選單

cutprice

  • Core／核心：系統主狀態

error-code／錯誤頁面

region_onsale.page.ts | html | css

Mitch

prod

store_grid.page.ts | html | css

Component

Onsale

Login

sign_onsale.page.ts | html | css

nav_replenish

store_grid

checkout_payment

store_grid

Component

Component

  • navbar／選單

Component

pipe / 管線元件

store

通常會是跟業務邏輯相關的程式

Module.ts

region_onsale

Component

Component

hp

Component

sign_onsale

  • loading

store_list

region

  • alert

Component

Component

Module.ts

prod_onsale

Component

  • Checkout／結帳功能

各頁面模組

Component

captcha／驗證

  • Block
  • [Features功能系統]

Core／核心
Shared／共享
Home／平台功能
Checkout／結帳功能
Member／會員功能
EDM／活動功能

src

Credit_card

Block

路由守門員

Catalog

Ecvdr_credit

assets

interceptors

payment_qrcode／行動支付

Double11

指定 app.routing.ts 中要 lazy load 的路由 (routes)

  • paginator／頁碼

Lightbox

Block

Module.ts

Module.ts

建立 Component 路由文件

traded

loader／加載

Account／我的帳號

  • images

活動

  • layouts

Module.ts

  • footer

button／按鈕

tabs／標籤

CoBrander／點數管理

活動1

  • Block

header

Inquire ⚠／折價券

header_other

未來要擴展會不會比較好管理?

payment_qrcode

  • GO TOP／回TOP

https://ithelp.ithome.com.tw/articles/10247953

實作相依注入

Insurance

https://ithelp.ithome.com.tw/articles/10187200

Component

2020_Insurance

  • log

Inquire／折價券

Module

Component

所有頁面都有元件文字

QA／常見問題

Block

針對[頁面區塊]，為獨立資料夾

Cobrander／PChome聯名卡管理

Module.ts

2021_Insurance

Component

button／按鈕

viewevent

header_member

Component

result／結帳完成

paginator／頁碼

Component

Component

服務與依賴注入

captcha

Purchaselistｖ採購明細

toastj／短訊息

Component

Main

Note. 在每個頁面各自 import 需要的 module

repayment

HTML／CSS／TS

Insurance_Chubb

icons／圖示

Activity

checkout／結帳頁

rating-star／等級星號

Module.ts

Component

  • header

Module.ts

轉換資料格式

  • components

HTML／CSS／TS

header

models

[導覽]

與父層相同名稱的屬性，皆為預設值

Auth／認證

prod_onsale.page.ts | html | css

footer

footer／預設

Component

header

checkout_payment.page.ts | html | css

Order／交易紀錄

Note. 在每個頁面都有獨立的 module 和頁面 component

  • header

服務與依賴注入 ⁉

服務 service

Digi

Billing／各期帳單查詢

Component

https://ithelp.ithome.com.tw/articles/10247058

Voucher／企業贈送券

loader／加載

Insurance_Tmnewa

prod

導覽分頁

loader／加載

Auth ⚠／認證

Login

Insurance_seano

header

Module.ts

HTML／CSS／TS

Component

QA

Announce／訂單查詢

  • Module.ts

Component

header_EDM

form／表格

Module.ts

footer

  • header

header

Lightbox

Insurance_Cathay

checkout

調整要被 lazy load 的 module 的內容

Component

  • light

HTML／CSS／TS

Module.ts

Beauty

Credit／採購額度

header／預設

HTML／CSS／TS

3C

Member／採購帳號管理

Component

Voucher

Module.ts

GO TOP

未來頁面越複雜會需要各自共用的元件?

Ce

Lightbox

replenish.page.ts | html | css

HTML／CSS／TS

loader／加載

Daily

withdrawal

paginator

Component

loader／加載

Voucher ⚠／企業贈送券

Module.ts

Coupon_search

Account

Bank

Component

Module.ts

Module

Life

  • nav-list-circleright

Component

Coupon_list

verification

https://biiyoyo.com/post/angular/angular-structure/

  • logo

checkout_customer.page.ts | html | css

Module.ts

系統忙碌中

  • footer

Live

checkout_receipt.page.ts | html | css

系統忙碌中

loan

  • header_Cutprice

https://ithelp.ithome.com.tw/articles/10218785

  • dark

參考資料

BII Yo Yo - Angular 專案結構規劃
How to Structure Angular Apps in 2021
Angular 小學堂（四之一）

Module.ts

HTML／CSS／TS

form

Voucher

當一個網站包含的東西越多，開啟的速度也會越慢

Coupon_list

tabs

loader_系統忙碌中

loader／加載

HTML／CSS／TS

Component

Insurance_Cathay

Module.ts

  • header_Replenish

icons

Coupon_search

Module.ts

Lightbox01

可觀察物件的攔截器

button

HTML／CSS／TS

Coin／P幣

HTML／CSS／TS

Module.ts

Component

CoBrander ⚠／點數管理

存放資料與邏輯

boxman_teammate／神隊友

  • sample

header_replenish

header_cutprice

Module.ts

活動3

store_list.page.ts | html | css

HTML／CSS／TS

HTML／CSS／TS

cutprice.page.ts | html | css

HTML／CSS／TS

實作 Lazy Loading?

HTML／CSS／TS

application

Login

collection

guard

解決頁面載入速度的問題

Component

rating-star

prod.page.ts | html | css

Component

loader_Invoice
［now］Await_Invoice

會員載具歸戶作業處理中

Note. 一個或一小群的 components 封裝成一個 module

navbar／選單

Angular 專案結構規劃參考

活動2

Component

Module.ts

僅在[功能]或[導覽]下才唯有一個module
有[導覽]則功能就不會在有一個module.ts

Module.ts

button

Cobrander／PChome聯名卡管理

result

Component

HTML／CSS／TS

paginator

靜態的資源檔 (eg. JavaScript、JQuery、CSS、Images)

Component

Component

Component

Component

HTML／CSS／TS

P_Coin

loader

Coin／P幣

  • Module.ts
  • Module

app - 24h

  • Module
  • Module
  • css
  • member

Component

  • Component

rating-star／等級星號

icons, ...etc.

  • Routing

member_clause.page.ts | html | css

https://ithelp.ithome.com.tw/articles/10209562

父元件

member_info.page.ts | html | css

  • Module
  • Component
  • Component
  • Module

pages

  • Routing

alert／警告

member_info

member_login.page.ts | html | css

Component

路徑定義檔 → 規劃專案的路由設定

form／表格

Lightbox01

  • Module

icons／圖示

tabs／標籤

tabs

  • Module

assets

  • Module

images

rating-star

  • base
  • api

子元件

  • components

icons

  • tooltip／訊息泡泡

member_deposit

  • Component

透過 api 取得的 .json 資料

LOGO／企業標誌

  • Component
  • Gotop-bg-red

首頁 hp
''

  • Member
  • Component

Lightbox02

layout.css

Component

  • base

reset.css

入口應用配置端點 app configurations, 管道pipes, HTTP 攔截interceptors, 防止任意存取 guards, 服務 service,等等

form

  • Routing
  • Routing

captcha／驗證

  • Component

reset.css

  • Routing

目前路由規劃

  • Routing
  • app-path.const.ts

member_deposit.page.ts | html | css

styles.css

Lightbox03

captcha

style.css

熱銷補貨頁 replenish
'replenish'

  • Core

Component

全站共用樣式檔

可以透過 Input() 去調整細微樣式? (從 parent 傳給 child)

  1. ngSwitch
  2. ng-content
  • Checkout

data

member_clause

icons.css

  • Routing

Lightbox03

  • Shared

components

  • Component

member_login

import other style files

Component

最新降價頁 cutprice
'cutprice'

  • Routing
  • Routing
  • Home

LOGO

  • tooltip-cutprice

tooltip

Lightbox02

商品功能頁

CONTENT

block_w

nav

類別

品牌項目

品牌(link)

全部商品(link)

block_c

product

降價

Tooltips info

price主要價格網路價/網路價

商品名稱(link)

商品圖(link)

page

頁碼、上下頁(link)

頁數資訊

block_s

go_top(link)

HEADER

24h Logo

title(最新降價專區/熱銷補貨到商品)

FOOTER