- 1. 前言
- 2. 创建 Angular 项目
- 3. 安装 Tailwind CSS
- 4. 配置您的 html 模板路径
- 5. 将 Tailwind 指令添加到您的 CSS 中
- 6. 构建 Angular
- 7. 开始在您的项目中使用 Tailwind
- 8. 插件和配置设置
- 9. Angular 系列文章
- 10. 参考文档
1. 前言
本文主要讲述如何在 Angular 项目中设置 Tailwind CSS。
本文主要讲述如何在 Angular 项目中设置 Tailwind CSS。
从@Angular/Flex-Layout迁移到Tailwindcss
根据flex-layout官方宣告, @angular/flex-layout当前(2023-06-25)处于deprecated状态. 替代方案为Tailwind或者Angular CDK.
具体原因参考官方的anoucement - Medium post
和github上的讨论
建议新项目使用其他css library, 旧项目考虑移植到其他css library.
以下是我从flex-layout的一些实践.
今天遇到一个特别难整的问题, 在执行npm run a_task 出错, 报错信息特别简单, 对于查找问题没有任何帮助. 尝试过几种方法来定位问题, 收效很差, 最后不得不祭出npm的大杀器npm debug来一探究竟.
使用mat-paginator在Angular mat表中进行服务器端分页
在上一篇文章中,我们学习了如何使用 Angular 添加客户端分页。mat-tablemat-paginator
在客户端分页中,我们将从服务器一次获取所有记录并使用 mat-paginator 组件应用分页。
但是,如果我们的数据量很大,即记录数量较多,那么应用客户端分页并不是一个好主意。
这可能会导致严重的性能影响。
在这种情况下,我们将在 Angular mat-table 中实现服务器端分页。
AWS的CodeWhisperer是Amazon于2021年12月推出的一款代码补全工具, 与GitHub Copilot类似。与Copilot不同的是CodeWhisperer对于个人用户免费, 也是其优势所在. CodeWhisperer是一款基于机器学习的通用代码生成器,由Amazon出品,可以给我们提供代码建议, 可以帮助程序员更快、更安全地编写代码的工具,可以在他们的开发环境中实时提供代码建议和推荐。
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 首先加载,并且可以截获每个资源请求以加载应用程序。如果服务工作进程被设计为这样做,它可以完全满足应用程序的加载,而无需网络。
即使在快速可靠的网络中,往返延迟也会在加载应用程序时引入明显的延迟。使用服务工作进程来减少对网络的依赖可以显著改善用户体验。
SSL证书(SSL Certificates)可以说是现在一个网站的标配,如果没有用SSL证书,浏览器上会显示不安全,导致一部分用户以为网站有问题。另外在微信小程序和iOS APP上,提供的API必须要用HTTS协议,否则不允许上架,所以掌握好SSL证书的配置是一个后端开发必备的技能。
在阿里云上,提供了每年可以申请一次的免费SSL证书,对于一些个人站点或者小公司的网站来说,确实是一个不错的选择。
HTTPS 协议(HyperText Transfer Protocol over Secure Socket Layer):可以理解为HTTP+SSL/TLS, 即 HTTP 下加入 SSL 层,HTTPS 的安全基础是 SSL,因此加密的详细内容就需要 SSL,用于安全的 HTTP 数据传输。HTTPS 相比 HTTP 多了一层 SSL/TLS.
SSL(Secure Socket Layer,安全套接字层):1994年为 Netscape 所研发,SSL 协议位于 TCP/IP 协议与各种应用层协议之间,为数据通讯提供安全支持。
TLS(Transport Layer Security,传输层安全):其前身是 SSL,它最初的几个版本(SSL 1.0、SSL 2.0、SSL 3.0)由网景公司开发,1999年从 3.1 开始被 IETF 标准化并改名,发展至今已经有 TLS 1.0、TLS 1.1、TLS 1.2 三个版本。SSL3.0和TLS1.0由于存在安全漏洞,已经很少被使用到。TLS 1.3 改动会比较大,目前还在草案阶段,目前使用最广泛的是TLS 1.1、TLS 1.2。
ESXi 是一种用于创建和管理虚拟机(VM)的系统管理程序。然而,手动创建和管理多个虚拟机可能非常耗时且容易出错。Terraform 是一个开源 IaC 工具,可以在 ESXi 中自动创建和管理虚拟机。在本教程中,我们将学习如何使用 Terraform 在 ESXi 中创建多个虚拟机。
最近在阿里云上创建云主机, 主要是需要使用浏览某些网站, 说实在的我只需要浏览器就够用了, 但是无奈阿里云提供了桌面的镜像只有 Windows 的几个版本.
而使用 windows 得镜像要比 Linux 得镜像贵好几倍, 一来是服务器硬件资源要求较 Linux 高, 而来 Windows 镜像都是需要 License 费用或者额外购买 License 的.
于是考虑在创建 Linux 云主机后, 安装一个 Linux 桌面系统, 果然让我实验成功了, 特写此文, 以防遗忘, 另外给后来人以方便.
尽管 Angular Universal 项目的目标是能够在服务器上无缝渲染 Angular 应用程序,但您应该考虑一些不一致之处。首先,服务器和浏览器环境之间存在明显的差异。在服务器上渲染时,应用程序处于短暂或“快照”状态。应用程序被完全渲染一次,返回完整的 HTML,而整个过程中的产生的状态被销毁,直到下一次渲染开始, 再重新计算这些状态。接下来,服务器环境本质上不具有与浏览器相同的功能(也有可能服务器拥有而浏览器没有的功能)。例如,服务器没有任何 cookie 的概念。您可以将此功能和其他功能 polyfill,但没有完美的解决方案来弥合这种差异。在后面的部分中,我们将介绍潜在的缓解措施,以减少在服务器上渲染时的错误机会。
还请注意 SSR 的目标:提高应用程序的初始渲染时间。这意味着,应该避免或充分防范任何可能在初始渲染中降低应用程序速度的情况。同样,我们将在后面的部分中回顾如何实现这一点。