前端每週清單半年盤點之 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 做爲後端存儲支撐來構建完整的認證系統。( 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 二、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… ）

延伸閱讀

• React 學習與實踐資料索引
• React 與前端工程化實踐
• 前端每週清單半年盤點之 Vue.js 篇
• 前端每週清單半年盤點之 React 與 ReactNative 篇
• 前端每週清單半年盤點之 JavaScript 篇