Angular Addicts # NgRx 在測試中使用頁面物件模型，微前端使用 Vite 等-js教程-PHP中文網

首頁

web前端

js教程

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

Mary-Kate Olsen

Jan 15, 2025 pm 06:29 PM

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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

如何創建和發布自己的JavaScript庫？Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

jQuery矩陣效果Mar 10, 2025 am 12:52 AM

將矩陣電影特效帶入你的網頁！這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效，只需選擇一張圖片，插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧，非常有趣！工作原理插件將圖片加載到畫布上，讀取像素和顏色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域，並利用jQuery計算每個區域的平均顏色。然後，使用

如何構建簡單的jQuery滑塊Mar 11, 2025 am 12:19 AM

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。如今，圖片輪播已成為網站必備功能——一圖胜千言！決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何