前端每周清单半年盘点之 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 篇