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. 介绍

尽管 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 装饰器的提供者元数据中配置我们的服务后，该服务将在整个应用范围内可用。

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

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

• 1. 前言
• 2. 前置条件
• 3. 创建后端项目
• 4. 创建前端项目
• 5. 使用 gradle 将前后端整合
  • 5.1. 配置 angular 项目
  • 5.2. 配置 spring boot 项目
  • 5.3. 自动化工程
• 6. Angular 系列文章
• 7. 总结
• 8. 参考文档

1. 前言

本文讲述如何使用 Gradle 搭建一个以 springboot 技术栈作为后端, 使用 Angular 作为前端技术栈, 同过 gradle 将其整合成一个项目的实践经验.

这里只是作为一种实践, 并不建议在生产环境中将前后端耦合在一起. 本文的目的是拓展 Spring 在(SPA)Single page Application 一种能力, 即将实现项目依赖关系, 测试,打包等等自动化.

实现思路就是通过 Gradle task 触发 npm build, 将编译后的静态资源文件, 部署到 springboot 的静态资源文件目录, 然后沿用后端打包过程, 将前后端应用程序整合在一起.

1. 前言

在本教程中，我们将学习如何在 angular 14 应用程序中使用 sweetalert2 来显示 sweetalert 弹出消息。

1. 前言

项目中需要一个输入提示框, 之前是使用ng-bootstrap实现的. 但是由于系统框架完全迁移到了material design. 所以所有bootstrap的依赖项都要迁移到angular material design.

如果您的web表单有一个包含许多选项的下拉列表，那么您可能希望通过提前键入来简化用户的生活。幸运的是，Angular Material组件可以让你很容易地做到这一点。在本指南中，我将向您展示如何实现这一点。

顺便说一句：如果你不熟悉typeahead(提前输入)，这是一种在下拉列表中过滤结果的方法。用户刚开始在字段中键入字符，列表将缩小为仅以用户键入的字符开头的选项。
typeahead是一种用户友好的输入方式，因为用户不必在看似无穷无尽的列表中滚动才能找到他们想要的内容。

1. 前言

1.1. update on 5th/Apr/2023

根据 flex-layout 官方宣告, @angular/flex-layout 当前处于 deprecated 状态. 替代方案为 Tailwindcss 或者 Angular CDK.

具体原因参考官方的 anoucement - Medium post
和 github 上的讨论

建议新项目使用其他 css library, 旧项目考虑移植到其他 css library.

迁移工具:

migrate-angular-flex-to-tailwind

[flex-layout-migrator](https ://github.com/NIPE-Solutions/flex-layout-migrator)

1.2. update on 25th/June/2023

目前 DuncanFaulkner 克隆了@angular/flex-layout 并提供社区支持, 目前以及能支持 Angular 16 了.

所以使用社区版本的 flex-layout 也是一直选择, 如果重度依赖 flex-layout

新家现在位于

@ngbracket/ngx-layout。

2. 安装

要在 Angular CLI 项目中使用@angular/flex-layout 相当简单，只需要两个步骤：

1. 安装组件指令

   1	npm install @angular/flex-layout --save

2. 将 Angular Flex Layout 导入到 app.module 中

   1 2 3 4 5 6 7 8 9

   // src/app/app.module.ts import {NgModule} from '@angular/core'; import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ imports: [FlexLayoutModule], ... }) export class AppModule {}

1. 前言

• 为什么选择 angular material design?

实际上如果想在自己的 web 项目中使用 material design 这套设计理念, 有多种选择, 一个是使用 bootstrap + mdbootstrap 这套架构和组件, 或者使用 bootstrap+materialize-css 这套解决方案. 其核心思想就是使用 bootstrap 去处理响应式 web ux 的问题以及跨浏览器, 跨各种大小屏幕兼容性问题, 而使用 mdbootstrap 或 materialize 去实现一套 material design 风格的组件库. 实际上这是一套很好的思路, 各方案专注自己的擅长的领域, 保持小而美的设计. 但是现实问题是 mdbootstrap 并不是免费的, 其 prime 版本是收费的, 而且对初创公司来说其收费还不便宜. materialize-css 是开源免费的, 但是截至 2022-05-29, 该项目已经 6 年没有更新了, 最近的一个版本是 6 年前发布的一个 1.0.0 版本.

1. 前言

一个网站，通常都会包含公开页面和受保护页面两种，如果是 OA 或者企业应用网站，甚至可能全部都是保护页面，访问者需要在进行身份认证后，才能正常的浏览相关页面。

在本实验中, 我们会创建一个登录页面, 一个受保护的页面, 和一个面向公众公开的信息页面. 当用户访问受保护页面时, 需要先登录再访问, 而公众公开页面不需要登录即可访问.

1. 前言

我们在开发 web 应用时，在服务器端都会控制某种或某个用户是否有权限调用某个接口。在前端，我们除了根据用户的角色或其他特性来控制一些页面元素是否显示以外，也需要控制用户是否能够进入某些页面（例如通过直接输入 URL 的方式直接进入）。要控制是否显示，我们可以使用 *ngIf 、 [hidden] 等方式。而对于控制用户能否进入某个页面，Angular2 的路由框架也提供了非常方便的方式来实现这个功能。

Angular2 提供了 2 种组件， Guard 和 Resolve 。 Guard 顾名思义就是用来保护一个路径。可以用来判断用户只有在满足一定的条件的情况下才能打开这个路径对应的页面。 Resolve 用来在进入某个路径之前先获取数据。

1. 前言

我们今天要学习的是 Angular2 的模块系统,一般情况下我们使用一个根模块去启动我们的应用,然后使用许多的功能模块去丰富我们的应用,扩展我们应用的功能.这些全部依靠我们的 NgModule 装饰器,接下来我们就来好好学习一下这个装饰器. 当然在这个过程中你会遇到一些新的指令,概念等等;但是别慌,我们会在以后的文章中一个一个的详细讲解呢.

1. 前言

本文会聊聊 JIT 与 AOT 之间的区别，及前端框架中 AOT 的应用。Angular 同时提供这两种编译方案，下面我们用 Angular 举例说明两者的区别。