就像之前局部還原Module來實作Swiper的時候所說的，前端開發比起後端開發來說更加依賴不同的套件開發，有些基礎功能我們也可以直接使用第三方套件來實現我們想要的功能與元件

當然我相信一定有朋友的公司是自己的開發元件在公司套件集裡，但當我們從小白建立作品集的時候當然不太可能從刻輪子開始;假如刻出法拉利等級的輪子，拜託，請出道成為偶像來拯救吾等苦求輪子的紅塵俗人八，只要維護的好好的，錢錢大大的有

前端之所以比起後端更加需要套件的原因還有就是客戶會希望可以看到立即性回饋，現今敏捷式開發要是從輪子開始刻的話，不但速度沒有其他人快，品質也不一定有人家好

所以這邊推薦Angular的開發者們可以考慮看看Prime團隊所開發的PrimeNg

可以快速協助我們建構起一個基礎的功能與架構，當然最重要的就是幫我們節省了非常多的造輪子時間，我們可以透過屬性與參數來客製化自己想要的元件與實作功能

PrimeNg基本上都跟著Angular的大版同步更新自己的大版，所以我們直接安裝最新的就可以了

npm install primeng
npm install primeicons

然後我們需要在angular.json的style載入他的樣式，幫助我們打包出去的時候有載入到樣式

angular.json

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/e-shopping-system",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {...},
            "development": {...}
          },
          "defaultConfiguration": "production"
        },
        "serve": {...},
        "extract-i18n": {...},
        "test": {...},
        "lint": {...}

同時我們也需要在我們的 _third_library.scss 之中載入PrimeNg的樣式庫

// PrimeNg ^16.4.1 樣式庫
@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';
@import "primeicons/primeicons.css";

基本上就完成安裝與載入了

但由於PrimeNg本身是有使用Animation的部分，他原先是被載入到app.module之中的，我們這邊也同步更新app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './core/routes/app.routes';
import { provideStore } from '@ngrx/store';
import { reducer } from './core/store/reducers';
import { layoutReducerKey } from './core/store/reducers/layout.reducers';
import { provideHttpClient } from '@angular/common/http';
import { userReducerKey } from './core/store/reducers/user.reducers';
import { effects } from './core/store/effects';
import { provideEffects } from '@ngrx/effects';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideStore({
      [layoutReducerKey]: reducer[layoutReducerKey],
      [userReducerKey]: reducer[userReducerKey],
    }),
    provideEffects(effects),
    provideHttpClient(),
    provideAnimations(),
  ],
};

接下來我們就可以開始使用PrimeNg所提供的各式各樣開發好的Component、Module、Service來實作我們的系統了

首先先讓我們把拖了許久的layout給處理掉，Header已經有了，接下我們需要的是SliderMeanu、LoadingMask

首先是SliderMeanu，這個實作上的確可以我們自己刻出來，但總歸也還是挺繁瑣的，所以我們直接用別人已經做好的八

一樣在HeaderModule之中importSidebarModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
import { SwiperModule } from 'swiper/angular';
import { RouterModule } from '@angular/router';
import { SidebarModule } from 'primeng/sidebar';
@NgModule({
  declarations: [HeaderComponent],
  imports: [CommonModule, SwiperModule, RouterModule, SidebarModule],
  exports: [HeaderComponent],
})
export class HeaderModule {}

然後在header.component.html之上直接放入<p-sidebar / >即可

<div class="header-lv1 w-full">
...
</div>
<div class="header-lv2 w-full">
...
</div>
<div class="header-lv3 w-full">
...
</div>

<p-sidebar [(visible)]="sidebarVisible">
  <h3>Sidebar</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</p-sidebar>

摁 這樣就完成了，超級簡單的

然後我們在component之中宣告sidebarVisible，先賦值true讓他一直呈現在頁面上，因為接下來要說HostListener

透過將JS原生的eventListener包裝成HostListener，我們可以很輕易的監聽螢幕寬度變化，從而實現RWD的實作

  /**
   * listen window width
   * @param event
   */
  @HostListener('window:resize', ['$event'])
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  private onResize(event: any): void {
    if (event.target.innerWidth < 660) {
      this.hideSlider();
    }
  }
  hideSlider(): void {
    this.sidebarVisible = false;
  }

在slider上面我們可以這樣子實作他

<p-sidebar [(visible)]="sidebarVisible" [showCloseIcon]="false">
  <ng-template pTemplate="header"
    ><div class="w-full flex justify-between">
      Category
      <button (click)="toggleSliderMenu()">
        <p class="fa-solid fa-xmark cursor-pointer"></p>
      </button></div
  ></ng-template>
  <ng-template pTemplate="content">Body Content</ng-template>
  <ng-template pTemplate="footer">Footer Content</ng-template>
</p-sidebar>

而loading的mask也不難，我們可以使用BlockUI進行遮罩，第一步避免使用者亂點，同時給予使用者操作的強回饋機制，讓他知道它的操作是有反應的

<div *ngIf="isLoading$ | async as Loading">
  <p-blockUI [blocked]="Loading">
    <p-progressSpinner></p-progressSpinner>
  </p-blockUI>
</div>

以上我們就完成了layout最基礎的開發了

明天的內容容我想想要怎麼安排，這邊先賣個關子~