Async Pipe可以对 Angular 应用程序的更改检测策略产生巨大影响。如果到目前为止您还感到困惑，请详解读完全文。我们一起来了解一下吧！

在 Angular 中，Async Pipe本质上是执行以下三个任务的管道:

• 它订阅一个observable或一个Promise并返回最后发出的值。
• 每当发出新值时，它都会标记组件为需要要检查的。这意味着Angular将在下一个周期中为该组件运行Change Detector。
• 当组件被销毁时，它会取消订阅可观察的内容。

此外，作为最佳实践，建议尝试使用 onPush 更改检测策略上的组件和异步管道来订阅可观察对象。

如果您是Angular的初学者，也许上面对异步管道的解释让人不知所措。因此，在本文中，我们将尝试使用代码示例逐步理解异步管道。只需创建一个新的Angular 项目并继续操作即可；在文章的最后，您应该对异步管道有一些深刻的了解。

1. 前言

图表帮助我们以易于理解和交互的方式可视化大量数据。

在 Angular 中，我们有各种图表库来创建图表。

在本文中，我们将使用 Ng2-Charts 在 Angular 中开发出色的图表。

在本文中我们将会讲述

• ng2-charts 介绍
• 在 Angular 中安装 ng2-charts 的两种不同方法。
• 创建条形图
• 创建折线图

1. 前言

图表帮助我们以易于理解和交互的方式可视化大量数据。在 Angular 中，我们有各种图表库来创建图表。NGX-charts 就是其中之一。

ngx-charts 是 Angular2+ 的开源声明式图表框架。它由Swimlane维护 。

1. 前言

如今，数据分析是任何业务应用程序的重要组成部分。这有助于企业做出重要决策。以易于理解和交互的方式表示大量数据非常重要。
图表对于美观、易于理解和交互式的数据可视化非常有用。

JavaScript 中有不同的开源和付费图表库，可以实现漂亮的数据表示。

在本文中，我们将研究几款美观的, 易于交互的 Angular 图表库。

首先，我们将看到开源 Angular 图表库，稍后我们将研究其他付费 Angular 图表库.

1. 前言

从 Angular 1.x 到 Angular 13 一直是用的 angular-data-table(for angularjs 1.x)和它的姊妹项目 ngx-datatable(for angular 2+), 但是最近需要将 Angular 项目从 Angular 14 升级到 Angular 16 的过程中发现了一些兼容性问题, 另外 ngx-datatable 也不支持 dark mode. 再次关注 ngx-datatable 以及网上的评论都有同感, ngx-datatable 的更新速度严重放缓了, 有些跟不上 Angular 更新的节奏了. 参考 reddit 上的一篇帖子Any better alternatives to ngx-datatable?, 也谈到了 ngx-datatable 更新放缓.

于是考虑将 ngx-datatable 组件替换掉, 这里有一些付费的项目, 在功能上可以完全替换, 比如ag-grid, Ignite UI for Angular Data Grid, Syncfusion Angular UI Components - Data Grid等等.

最后考察了 angular material table 在功能上完全服务我们的要求, sorting, pagination, server side pagination 之类的功能都有. 另外项目刚好使用的是 Material Design 设计风格, 那些付费方案的高级功能也用不上, 还要花时间学习, 另外考虑到 bundle 文件的大小, 最后坚定的选择了 Angular material table. 于是才有了这篇文章

1. 前言

升级应用程序或者框架是软件生命周期中非常重要的一项活动. 因为其有风险性, 很多人不愿意去做, 久而久之随着技术债务的积累变成了一件不能去做的事情.

在我的职业生涯中见到过很大这样逐渐失去生命活力的系统, 这里就不具体举例了, 以免引起不必要的争论, 明白的人自然明白.

1. 前言

在 Angular Material v15 中，许多组件已基于官方的 Web Material Design Components (MDC) 进行了重构。 以下导入的组件已被重构：

• 1. 前言
• 2. 创建 Angular 项目
• 3. 安装 Tailwind CSS
• 4. 配置您的 html 模板路径
• 5. 将 Tailwind 指令添加到您的 CSS 中
• 6. 构建 Angular
• 7. 开始在您的项目中使用 Tailwind
• 8. 插件和配置设置
  • 8.1. 语法支持
  • 8.2. IntelliSense for VS Code
  • 8.3. 自动 class 排序
    • 8.3.1. 安装 prettier-plugin-tailwindcss
• 9. Angular 系列文章
• 10. 参考文档

1. 前言

本文主要讲述如何在 Angular 项目中设置 Tailwind CSS。

1. 前言

在上一篇文章中，我们学习了如何使用 Angular 添加客户端分页。mat-tablemat-paginator

在客户端分页中，我们将从服务器一次获取所有记录并使用 mat-paginator 组件应用分页。

但是，如果我们的数据量很大，即记录数量较多，那么应用客户端分页并不是一个好主意。

这可能会导致严重的性能影响。

在这种情况下，我们将在 Angular mat-table 中实现服务器端分页。

1. 前言

Service Worker 增强了传统的 Web 部署模型，并使应用程序能够提供与 Native application 相当的可靠性,性能和用户体验。将服务工作进程添加到 Angular 应用程序是将应用程序转换为渐进式 Web 应用程序（也称为 PWA）的步骤之一。

简单来说，Service worker 是在 Web 浏览器中运行并管理应用程序缓存的脚本。

Service worker 充当网络代理。它们拦截应用程序发出的所有 HTTP 请求，并可以选择如何响应这些请求。例如，他们可以查询本地缓存并提供缓存的响应（如果有）。代理不仅限于通过编程 API 发出的请求，例如 fetch;它还包括 HTML 中引用的资源，甚至是对 index.html 的初始请求。因此，基于 Service worker 的缓存是完全可编程的，不依赖于服务器指定的缓存标头。

与组成应用程序的其他脚本（如 Angular application bundle）不同，服务工作进程在用户关闭选项卡后仍然保留。下次浏览器加载应用程序时，Service worker 首先加载，并且可以截获每个资源请求以加载应用程序。如果服务工作进程被设计为这样做，它可以完全满足应用程序的加载，而无需网络。

即使在快速可靠的网络中，往返延迟也会在加载应用程序时引入明显的延迟。使用服务工作进程来减少对网络的依赖可以显著改善用户体验。

1. 前言

本文向你介绍什么是 PWA, 以及如何在 Angular 项目中启用 PWA。然后使用一个示例向您展示一个正在运行的 service worker，演示如何加载和如何在客户端缓存数据。

1. 介绍

尽管 Angular Universal 项目的目标是能够在服务器上无缝渲染 Angular 应用程序，但您应该考虑一些不一致之处。首先，服务器和浏览器环境之间存在明显的差异。在服务器上渲染时，应用程序处于短暂或“快照”状态。应用程序被完全渲染一次，返回完整的 HTML，而整个过程中的产生的状态被销毁，直到下一次渲染开始, 再重新计算这些状态。接下来，服务器环境本质上不具有与浏览器相同的功能（也有可能服务器拥有而浏览器没有的功能）。例如，服务器没有任何 cookie 的概念。您可以将此功能和其他功能 polyfill，但没有完美的解决方案来弥合这种差异。在后面的部分中，我们将介绍潜在的缓解措施，以减少在服务器上渲染时的错误机会。
还请注意 SSR 的目标：提高应用程序的初始渲染时间。这意味着，应该避免或充分防范任何可能在初始渲染中降低应用程序速度的情况。同样，我们将在后面的部分中回顾如何实现这一点。

• 1. 前言
• 2. 什么是 Angular universal
• 3. 为什么需要 SSR(服务器端渲染)
• 4. Angular Universal 如何解决 FCP 和 SEO 问题
• 5. 开启 SSR
• 6. 开启客户端水合(Client Hydration)
• 7. 使用 Universal 构建和运行
• 8. Prerender 预渲染静态 HTML
  • 8.1. 预渲染路径配置
• 9. SEO 优化
  • 9.1. 关键词与描述的优化
  • 9.2. 内部跳转优化
  • 9.3. 样式文件打包
  • 9.4. 添加 robots.txt
  • 9.5. 自动生成 sitemap
• 10. 使用 Nginx 部署
  • 10.1. 安装 Nginx
  • 10.2. 安装 Node
  • 10.3. 安装 PM2
  • 10.4. 配置并启动 pm2
  • 10.5. 配置 Nginx 反向代理
• 11. troubleshooting
  • 11.1. 问题 1: Configuration ‘development’ is not set in the workspace
  • 11.2. 问题 2: ReferenceError: window is not defined
  • 11.3. 问题 3: Flex Layout loaded on the server without FlexLayoutServerModule
  • 11.4. 问题 4: XMLHttpRequest is not defined
  • 11.5. 问题 5： \dist\demo-web\browser...ReferenceError: Image is not defined
• 12. 相关阅读
• 13. 参考文档

1. 前言

当初选择将应用做成 SPA(单页应用)的时候主要是觉得用户体验非常丝滑, 当时也知道 SPA 很难做 SEO, 还是毅然决然的选择做成 SPA 应用. 当时还是 Angularjs 1.X 的时候, 就觉得 Angular 的理念跟自己对前端的看法特别契合, 后来将框架升级到 Angular 11 继而 13, 虽然费了很多时间和精力, 但是收获非常多, 由于本文的重点是 SSR 与 prerendering,所以这里不赘述原因了. 之前也了解到 Angular Universal 是做服务器端渲染的套件(SSR), 乘最近有空刚好将其引入到项目. 实现地过程中虽然遇到问题, 但是还是有些小兴奋的感觉, 一来解决了首次访问应用时白屏的问题, 二来将当初打算舍弃的 SEO 能力也找了回来, 而且整个对引入 SSR 实现 SEO 的过程还是相当轻松的, 特写此文, 以防遗忘, 也希望给后来者有所帮助.

1. 前言

由于需要一个富文本编辑器来编辑一些网页内容, 手动编辑后存储到数据库比较麻烦, 所以着手实现一个自己的富文本编辑器, 来编辑和存储一些 html 文件.
这里使用 Angular 框架, 加 Quill 库实现.

ngx-quill: https://github.com/KillerCodeMonkey/ngx-quill
quill 官网: https://quilljs.com/

1. 前言

本文将使用@Injectable 装饰器创建 Angular 服务。Angular 服务是可注入的，注入器可以将其注入到我们 Angular 应用程序中的任何组件或服务中。@Injectable 装饰器在类级别的服务中使用。@Injectable 装饰器帮助注入器考虑可注入的服务。在应用程序模块中的@NgModule 装饰器的提供者元数据中配置我们的服务后，该服务将在整个应用范围内可用。

要在组件中获取服务实例，我们需要为服务构造一个带参数的构造器, 并构造包含一系列可供组件或其他服务调用的方法。

假设我们想要创建一个购物车应用程序。在这种情况下，服务可以包含管理商店的方法、将商品添加到购物车的方法、从购物车中删除商品的方法以及查询商品的方法等。