首頁 > web前端 > js教程 > Angular Addicts # NgRx 在測試中使用頁面物件模型,微前端使用 Vite 等

Angular Addicts # NgRx 在測試中使用頁面物件模型,微前端使用 Vite 等

Mary-Kate Olsen
發布: 2025-01-15 18:29:44
原創
140 人瀏覽過

Angular Addicts # NgRx  using the Page Object Model in tests, Micro Frontends using Vite & more

?嘿,Angular Addict 夥伴

這是 Angular Addicts Newsletter 的第 33 期,這是每月精選的引起我注意的 Angular 資源合集。 (這裡是第32期、第31期、第30期)

?發佈公告

?宣布 NgRx 19:NgRx 訊號功能、動作訊號等等!

Brandon Roberts 宣布最新版本的 NgRx,一些新功能:

  • SignalStore 引入了 withProps 功能,用於在建立過程中定義 SignalStore 中的靜態屬性或可觀察量。
  • 新的 signalMethod 實用函數,它為您提供 rxMethod 的好處,並且能夠僅使用訊號。
  • patchState 函數中的開發模式檢查可確保開發期間狀態不變性。
  • NgRx Store 現在支援訊號變更時的操作調度。

?2024 年 12 月有角寶石

?我的新 Angular 編碼風格

Kevin Kreuzer 最近使用 Signals 和新的 Angular API 重寫了一個大型程式碼庫。在本文中,他解釋了重構過程中出現的新編碼風格和模式。關鍵點包括採用獨立組件作為標準、過渡到使用訊號進行反應性以及擺脫傳統的生命週期掛鉤。

?將 Angular 的資源 API 與 NGRX 訊號儲存結合使用

Manfred Steyer 展示如何將 SignalStore 的 withProps 功能與 Resource API 結合使用。他的指南還包括使用 linkedSignal 和 signalMethod 連接範本驅動的表單。

?在 Angular 應用程式中使用頁面物件模型設計模式

Francesco Borzì 的文章討論了 Angular 應用程式中頁面物件模型 (POM) 設計模式的實作。 POM 允許測試專注於需要做什麼,而頁面物件則處理與 DOM 的互動「如何」完成,從而使測試程式碼更清晰、更易於維護。 Francesco 也介紹了他的新函式庫 ngx-page-object-model,旨在方便在 Angular 元件測試中使用 POM,並與各種測試框架相容。

?使用 Vite 在 15 分鐘內建立微前端架構!

Meidi Airouche 在他的文章中概述了使用 Vite 創建微前端架構,將 Vue.js、Angular 和 React 元件整合到模組化新聞入口網站中。此項目結合了:

  • Vue.js 導航標頭
  • 最新文章的 React Trending 部分
  • 熱門內容的 Angular 高亮區域

?掌握 Angular 中的元件通信

Michał Grzegorczyk 全面概述了促進 Angular 應用程式中元件之間溝通的各種方法。涵蓋的關鍵主題包括:

  • 輸入、輸出、Setter 和 ngOnChanges 生命週期鉤子
  • @注射服務
  • 元件/指令注入
  • 模板變數 (#)
  • 內容投影(@ContentChild / contentChild() / @ContentChildren / contentChildren())
  • 檢視與查詢清單 (@ViewChild / viewChild() / @ViewChildren / viewChildren())
  • 路由(參數、查詢、withComponentInputBinding()、狀態物件)

??‍?關於作者

我的名字是 Gergely Szerovay,我擔任資料科學家和全端開發人員多年,並且一直擔任前端技術主管,專注於基於 Angular 的前端開發。作為我角色的一部分,我不斷關注 Angular 和前端開發場景的整體發展。為了分享我的知識,我於 2022 年啟動了 Angular Addicts 每月通訊和出版物,以便我可以向您發送我每個月遇到的最佳資源。無論您是經驗豐富的 Angular 愛好者還是初學者,我都能滿足您的需求。如果您想成為作家,請告訴我。讓我們一起來學習Angular吧!在這裡訂閱?

過去幾年,Angular 發展得非常迅速,而在過去的一年裡,隨著生成式 AI 的興起,我們的軟體開發工作流程也快速發展。為了密切關注人工智慧輔助軟體開發的發展,我決定開始公開建立人工智慧工具,並在 AIBoosted.dev 上發布我的進展。加入我的學習之旅:在這裡訂閱?

在Substack (Angular Addicts)、Substack (AIBoosted.dev)、Medium、Dev.to、Twitter 或LinkedIn 上關注我,了解有關Angular 的更多信息,以及如何使用AI、Typescript、React 和Angular 構建AI應用程式!

?️往期

如果您錯過了前幾期的時事通訊,您可以在這裡閱讀,這是最新的 3 期:

  • Angular Addicts #32:Angular 19、新樣式指南 RFC 等
  • Angular Addicts #31:新的資源 API、效果更新等
  • Angular Addicts #30:何時使用效果、Angular DI 功能、請求快取等

?提交您的 Angular 資源

您最近是否發現或撰寫了有趣的 Angular 相關文章、推文或其他資源?請在評論中告訴我,或在 Twitter 上私訊我!我可能會在下一期 Angular Addicts 中介紹它!

以上是Angular Addicts # NgRx 在測試中使用頁面物件模型,微前端使用 Vite 等的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板