Angular

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

下一页