作为“为大型前端项目”而设计的前端框架，Angular 其实有很多值得参考和进修的设计，本系列主要用于研究这些设计和成果的实现道理。本文主要环绕 Angular 中与视图有关的一些界说举办先容。
Angular 中的视图抽象Angular 版本可在差异的平台上运行：在欣赏器中、在移动平台上或在 Web Worker 中。因此，需要特定级此外抽象来介于平台特定的 API 和框架接口之间。
Angular 中通过抽象封装了差异平台的差别，并以下列引用范例的形式呈现：ElementRef，TemplateRef，ViewRef，ComponentRef和ViewContainerRef。
各抽象类视图界说在阅读源码的时候，假如不清楚这些界说之间的区别，很容易搞夹杂。所以，这里我们先来领略下它们之间的区别。
元素 ElementRef
ElementRef是最根基的抽象。假如调查它的类布局，可以看到它仅包括与其关联的当地元素：
export class ElementRef<T = any> { // 基本原生元素 // 假如不支持直接会见原生元素（譬喻当应用措施在 Web Worker 中运行时），则为 null public nativeElement: T; constructor(nativeElement: T) { this.nativeElement = nativeElement; } ... }
该 API 可用于直接会见当地 DOM 元素，可以比作document.getElementById('myId')。但 Angular 并不勉励直接利用，尽大概利用 Angular 提供的模板和数据绑定。
模板 TemplateRef
在 Angular 中，模板用来界说要如安在 HTML 中渲染组件视图的代码。
模板通过@Component()装饰器与组件类类关联起来。模板代码可以作为template属性的值用内联的方法提供，也可以通过 templateUrl属性链接到一个独立的 HTML 文件。
用TemplateRef工具暗示的其它模板用来界说一些备用视图或内嵌视图，它们可以来自多个差异的组件。TemplateRef是一组 DOM 元素（ElementRef），可在整个应用措施的视图中反复利用：
export abstract class TemplateRef<C> { // 此嵌入视图的父视图中的 anchor 元素 abstract get elementRef(): ElementRef; // 基于此模板实例化嵌入式视图，并将其附加到视图容器 abstract createEmbeddedView(context: C): EmbeddedViewRef<C>; ... }
就其自己而言，TemplateRef类是一个简朴的类，仅包罗：
elementRef属性：拥有对其宿主元素的引用
createEmbeddedView要领：它答允我们建设视图并将其引用作为ViewRef返回。
模板会把纯 HTML 和 Angular 的数据绑定语法、指令和模板表达式组合起来。Angular 的元素会插入或计较那些值，以便在页面显示出来之前修改 HTML 元素。
在 Angular 中，视图是可显示元素的最小分组单元，它们会被同时建设和销毁。Angular 哲学勉励开拓人员将 UI 视为视图的组合（而不是独立的 html 标签树）。
组件(component) 类及其关联的模板(template)界说了一个视图。详细实现上，视图由一个与该组件相关的ViewRef实例暗示。
ViewRef
ViewRef暗示一个 Angular 视图：
export declare abstract class ViewRef extends ChangeDetectorRef { // 销毁该视图以及与之关联的所有数据布局 abstract get destroyed(): boolean; // 陈诉此视图是否已被销毁 abstract destroy(): void; // 生命周期挂钩，为视图提供其他开拓人员界说的清理成果 abstract onDestroy(callback: Function): any; }
个中，ChangeDetectorRef提供变动检测成果的基类，用于变动检测树收集所有要查抄变动的视图：
export declare abstract class ChangeDetectorRef { // 当输入已变动或视图中触发了事件时，凡是会将组件标志为脏（需要从头渲染） // 挪用此要领以确保纵然没有产生这些触发器，也要查抄组件 abstract checkNoChanges(): void; // 从改观检测树中疏散该视图。在从头毗连疏散视图之前，不会对其举办查抄。 // 与 detectChanges() 团结利用可实现当地改观检测查抄 abstract detach(): void; // 查抄此视图及其子级，与 detach() 团结利用可实现当地变动检测查抄 abstract detectChanges(): void; // 查抄改观检测器及其子级，假如检测到任何改观，则抛出该异常 abstract markForCheck(): void; // 将先前疏散的视图从头附加到改观检测树 // 默认环境下，视图将附加到树上 abstract reattach(): void; }
两种范例的视图
Angular 支持两种范例的视图：
(1) 链接到模板（template）的嵌入式视图（embeddedView）。
嵌入式视图暗示视图容器中的 Angular 视图。模板只是生存视图的蓝图，可以利用上述的createEmbeddedView要领从模板实例化视图。
(2) 链接到组件（component）的宿主视图（hostView）。
直属于某个组件的视图叫做宿主视图。