Angular 指令快速入门

Photo by Daniel Radford on Unsplash

声明

本文重点不再讨论 Angular 中内置指令以及如何自定义指令。而是想让读者知道 Angular 中指令的作用,它解决了什么问题,以及指令与组件的区别。

何为指令

Angular 中指令是一个非常特殊的存在,从使用方法来看,指令类似元素的一个自定义属性,为元素或者组件提供特定的功能。在大多数场景下,指令不对作用的宿主元素本身的类型做任何假设,它无需知道宿主元素中包含了那些内容,宿主元素上有哪些属性,也不依赖宿主上的其他功能。换句话说,若我们想给 HTML 元素或者组件拓展某项功能,且这项功能相对独立,就可以采用指令来实现。

继续阅读Angular 指令快速入门

Angular 动态创建嵌入式视图

Photo by James Coleman on Unsplash

声明

本篇为 Angular 中相对高级的教程,涉及到了结构性指令、生命周期重要概念。建议这块不熟悉的读者可以看看 Angular 结构型指令 NgIf 原理 ,这篇文章中我结合源码对 Angular 指令中的黑魔法做了解析。

视图

Angular 中视图是一个重要的概念。从源码角度来看,Angular 中的视图是包含页面结点(DOM)与在此之上的绑定(数据)的结构体,通过视图 Angular 将变量与页面结点进行关联,从而可以在执行变更检测等操作时实现控制层数据与页面结点的联动,这也也是绑定 (binding)这一术语的由来。

继续阅读Angular 动态创建嵌入式视图

Angular 指令之 NgFor 教程

声明

NgFor 内建指令可以帮助开发者快速迭代某个数组来创建多个 DOM 元素。在实际开发中,我发现全面掌握 NgFor 的用法可以很好地帮助我们应对更加复杂的场景,甚至能实现性能的提升。此教程中涉及到了 Angular 变化检测机制的内容,对于这一部分感兴趣的朋友可以参看我其他的博文

继续阅读Angular 指令之 NgFor 教程

理解 CSS 中 height 与 width

Photo by Peter Thomas on Unsplash

CSS 中 height 与 width 是初学者比较容易误用的属性。在实际使用这过程中,我发现其实它们的用法涉及到了两个基本的概念:盒子模型与元素类型。对于开发者来说,只有明确了这两个概念的定义,才能掌握 height 与 width 的用法。

继续阅读理解 CSS 中 height 与 width

搭建最简单的 HTTP 代理服务器

Photo by Wengang Zhai on Unsplash

HTTP/HTTPS 代理本质上是正向代理的一种。和反向代理最大的不同之处在

于,正向代理必须在客户端进行设置,客户是有感知的,比如客户在客户端安

装 VPN 软件接入内网就是正向代理的一种。而反向代理在服务器端配置,客户

是没有感知。常用于后端应用的配置中。

在本文中,我尝试了在 Windows 环境下搭建 HTTP 代理服务器的两种方法:

Nginx 和 GoProxy,希望能给你一点启发。

继续阅读搭建最简单的 HTTP 代理服务器

浅谈 Angular 变化检测机制

Photo by Roman Kraft on Unsplash

声明

变化检测(Change Detection)也叫脏值检测(Dirty Detection),都是指

Angular 中检测组件中数据变化的机制。由于变化检测与 Angular 若干生命周

期有很强的关联,本文会结合两者做出说明。

继续阅读浅谈 Angular 变化检测机制