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

前端每周清單專註前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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 篇

推薦閱讀：