摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇

前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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 作為后端存儲支撐來構建完整的認證系統。( http://6me.us/PxWiA )

《Angular 應用中的狀態管理》：本系列文章介紹了如何利用 ngrx/store 與 ngrx/effects 對典型的 Angular Todo 應用進行狀態管理。( http://6me.us/jMVVqk )

《Angular的模塊間通信》：模塊是Angular的構建單元，Angular應用程序的所有可視化元素也是由模塊構建的。當我們把模塊拆散成更小的模塊時，我們就要確保它們可以把數據傳來傳去。到那時候，恰當地模塊間通信機制就成了我們應用程序的基礎，可以讓所有的數據都保持同步狀態。( https://parg.co/bOD )

《Angular 4 學習資源》：隨著 Angular 4 的正式發布，本文也收集了部分學習 Angular 4 的資源，包括特性總結、服務端渲染、響應式編程、樣式指南等等多個部分。( https://parg.co/bQ0 )

《構建可維護的大型 Angular 2 應用》：本文是來自 Versett 的工程師介紹其團隊在基于 Angular 2 構建大型應用時的實踐與總結。( https://parg.co/bQm )

《你應該掌握的關于調試 Angular 應用的知識》：調試是 Web 開發中不可或缺的部分，特別是對于那些接管已存在代碼庫的開發者，他們往往需要經過大量的調試才能了解代碼的架構與邏輯。不過貌似 Angular 官方文檔中尚缺專門對于 Angular 中調試的講解，本文則是深度淺出地講解 Angular 應用開發過程中的調試技巧。本文首先介紹了作者調試源代碼的技巧，然后介紹了如何使用框架內置的調試 API 來進行應用調試。( https://parg.co/bN1)

《從實用主義視角來看現代前端應用開發》：現代 Web 開發技術變革迅速，而我也經歷了從純 JS 、jQuery、Vaadin、Angular JS、React 等等一系列的變遷。本文則首先思考何謂現代 Web 應用，然后考慮現代 Web 應用常用的項目架構與構建方式，譬如 TypeScript、Webpack、Linting 等內容，然后討論現代常用的技術架構，譬如 React.j、MobX、依賴注入等相關知識。( http://dimafeng.com/2017/04/2... )

《Angular v5 中可期待的新特性》：在 Angular V4 發布之后，Angular 團隊就開始致力于 Angular v5 的開發，本文則是介紹 Angular V5 中部分可期待的新特性。在 Angular V5 中團隊致力于簡化應用的編譯流程，將 AOT 編譯模式設置為默認模式；同時會添加編譯時的自動監控輔助命令，并且為模板添加類型檢測的功能；同時 V5 版本會進一步優化錯誤提示，并且使得未來的升級更加地平滑。( https://parg.co/bVy )

Angular 2+ 項目實戰系列：本系列文章包含了八個不同的章節，從零開始介紹如何利用 MongoDB、Express、Angular 2+ 以及 Node.js（MEAN Stack）來構建某個真實的應用項目。第一部分著眼于進行基礎環境的搭建，包括搭建 Angular 應用開發環境、本地搭建 MongoDB、在 Auth0 申請賬戶與開發者密鑰、搭建 Node.js 服務器并且為 Angular 應用添加基礎的組件等等。第二部分著眼于添加基礎的權限驗證功能，并且構建數據模型等。 ( https://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 為上傳與下載這些耗時操作提供了實時進度反饋回調，以方便開發者進行調試或者反饋給用戶。( https://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 以上的評分。( https://parg.co/biQ )

《一系列優秀的 Angular 2 組件集錦》：Angular 2 是非常不錯的前端開發框架，而本倉庫則是一系列開源的 Angular 2 組件的集錦。這些組件包括浮層、通知、氣泡、菜單、加載指示、表格、樹、時間、圖表、地圖、無限滾動、音視頻、SVG、PDF 以及各種各樣會在表單中用到的組件。

《generator-ngx-app》：Angular 4 商業級應用項目生成器，其包括了 angular-cli 提供的現代工具與工作流，以及來自于社區的最佳實踐、可擴展的基礎模板以及較好地學習曲線。（ https://github.com/angular-st... ）

React 學習與實踐資料索引

React 與前端工程化實踐

前端每周清單半年盤點之 Vue.js 篇

前端每周清單半年盤點之 React 與 ReactNative 篇

前端每周清單半年盤點之 JavaScript 篇