如果你之前没有深入了解 Angular 依赖注入系统，那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商，每一个组件都有它自己的注入器，延迟加载模块有它自己的注入器。

我们知道，Angular 依赖注入机制包含 @Optional 和 @Self 等影响依赖解析过程的装饰器，尽管它们字面意思就直接解释了其作用，但是 @Host 却困扰了我好久。我在其源码注释中看到该装饰器的 描述：

我们知道，@angular/forms 包主要用来解决表单问题的，而表单问题非常重要的一个功能就是表单校验功能。数据校验非常重要，不仅仅前端在发请求给后端前需要校验数据，后端对前端发来的数据也需要校验其有效性和逻辑性，尤其在存入数据库前还得校验数据的有效性。 @angular/forms 定义了一个 Validator 接口，并内置了 Re...

我们知道，Angular 的 @angular/forms 包提供了 NgModel 指令，来实现双向绑定，即把一个 JS 变量（假设为 name）与一个 DOM 元素（假设为 input 元素）进行绑定，这样 name 的值发生变化，input 元素 的 value 也会自动变化；input 元素的 value 发生变化，name 的值也会自动变化。如下代码，展示一个最简单的双向绑定...

比如，程序从路由状态 state1: /advisors/1/households/1 转变为路由状态 state2: /advisors/1/accounts/2，需要实例化的组件集合也从 components1: Advisor+Household 转变为 components2: Advisor+Account（准确的说应该是先是 Module 的实例化，然后才是组件的实例化），这个过程是如何实现的？

Angular Modules 是个相当复杂的话题，甚至 Angular 开发团队在官网上写了好几篇有关 NgModule 的文章教程。这些教程清晰的阐述了 Modules 的大部分内容，但是仍欠缺一些内容，导致很多开发者被误导。我看到很多开发者由于不知道 Modules 内部是如何工作的，所以经常理解错相关概念，使用 Modules API 的姿势也不正确。

@angular/material 是 Angular 官方根据 Material Design 设计语言提供的 UI 库，开发人员在开发 UI 库时发现很多 UI 组件有着共同的逻辑，所以他们把这些共同逻辑抽出来单独做一个包 @angular/cdk，这个包与 Material Design 设计语言无关，可以被任何人按照其他设计语言构建其他风格的 UI 库。学习 @angular/material ...

如果你之前使用 AngularJS（第一代 Angular 框架）来编程，可能会使用 $compile 服务生成 HTML，并连接到数据模型从而获得双向绑定功能：

所有现代前端框架都是用组件来合成 UI，这样很自然就会产生父子组件层级，这就需要框架提供父子组件通信的机制。同样，Angular 也提供了两种方式来实现父子组件通信：输入输出绑定和共享服务。对于 stateless presentational components 我更喜欢输入输出绑定方式，然而对于 stateful container components 我使用共享服...

从我开始使用 Angular 开始，就被组件和指令间区别的问题所困惑，尤其对那些从 Angular.js 世界来的人，因为 Angular.js 里只有指令，尽管我们也经常把它当做组件来使用。如果你在网上搜这个问题解释，很多都会这么解释（注：为清晰理解，不翻译）：

由模型变化触发的 DOM 更新是所有前端框架的重要功能（注：即保持 model 和 view 的同步），当然 Angular 也不例外。定义一个如下模板表达式：

我使用 Angular.js 框架好些年了，尽管它饱受批评，但我依然觉得它是个不可思议的框架。我是从这本书 Building your own Angular.js 开始学习的，并且读了框架的大量源码，所以我觉得自己对 Angular.js 内部机制比较了解，并且对创建这个框架的架构思想也比较熟悉。最近我在试图掌握新版 Angular 框架内部架构思想，并与...

这个 _loadComponent() 函数会在初始化程序时被调用（译者注：这句可参考 application_ref.ts 中 L245，L281， L463，L492），通过观察这个函数不仅知道一个组件是如何被添加到程序里的（译者注：该方法第三行），还能知道对于每一个启动组件，Angular 都会执行使用 APP_BOOTSTRAP_LISTENER 令牌注册的监听器，并且把该...

如果你正在做一个复杂项目，必然会需要自定义表单控件，这个控件主要需要实现 ControlValueAccessor 接口（译者注：该接口定义方法可参考 API 文档说明，也可参考 Angular 源码定义）。网上有大量文章描述如何实现这个接口，但很少说到它在 Angular 表单架构里扮演什么角色，如果你不仅仅想知道如何实现，还想知道为什么...

关于 ExpressionChangedAfterItHasBeenCheckedError，还可以参考这篇文章，并且文中有 youtube 视频讲解：Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)

关于单向数据流，还可以参考这篇文章，且文中还有 youtube 视频解析：Angular - What is Unidirectional Data Flow? Learn How the Angular Development Mode Works, why it's important to use it and how to Troubleshoot it 。单向数据流一句话解释就是：不要在 Angular 使用 Model 生成 View 这个过程中再去修改 Mod...

原文链接：Exploring Angular DOM manipulation techniques using ViewContainerRef如果想深入学习 Angular 如何使用 Renderer 和 View Containers 技术操作 DOM，可以查阅 YouTube 视频 my talk at NgVikings。