前端每周清单半年盘点之 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/23/modern-frontend/ )

• 《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-starter-kit/generator-ngx-app )