Please enable JavaScript.
Coggle requires JavaScript to display documents.
結構規劃兩種版本, app - 24h, PChome,
結構規劃兩種版本
app - 24h
core
services / 服務元件
pipe / 管線元件
interceptors
models
guard
src
assets
images
log
light
dark
components
logo
sample
css
base
reset.css
components
layout.css
icons.css
api
data
styles.css
region
pages
region
region_onsale
components
store
pages
store_list
store_grid
store
components
sign
components
pages
sign
sign_onsale
shared
components
pagination
nav
nav_cutprice
nav_replenish
prodItem
loading
alert
layouts
header
header_replenish
header_cutprice
footer
hp
pages
hp_onsale
hp
components
checkout
pages
checkout_receipt
checkout_customer
checkout_payment
components
replenish
components
pages
replenish
prod
components
pages
prod
prod_onsale
cutprice
pages
cutprice
components
member
pages
member_info
member_deposit
member_clause
member_login
components
PChome
24h
app
Home／平台功能
Replenish／熱銷補貨
Replenish
Module.ts
Component
Cutprice／最新降價
cutprice
Component
Module.ts
Onsale／瘋殺特賣
Module.ts
Component
Onsale
Prod／單品
prod
Module.ts
Component
Lightbox
Lightbox01
Lightbox03
Lightbox02
Sign／路標
Sign
Component
Module.ts
Store／館
Module.ts
Component
store_grid
store_list
Hp／首頁
Module.ts
hp
Component
Component
prod／商品
prod
navbar／選單
nav-list-circleright
loader／加載
loader
GO TOP／回TOP
GO TOP
boxman_teammate／神隊友
Gotop-bg-red
Region／區頁
Component
Module.ts
region
Hito／搶購活動
Module.ts
cutprice
Component
Block
header
header_Cutprice
HTML／CSS／TS
header_Replenish
HTML／CSS／TS
Member／會員功能
Enterprice／企業登入
Module.ts
Component
Lightbox
Purchaselistｖ採購明細
Billing／各期帳單查詢
Credit／採購額度
Member／採購帳號管理
Voucher :warning:／企業贈送券
Voucher
Login／登入
Login
Catalog
Module.ts
Component
loader／加載
loader_系統忙碌中
Auth :warning:／認證
Login
Module.ts
Component
loader／加載
系統忙碌中
Component
navbar／選單
loader／加載
loader_Invoice
［now］Await_Invoice
會員載具歸戶作業處理中
Block
header
header_other
HTML／CSS／TS
header_member
HTML／CSS／TS
Account／我的帳號
Inquire :warning:／折價券
Component
Module.ts
Coupon_list
Coupon_search
Module.ts
Account
Component
CoBrander :warning:／點數管理
Module.ts
Component
Cobrander／PChome聯名卡管理
Coin／P幣
CoBrander／點數管理
Cobrander／PChome聯名卡管理
Module.ts
Coin／P幣
Component
Inquire／折價券
Module.ts
Coupon_search
Coupon_list
Component
QA／常見問題
Component
QA
Module.ts
Auth／認證
Component
loader／加載
系統忙碌中
Module.ts
Login
Order／交易紀錄
Announce／訂單查詢
Module.ts
Component
Voucher／企業贈送券
Voucher
Shared／共享：共用元件
Component
loader／加載
error-code／錯誤頁面
captcha／驗證
captcha
paginator／頁碼
paginator
button／按鈕
button
tabs／標籤
tabs
toastj／短訊息
alert／警告
icons／圖示
icons
rating-star／等級星號
rating-star
form／表格
form
tooltip／訊息泡泡
tooltip-cutprice
tooltip
Block
footer
footer
HTML／CSS／TS
header
header
HTML／CSS／TS
Module.ts
base
reset.css
style.css
EDM／活動功能
Credit_card
Activity
Component
Lightbox
Lightbox01
Lightbox02
Lightbox03
Module.ts
Component
Bank
P_Coin
Block
header
header
HTML／CSS／TS
header_EDM
HTML／CSS／TS
Ecvdr_credit
traded
Module.ts
viewevent
repayment
Component
withdrawal
verification
loan
application
collection
Double11
Component
Main
Digi
Module.ts
Beauty
3C
Ce
Daily
Life
Live
活動
活動1
Component
Module.ts
活動3
活動2
Insurance
2020_Insurance
Insurance_Chubb
HTML／CSS／TS
Insurance_seano
Insurance_Cathay
HTML／CSS／TS
2021_Insurance
Insurance_Tmnewa
Insurance_Cathay
Module.ts
Component
Core／核心：
系統主狀態
服務與依賴注入
入口應用配置端點 app configurations, 管道pipes, HTTP 攔截interceptors, 防止任意存取 guards, 服務 service,等等
Module.ts
Checkout／結帳功能
payment_qrcode／行動支付
payment_qrcode
HTML／CSS／TS
Module.ts
Component
result／結帳完成
Component
Module.ts
result
HTML／CSS／TS
Component
loader／加載
navbar／選單
checkout／結帳頁
Component
Module.ts
checkout
HTML／CSS／TS
assets
images
Member
Core
Checkout
Shared
Home
Pi
Travel
Mitch
[Features功能系統]
Core／核心
Shared／共享
Home／平台功能
Checkout／結帳功能
Member／會員功能
EDM／活動功能
Component
所有頁面都有元件
文字
button／按鈕
button
paginator／頁碼
paginator
rating-star／等級星號
rating-star
form／表格
form
icons／圖示
icons
tabs／標籤
tabs
LOGO／企業標誌
LOGO
captcha／驗證
captcha
Block
針對[頁面區塊]，為獨立資料夾
header
header／預設
HTML／CSS／TS
footer
footer／預設
HTML／CSS／TS
[導覽]
與父層相同名稱的屬性，皆為預設值
導覽分頁
HTML／CSS／TS
Module.ts
僅在[功能]或[導覽]下才唯有一個module
有[導覽]則功能就不會在有一個module.ts
Component
服務與依賴注入 :!?:
服務 service
app - 24h
首頁 hp
''
熱銷補貨頁 replenish
'replenish'
最新降價頁 cutprice
'cutprice'
商品功能頁
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
Module
Component
Module
Component
app-path.const.ts
Module
Component
Module
Component
Routing
Module
Component
Module
Component
Module
Component
指定 app.routing.ts 中要 lazy load 的路由 (routes)
建立 Component 路由文件
調整要被 lazy load 的 module 的內容
Module
Component
Note. 在每個頁面都有獨立的 module 和頁面 component
當一個網站包含的東西越多，開啟的速度也會越慢
實作 Lazy Loading?
解決頁面載入速度的問題
Module
Component
Module
Component
Routing
Module
Component
Routing
Module
Component
Routing
Module
Component
Routing
Module
Component
Routing
Module
Component
Routing
Module
Component
Routing
Module
Component
Routing
全站共用的元件
Component
region.page.ts | html | css
Component
hp_onsale.page.ts | html | css
hp.page.ts | html | css
【公告】
有更好的命名或是延伸
可直接寫在旁邊討論
或是用分隔線列出(A/B/C/D/)以此類推
Component
Component
Component
核心模組
Component
Component
Component
Component
Component
共用模組
sign.page.ts | html | css
Component
store.page.ts | html | css
Component
Component
Component
頁面共用的元件
region_onsale.page.ts | html | css
store_grid.page.ts | html | css
sign_onsale.page.ts | html | css
Component
Component
通常會是跟業務邏輯相關的程式
Component
Component
各頁面模組
路由守門員
未來要擴展會不會比較好管理?
https://ithelp.ithome.com.tw/articles/10247953
實作相依注入
https://ithelp.ithome.com.tw/articles/10187200
Component
Note. 在每個頁面各自 import 需要的 module
轉換資料格式
prod_onsale.page.ts | html | css
checkout_payment.page.ts | html | css
https://ithelp.ithome.com.tw/articles/10247058
未來頁面越複雜會需要各自共用的元件?
replenish.page.ts | html | css
https://biiyoyo.com/post/angular/angular-structure/
checkout_customer.page.ts | html | css
checkout_receipt.page.ts | html | css
https://ithelp.ithome.com.tw/articles/10218785
參考資料
BII Yo Yo - Angular 專案結構規劃
How to Structure Angular Apps in 2021
Angular 小學堂（四之一）
可觀察物件的攔截器
存放資料與邏輯
store_list.page.ts | html | css
cutprice.page.ts | html | css
prod.page.ts | html | css
Note. 一個或一小群的 components 封裝成一個 module
Angular 專案結構規劃參考
靜態的資源檔 (eg. JavaScript、JQuery、CSS、Images)
Component
Component
icons, ...etc.
member_clause.page.ts | html | css
https://ithelp.ithome.com.tw/articles/10209562
父元件
member_info.page.ts | html | css
member_login.page.ts | html | css
Component
路徑定義檔 → 規劃專案的路由設定
子元件
透過 api 取得的 .json 資料
Component
目前路由規劃
member_deposit.page.ts | html | css
Component
全站共用樣式檔
可以透過
Input()
去調整細微樣式? (從 parent 傳給 child)
ngSwitch
ng-content
import
other style files
Component