摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇

前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對(duì)于半年來發(fā)布的前端每周清單中的 Angular 相關(guān)的教程實(shí)踐與開源項(xiàng)目的盤點(diǎn)，可以查看這里獲得往期清單或者其他盤點(diǎn)篇。

《Google 是如何構(gòu)建 Web 框架的？》：眾所周知 Google 使用單一倉(cāng)庫(kù)來存放與共享代碼，其中存放了超過 20 億行的代碼，并且其使用了基于 Trunk 的開發(fā)范式。對(duì)于很多其他公司的開發(fā)者而言，這一點(diǎn)可能非常不可思議，而本文即是以構(gòu)建著名的 AngularDart 項(xiàng)目為例，介紹 Google 是如何構(gòu)建大型開源的 Web 框架的。

《Learn Angular 2 with Me》：本系列視頻介紹 Angular 2 的環(huán)境搭建與部分工程實(shí)例。本教程介紹了 Angular CLI 的使用、Angular 模塊基礎(chǔ)、構(gòu)建注冊(cè)表單、動(dòng)態(tài)表單，等等。

《結(jié)合 Firebase 構(gòu)建完整 Angular 認(rèn)證系統(tǒng)》：該作者在視頻中詳細(xì)介紹了如何利用 Angular 2 構(gòu)建前端界面，并且使用 Firebase 作為后端存儲(chǔ)支撐來構(gòu)建完整的認(rèn)證系統(tǒng)。( http://6me.us/PxWiA )

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

《Angular的模塊間通信》：模塊是Angular的構(gòu)建單元，Angular應(yīng)用程序的所有可視化元素也是由模塊構(gòu)建的。當(dāng)我們把模塊拆散成更小的模塊時(shí)，我們就要確保它們可以把數(shù)據(jù)傳來傳去。到那時(shí)候，恰當(dāng)?shù)啬K間通信機(jī)制就成了我們應(yīng)用程序的基礎(chǔ)，可以讓所有的數(shù)據(jù)都保持同步狀態(tài)。( https://parg.co/bOD )

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

《構(gòu)建可維護(hù)的大型 Angular 2 應(yīng)用》：本文是來自 Versett 的工程師介紹其團(tuán)隊(duì)在基于 Angular 2 構(gòu)建大型應(yīng)用時(shí)的實(shí)踐與總結(jié)。( https://parg.co/bQm )

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

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

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

Angular 2+ 項(xiàng)目實(shí)戰(zhàn)系列：本系列文章包含了八個(gè)不同的章節(jié)，從零開始介紹如何利用 MongoDB、Express、Angular 2+ 以及 Node.js（MEAN Stack）來構(gòu)建某個(gè)真實(shí)的應(yīng)用項(xiàng)目。第一部分著眼于進(jìn)行基礎(chǔ)環(huán)境的搭建，包括搭建 Angular 應(yīng)用開發(fā)環(huán)境、本地搭建 MongoDB、在 Auth0 申請(qǐng)賬戶與開發(fā)者密鑰、搭建 Node.js 服務(wù)器并且為 Angular 應(yīng)用添加基礎(chǔ)的組件等等。第二部分著眼于添加基礎(chǔ)的權(quán)限驗(yàn)證功能，并且構(gòu)建數(shù)據(jù)模型等。 ( https://parg.co/beA )

試用新的 Angular HTTP Client：在 Angular 4.3.0-rc.0 版本在，HTTP Client API 得到了極大的改造與提升，本文即是介紹新版本的 Angular HTTP Client 的用法。在新版本的 HTTP Client 中，其默認(rèn)假設(shè)以 JSON 格式進(jìn)行返回值解析，并且引入了靈活的 Interceptor 以動(dòng)態(tài)操作請(qǐng)求頭或者響應(yīng)體；同時(shí)新版本的 HTTP Client API 為上傳與下載這些耗時(shí)操作提供了實(shí)時(shí)進(jìn)度反饋回調(diào)，以方便開發(fā)者進(jìn)行調(diào)試或者反饋給用戶。( https://parg.co/bIV )

NgRx 的設(shè)計(jì)模式與技巧分享：狀態(tài)管理一直是構(gòu)建前端應(yīng)用過程中的難點(diǎn)之一， Angular 也為我們提供了多種不同的設(shè)計(jì)模式來進(jìn)行狀態(tài)管理；而本文即是介紹如何使用 NgRx 這個(gè)庫(kù)進(jìn)行狀態(tài)管理。NgRx 是非常簡(jiǎn)單易用，沒有太多限制條件的狀態(tài)管理庫(kù)；本文首先概述了 NgRx 的核心概念與設(shè)計(jì)原則，然后以實(shí)際的項(xiàng)目為例介紹了如何使用 NgRx 處理 Action 以及副作用。

基于 NGModules 與 Webpack 的 Angular 應(yīng)用模塊分割與懶加載：本文主要討論如何在 Angular 應(yīng)用開發(fā)中利用 Webpack 與 NGModules 實(shí)現(xiàn)對(duì)于代碼庫(kù)的模塊分割，并且利用懶加載來加載非首屏內(nèi)容，從而提升整體的應(yīng)用響應(yīng)性能。本文首先介紹了代碼分割與懶加載相關(guān)的概念知識(shí)，然后介紹了如何搭建 Webpack 基礎(chǔ)環(huán)境，然后介紹了使用 NgModules 以及性能對(duì)比；更多 Webpack 相關(guān)資料參考 https://parg.co/bVs 。

Angular 最佳實(shí)踐分享：作者在本文中分享自己在工作中總結(jié)出的 Angular 應(yīng)用實(shí)踐，本文盡可能地避免官方的 Angular 樣式指南中提及的約定，而是著眼于呈現(xiàn)個(gè)人的經(jīng)驗(yàn)總結(jié)。本文依次介紹了類型定義、組件實(shí)踐、服務(wù)定義、模板使用等方面。

Angular 中利用新的動(dòng)畫特效（v4.3+）優(yōu)化路由變換：本文著眼于介紹 Angular 應(yīng)用開發(fā)中，如何利用新的動(dòng)畫特效，來為路由切換添加動(dòng)畫效果。本文首先介紹了如何從獨(dú)立的依賴中引入動(dòng)畫模塊，與為應(yīng)用添加路由配置以及簡(jiǎn)單的路由動(dòng)畫；然后介紹了 Angular 動(dòng)畫接口，如何定義動(dòng)畫、如何添加參差效果等內(nèi)容，最后介紹了如何將這些整合為獨(dú)立的應(yīng)用。

Angular 開發(fā)者常犯的錯(cuò)誤枚舉：本文作者從自己團(tuán)隊(duì)的 Angular 開發(fā)經(jīng)驗(yàn)與 Code Review 中總結(jié)出了開發(fā)者常犯的錯(cuò)誤，并且提出了解決方案。這些錯(cuò)誤包括對(duì)于 Angular、Angular 2、Angular 4 等各個(gè)版本的誤解、ngOnChanges 與 ngDoCheck 對(duì)比、僵尸訂閱、冗余訂閱、不同模塊的 providers 誤用、直接操作 DOM 結(jié)點(diǎn)、重復(fù)聲明組件等方面。

Angular 性能優(yōu)化：本文介紹了些常見的 Angular 開發(fā)中可用的性能優(yōu)化建議，包括了利用 ChangeDetectionStrategy.OnPush 來顯式聲明組件間依賴、利用 trackBy 來追蹤唯一標(biāo)識(shí)符和避免冗余的增刪、避免模板中的計(jì)算推導(dǎo)、禁用變化監(jiān)測(cè)、使用懶加載等。

使用 Angular 組件的四個(gè)技巧：從.5 版本的 AngularJS 開始，組件就成為 Angular 的一部分，它為代碼的組織和回收提供了一種便捷的方式。Angular（Angular2 的簡(jiǎn)稱）與其說是 Angular 1.x 的升級(jí)，不如說是“續(xù)集”，它在移動(dòng)支持和其他功能的基礎(chǔ)上進(jìn)行了完全地重寫。這里，1.x 中使用的控制器完全被組件取代。無論是否曾經(jīng)使用或想繼續(xù)堅(jiān)持 1.x，無論是從零學(xué)起還是在跨越階段，為了確保代碼盡可能地優(yōu)雅且不會(huì)過時(shí)，你都需要開始使用組件。無論屬于以上哪一類，都可以在這里找到很多幫助簡(jiǎn)化流程的方法。

《hacker-news-pwas》：基于不同的前端框架實(shí)現(xiàn)的符合 PWA 應(yīng)用特性的 Hacker News APP 的合集，包括了常見的 React、Angular、Vue、Preact 等多個(gè)版本，并且均在 Lighthouse 評(píng)測(cè)中達(dá)到 90 以上的評(píng)分。( https://parg.co/biQ )

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

《generator-ngx-app》：Angular 4 商業(yè)級(jí)應(yīng)用項(xiàng)目生成器，其包括了 angular-cli 提供的現(xiàn)代工具與工作流，以及來自于社區(qū)的最佳實(shí)踐、可擴(kuò)展的基礎(chǔ)模板以及較好地學(xué)習(xí)曲線。（ https://github.com/angular-st... ）

React 學(xué)習(xí)與實(shí)踐資料索引

React 與前端工程化實(shí)踐

前端每周清單半年盤點(diǎn)之 Vue.js 篇

前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇

前端每周清單半年盤點(diǎn)之 JavaScript 篇