前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單；本文則是對於半年來發布的前端每週清單中的 Angular 相關的教程實踐與開源專案的盤點，可以檢視這裡獲得往期清單或者其他盤點篇。
教程實踐
《Google 是如何構建 Web 框架的？》：眾所周知 Google 使用單一倉庫來存放與共享程式碼，其中存放了超過 20 億行的程式碼，並且其使用了基於 Trunk 的開發正規化。對於很多其他公司的開發者而言，這一點可能非常不可思議，而本文即是以構建著名的 AngularDart 專案為例，介紹 Google 是如何構建大型開源的 Web 框架的。
《Learn Angular 2 with Me》：本系列視訊介紹 Angular 2 的環境搭建與部分工程例項。本教程介紹了 Angular CLI 的使用、Angular 模組基礎、構建登錄檔單、動態表單，等等。
《結合 Firebase 構建完整 Angular 認證系統》：該作者在視訊中詳細介紹瞭如何利用 Angular 2 構建前端介面，並且使用 Firebase 作為後端儲存支撐來構建完整的認證系統。( 6me.us/PxWiA )
《Angular 應用中的狀態管理》：本系列文章介紹瞭如何利用 ngrx/store 與 ngrx/effects 對典型的 Angular Todo 應用進行狀態管理。( 6me.us/jMVVqk )
《Angular的模組間通訊》：模組是Angular的構建單元，Angular應用程式的所有視覺化元素也是由模組構建的。當我們把模組拆散成更小的模組時，我們就要確保它們可以把資料傳來傳去。到那時候，恰當地模組間通訊機制就成了我們應用程式的基礎，可以讓所有的資料都保持同步狀態。( parg.co/bOD )
《Angular 4 學習資源》：隨著 Angular 4 的正式釋出，本文也收集了部分學習 Angular 4 的資源，包括特性總結、服務端渲染、響應式程式設計、樣式指南等等多個部分。( parg.co/bQ0 )
《構建可維護的大型 Angular 2 應用》：本文是來自 Versett 的工程師介紹其團隊在基於 Angular 2 構建大型應用時的實踐與總結。( parg.co/bQm )
《你應該掌握的關於除錯 Angular 應用的知識》：除錯是 Web 開發中不可或缺的部分，特別是對於那些接管已存在程式碼庫的開發者，他們往往需要經過大量的除錯才能瞭解程式碼的架構與邏輯。不過貌似 Angular 官方文件中尚缺專門對於 Angular 中除錯的講解，本文則是深度淺出地講解 Angular 應用開發過程中的除錯技巧。本文首先介紹了作者除錯原始碼的技巧，然後介紹瞭如何使用框架內建的除錯 API 來進行應用除錯。( parg.co/bN1)
《從實用主義視角來看現代前端應用開發》：現代 Web 開發技術變革迅速，而我也經歷了從純 JS 、jQuery、Vaadin、Angular JS、React 等等一系列的變遷。本文則首先思考何謂現代 Web 應用，然後考慮現代 Web 應用常用的專案架構與構建方式，譬如 TypeScript、Webpack、Linting 等內容，然後討論現代常用的技術架構，譬如 React.j、MobX、依賴注入等相關知識。( dimafeng.com/2017/04/23/… )
《Angular v5 中可期待的新特性》：在 Angular V4 釋出之後，Angular 團隊就開始致力於 Angular v5 的開發，本文則是介紹 Angular V5 中部分可期待的新特性。在 Angular V5 中團隊致力於簡化應用的編譯流程，將 AOT 編譯模式設定為預設模式；同時會新增編譯時的自動監控輔助命令，並且為模板新增型別檢測的功能；同時 V5 版本會進一步優化錯誤提示，並且使得未來的升級更加地平滑。( parg.co/bVy )
Angular 2+ 專案實戰系列：本系列文章包含了八個不同的章節，從零開始介紹如何利用 MongoDB、Express、Angular 2+ 以及 Node.js（MEAN Stack）來構建某個真實的應用專案。第一部分著眼於進行基礎環境的搭建，包括搭建 Angular 應用開發環境、本地搭建 MongoDB、在 Auth0 申請賬戶與開發者金鑰、搭建 Node.js 伺服器並且為 Angular 應用新增基礎的元件等等。第二部分著眼於新增基礎的許可權驗證功能，並且構建資料模型等。 ( parg.co/beA )
試用新的 Angular HTTP Client：在 Angular 4.3.0-rc.0 版本在，HTTP Client API 得到了極大的改造與提升，本文即是介紹新版本的 Angular HTTP Client 的用法。在新版本的 HTTP Client 中，其預設假設以 JSON 格式進行返回值解析，並且引入了靈活的 Interceptor 以動態操作請求頭或者響應體；同時新版本的 HTTP Client API 為上傳與下載這些耗時操作提供了實時進度反饋回撥，以方便開發者進行除錯或者反饋給使用者。( parg.co/bIV )
NgRx 的設計模式與技巧分享：狀態管理一直是構建前端應用過程中的難點之一， Angular 也為我們提供了多種不同的設計模式來進行狀態管理；而本文即是介紹如何使用 NgRx 這個庫進行狀態管理。NgRx 是非常簡單易用，沒有太多限制條件的狀態管理庫；本文首先概述了 NgRx 的核心概念與設計原則，然後以實際的專案為例介紹瞭如何使用 NgRx 處理 Action 以及副作用。
基於 NGModules 與 Webpack 的 Angular 應用模組分割與懶載入：本文主要討論如何在 Angular 應用開發中利用 Webpack 與 NGModules 實現對於程式碼庫的模組分割，並且利用懶載入來載入非首屏內容，從而提升整體的應用響應效能。本文首先介紹了程式碼分割與懶載入相關的概念知識，然後介紹瞭如何搭建 Webpack 基礎環境，然後介紹了使用 NgModules 以及效能對比；更多 Webpack 相關資料參考 https://parg.co/bVs 。
Angular 最佳實踐分享：作者在本文中分享自己在工作中總結出的 Angular 應用實踐，本文儘可能地避免官方的 Angular 樣式指南中提及的約定，而是著眼於呈現個人的經驗總結。本文依次介紹了型別定義、元件實踐、服務定義、模板使用等方面。
Angular 中利用新的動畫特效（v4.3+）優化路由變換：本文著眼於介紹 Angular 應用開發中，如何利用新的動畫特效，來為路由切換新增動畫效果。本文首先介紹瞭如何從獨立的依賴中引入動畫模組，與為應用新增路由配置以及簡單的路由動畫；然後介紹了 Angular 動畫介面，如何定義動畫、如何新增參差效果等內容，最後介紹瞭如何將這些整合為獨立的應用。
Angular 開發者常犯的錯誤列舉：本文作者從自己團隊的 Angular 開發經驗與 Code Review 中總結出了開發者常犯的錯誤，並且提出瞭解決方案。這些錯誤包括對於 Angular、Angular 2、Angular 4 等各個版本的誤解、ngOnChanges 與 ngDoCheck 對比、殭屍訂閱、冗餘訂閱、不同模組的 providers 誤用、直接操作 DOM 結點、重複宣告元件等方面。
Angular 效能優化：本文介紹了些常見的 Angular 開發中可用的效能優化建議，包括了利用 ChangeDetectionStrategy.OnPush 來顯式宣告元件間依賴、利用 trackBy 來追蹤唯一識別符號和避免冗餘的增刪、避免模板中的計算推導、禁用變化監測、使用懶載入等。
使用 Angular 元件的四個技巧：從.5 版本的 AngularJS 開始，元件就成為 Angular 的一部分，它為程式碼的組織和回收提供了一種便捷的方式。Angular（Angular2 的簡稱）與其說是 Angular 1.x 的升級，不如說是“續集”，它在移動支援和其他功能的基礎上進行了完全地重寫。這裡，1.x 中使用的控制器完全被元件取代。無論是否曾經使用或想繼續堅持 1.x，無論是從零學起還是在跨越階段，為了確保程式碼儘可能地優雅且不會過時，你都需要開始使用元件。無論屬於以上哪一類，都可以在這裡找到很多幫助簡化流程的方法。
#開源專案
《hacker-news-pwas》：基於不同的前端框架實現的符合 PWA 應用特性的 Hacker News APP 的合集，包括了常見的 React、Angular、Vue、Preact 等多個版本，並且均在 Lighthouse 評測中達到 90 以上的評分。( parg.co/biQ )
《一系列優秀的 Angular 2 元件集錦》：Angular 2 是非常不錯的前端開發框架，而本倉庫則是一系列開源的 Angular 2 元件的集錦。這些元件包括浮層、通知、氣泡、選單、載入指示、表格、樹、時間、圖表、地圖、無限滾動、音視訊、SVG、PDF 以及各種各樣會在表單中用到的元件。
《generator-ngx-app》：Angular 4 商業級應用專案生成器，其包括了 angular-cli 提供的現代工具與工作流，以及來自於社群的最佳實踐、可擴充套件的基礎模板以及較好地學習曲線。（ github.com/angular-sta… ）