前言 熟悉Angular的朋友都知道，Angular有非常多的局限，许多事情它都做不好，打开Github一堆20162017的Issues，时至今日都没有解决。 原因也很简单-Angular团队的不作为😔。 通常我会把常见的Angular的局限记入在这篇<<Angular的局限和GithubIssues>>，但由于本篇要讲的问题篇幅比较大，所以特别把它分一篇出来。 本篇要讲的是AngularQueryElement的局限。虽然我们已经在<<Component组件のQueryElements>> 文章中，深入理解了Angular的Que...

前言 读这么多原理，到底为了什么？真实项目中真的会用得到吗？ 你正在疑惑"知识的力量"吗？ 本篇会给一个非常非常好的案例，让你感悟-知识如何用于实战。 记住，我的目的是让你感悟，而不是要你盲目相信知识。   很久很久以前的问题(疑难杂症) 下面是我在2020-11-06记入的一个问题。 一模一样的问题也有人在Github提问 GithubIssue– QueryListnotsortedaccordingtotheactualstate (提问于：2021-06-08) 这个Issue很特别，它没有被关闭，也没有任何的回复，提问者也没有继续追问。 ...

前言 我在<初识Angular>文章里有提到Angular目前的断层问题。 大部分的Angular用户都停留在v9.0版本。 Whyeveryonestayv9.0?  v9.0是一个里程碑版本，Angular从v4.0稳定版推出后，好几年都没有什么动静，直到v9.0推出了Ivyrenderingengine。 本以为v9.0以后Angular会大爆发，结果迎来的是Angular团队搞内讧，又...好几年没有动静。直到v14.0Angular突然就...变了🤔。 Angular团队大换血之后，有了新方向，原本那批人的特色“不爱创新，爱follow标准，爱小题大"现在已...

前言 当你需要管理超过一个项目时，你就需要知道怎么使用AngularLibrary。 你可以把多个项目共享的组件放到这个Library了，就像AngularMaterial那样。   参考 SandroRoth– BuildinganAngularLibrarywithmultipleentrypoints(主要参考) Docs– Creatinglibraries Docs– Copyassets Docs– EmbedassetsinCSS StackOverflow– Includeassetswhenbuildingangul...

前言 HttpClient是Angular对 XMLHttpRequest和 Fetch的封装。 HttpClient的DX(DeveloperExperience)比 XMLHttpRequest和 Fetch都好，只是学习成本比较高，因为它融入了RxJS概念。 要深入理解HttpClient最好先掌握3个基础技能： XMLHttpRequest-看这篇 Fetch-看这篇 RxJS-看这系列 (如果只是为了HttpClient不需要看完，不过RxJS其实挺好用的，所以我推荐大家把它学起来)   ProvideHttpClien...

前言 NgModule在Angularv14以前是一门必修课。然而，自Angularv14推出StandaloneComponent以后，它的地位变得越来越边缘化了。 本教程从开篇到本篇，所有例子使用的都是 StandaloneComponent，一点NgModule的影子也没有😔。 但是！NgModule还是有价值的，而且在越复杂的项目中你越可以感受到它的价值。 本篇，就让我们一起学习这个被遗忘了但其实很强大的NgModule吧🚀。   NgModule有啥用？ NgModule主要是用于(组件/指令/Pipe)的管理。 是的，你没听错-管理。 一个项目即使完全不使用...

  前言 ControlFlow是Angularv17版本后推出的新模板语法，用来取代NgIf、NgForOf、NgSwitch这3个StructureDirective。 StructureDirective的好处是比较灵活，原理简单，但是即便用了微语法，它看上去还是相当繁琐，而且不够优雅。 ConrolFlow的好处是它的语法够美，缺点是不必StructureDirective灵活，开发者无法做任何customize，只能看Angular给什么用什么。   参考 Docs–Built-incontrolflow Docs– DeferrableViews &n...

前言 在 AttributeDirectives属性型指令文章中，我们学习过了指令。指令是没有HTML和CSS的组件，它单纯用于封装JS的部分。 这一篇我们将继续学习另一种指令-- StructuralDirective结构型指令。 就代码而言，StructuralDirective和 AttributeDirectives是完全一样的，只是用途不同，因此进行了区分。 AttributeDirectives通常用于监听事件，修改class，styles等等。 而StructuralDirective则主要用于修改DOM结构。 在 DynamicCompo...

前言 上一篇 DynamicComponent 我们有提到，作为MVVM框架的Angular需要有方法替代掉2个DOMManipulation： document.createElement  template.content.clone DynamicComponent便是替代document.createElement的方案。 而这篇我们要讲的ng-template则是template.content.clone的替代方案。   ng-templateの简单使用 我们从浅入深，一个一个特性介绍，最后才逛源码，看看原理机制。 提醒：为了更容易体会到...

前言 Angular是MVVM框架。 MVVM的宗旨是"不要直接操作DOM"。 在 Component组件のTemplateBindingSyntax文章中，我们列举了一些常见的DOMManipulation。 constelement=document.querySelector<HTMLElement>('.selector')!;//queryelement element.textContent='value';//updatetext element.title='title';//updateproperty element.setAttribute('da...

前言 在上一篇 ChangeDetection 中,我们有提到MVVM监听ViewModel变化的难题. 当年AngularJS和 Knockout.js(下面简称KO)各自选了不同的道路. 但如今,事过境迁,Angular最终也走向了KO的道路.这就是这篇的主角Signal。   把variables变成function  在JavaScript,值类型variable无法被监听,Signal的做法是把它们都变成函数。 看看KO的代码 constcount=ko.observable('defaultvalue');//通过observab...

前言 虽然Angular正在把大部分ChangeDetection概念换成Signal，但是最快也要1年后，所以还是有必要认真学习一下的。   MVVM的难题 什么是MVVM MVVM框架的开发方式是这样的： 写HTML 写ViewModel 在HTML里加入 bindingsyntax。 在HTML里加入listeningsyntax，在事件发生时修改ViewModel。 MVVM的宗旨是"不要直接操作DOM"。所以上面我们完全没有任何DOM manipulation。 框架会替我们做2件是： 第一是创建DOM HTML+bindingsyntax+ViewMo...