随笔分类 - (新) Angular 18+ 高级教程
摘要:前言 Angular 19 预计会在 11 月中旬发布,目前 (2024-10-27) 最新版本是 v19.0.0-next.11 已经发布了。 这次 v19 的改动可不小哦,新增了很多功能,甚至连 effect 都 breaking changes 了呢🙄 估计这回 Angular 团队又会一如
阅读全文
摘要:介绍 先讲讲名词。 Internationalization 的缩写是 i18n,中文叫国际化。 Globalization 是 Internationalization 的同义词,都是指国际化。 Localization 的缩写是 l10n,中文叫本地化。 i18n vs l10n 一个国际化,一
阅读全文
摘要:前言 本篇只会教 Angular Material Datepicker 里最关键的组件 -- Calendar 组件。 还有如何自定义 DateAdapter,让 Calendar 支持 TC39 Temporal。 有兴趣想学完整 Datepicker 的朋友们,请移步官网。 只对 Calend
阅读全文
摘要:前言 Angular 在 v18.1 推出了 Template 新语法 @let。 这个 @let 和上一篇教的 Control Flow @if, @for, @swtich, @defer 语法上类似,但是用途却差很多。 如果要给它们分类的话,@if @for @switch 可以算一类,@de
阅读全文
摘要:何谓 Memory Leak? Angular 是 SPA (Single-page application) 框架,用来开发 SPA。 SPA 最大的特点就是它不刷新页面,不刷新就容易造成 memory leak。 举个例子: 有一个页面 A,我们写了一个 setInterval 执行一些代码 (
阅读全文
摘要:介绍 Form Field 或 Text Field 是 Material Design 独有的设计风格 。它长这样 注:Material Design 管它叫 Text Field,Angular Material 管它叫 Form Field。我们不要乱,本篇统一叫 Form Field 就好。
阅读全文
摘要:前言 CDK Drag and Drop 和 CDK Scrolling 都是在 Angular Material v7 中推出的。 它们有一个巧妙的共同点,那就是与 Material Design 没有什么关联。 这也导致了它和 CDK Scrolling 一样,功能不完善,只能满足非常简单的开发
阅读全文
摘要:前言 本篇记入一些 Angular Material 的小东西。 Override Material Icon Button Size 参考:Stack Overflow – Change size of mat-icon-button 通常当我们想修改 size 的时候,第一个想法是改它的 den
阅读全文
摘要:前言 Angular 从 v14 开始大改特改,改最多的就是编码风格。 以前是 class first,Decorator first,mutable first。 现在变成了 function first,immutable first。 本篇主要是探讨 v14 后,尤其是 Signal-base
阅读全文
摘要:前言 CDK Table 是 Angular Material 对 <table> 的抽象 (无 styles) 封装。 无 styles 的 table 有什么好封装的呢? CDK Table 最重要的 3 个功能: 以 column 概念来做管理 动态选择性输出 column sticky co
阅读全文
摘要:前言 一个常见的 Tooltip 使用场景是 当有 ellipsis 时,hover 显示全文。 Tooltip 算是一种 Popover,我们之前有讲过,要搞 Popover 可以使用底层的 CDK Overlay 来实现。 而 Angular Material Tooltip 便是基于 CDK
阅读全文
摘要:前言 Observers 是 Angular Material 对游览器原生 MutationObserver 的上层封装。主要用于监听 add/remove Node。 不熟悉的朋友可以先看这篇 DOM – MutationObserver。 ContentObserver ContentObse
阅读全文
摘要:前言 熟悉 Angular 的朋友都知道,Angular 有非常多的局限,许多事情它都做不好,打开 Github 一堆 2016 - 2017 的 Issues,时至今日都没有解决。 原因也很简单 -- Angular 团队的不作为😔。 通常我会把常见的 Angular 的局限记入在这篇 <<An
阅读全文
摘要:前言 我在 <初识 Angular> 文章里有提到 Angular 目前的断层问题。 大部分的 Angular 用户都停留在 v9.0 版本。 Why everyone stay v9.0? v9.0 是一个里程碑版本,Angular 从 v4.0 稳定版推出后,好几年都没有什么动静,直到 v9.0
阅读全文
摘要:前言 读这么多原理,到底为了什么?真实项目中真的会用得到吗? 你正在疑惑 "知识的力量" 吗? 本篇会给一个非常非常好的案例,让你感悟 -- 知识如何用于实战。 记住,我的目的是让你感悟,而不是要你盲目相信知识。 很久很久以前的问题 (疑难杂症) 下面是我在 2020-11-06 记入的一个问题。
阅读全文
摘要:前言 当你需要管理超过一个项目时,你就需要知道怎么使用 Angular Library。 你可以把多个项目共享的组件放到这个 Library 了,就像 Angular Material 那样。 参考 Sandro Roth – Building an Angular Library with mul
阅读全文
摘要:前言 今天来揭秘一下 Angular 的 Event Listening,看看它底层有什么好玩的地方🤪。 (keydown.enter) 语法 在 Component 组件 の Template Binding Syntax 文章中我们就学过了最基本的 Event Listening。 <butt
阅读全文
摘要:前言 Angular 有一套 built-in 的 Animation 方案。这套方案的底层实现是基于游览器原生的 Web Animation API。 CSS Transition -> CSS Animation -> Web Animation API -> Angular Animation
阅读全文
摘要:Overlay, Dialog, Modal, Popover 傻傻分不清楚 参考: Medium – Modal?Dialog?你真的知道他們是什麼嗎? Popups, dialogs, tooltips, and popovers— UX Patterns #2 掘金 – 对话框、模态框和弹出框
阅读全文
摘要:介绍 ListKeyManager 的作用是让我们通过 keyboard 去操作 List Items。 一个典型的例子:Menu 有 4 个步骤: tab to menu enter 打开 menu list 按上下键选择 item enter 选中 item ListKeyManager 主要是
阅读全文