Angular framework detailed explanation of view abstract definition

Preface

As a front-end framework designed "for large front-end projects", Angular actually has many designs worth referring to and learning. This series is mainly used to study the implementation principles of these designs and functions. This article mainly introduces some definitions related to views in Angular.

View abstraction in Angular

Angular versions can run on different platforms: in the browser, on mobile platforms, or in a Web Worker. Therefore, a certain level of abstraction is needed between the platform-specific APIs and the framework interfaces.

Angular encapsulates the differences between different platforms through abstraction and appears in the form of the following reference types: ElementRef, TemplateRef, ViewRef, ComponentRef, and ViewContainerRef.

Abstract class view definition

When reading the source code, it is easy to get confused if you are not clear about the differences between these definitions. So, let's first understand the difference between them.

Element ElementRef

ElementRef is the most basic abstraction. If you look at its class structure, you can see that it only contains local elements associated with it:

export class ElementRef<T = any> {
 // The underlying native element // is null if direct access to native elements is not supported (for example when the application is running in a Web Worker)
 public nativeElement: T;
 constructor(nativeElement: T) {
 this.nativeElement = nativeElement;
 }
 ...
}

This API can be used to directly access native DOM elements, comparable to document.getElementById('myId'). But Angular does not encourage direct use. Try to use the templates and data binding provided by Angular as much as possible.

TemplateRef

In Angular, templates are used to define the code for how to render a component's view in HTML.

The template is associated with the component class through the @Component() decorator. Template code can be provided inline as the value of the template property, or it can be linked to a separate HTML file via the templateUrl property.

Other templates represented by TemplateRef objects are used to define some alternative views or embedded views, which can come from multiple different components. A TemplateRef is a set of DOM elements (ElementRef) that can be reused in views throughout your application:

export abstract class TemplateRef<C> {
 //The anchor element in the parent view of this embedded view abstract get elementRef(): ElementRef;
 // Instantiate an embedded view based on this template and attach it to the view container abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
 ...
}

By itself, the TemplateRef class is a simple class consisting of only:

elementRef attribute: holds a reference to its host element
createEmbeddedView method: It allows us to create a view and returns its reference as ViewRef.
Templates combine plain HTML with Angular's data binding syntax, directives, and template expressions. Angular elements insert or calculate those values ​​to modify HTML elements before the page is displayed.

Views in Angular

In Angular, a view is the smallest grouping unit of displayable elements that are created and destroyed together. Angular philosophy encourages developers to think of the UI as a composition of views (rather than a tree of independent html tags).

A component class and its associated template define a view. In specific implementation, a view is represented by a ViewRef instance associated with the component.

ViewRef

ViewRef represents an Angular view:

export declare abstract class ViewRef extends ChangeDetectorRef {
  //Destroy the view and all data structures associated with it abstract get destroyed(): boolean;
  // Report whether this view has been destroyed abstract destroy(): void;
  // Lifecycle hook to provide other developer-defined cleanup functions for the view abstract onDestroy(callback: Function): any;
}

Among them, ChangeDetectorRef provides the base class for change detection functions, which is used to collect all views to be checked for changes in the change detection tree:

export declare abstract class ChangeDetectorRef {
  // A component is usually marked as dirty (needs to be re-rendered) when an input has changed or an event has been fired in the view
  // Call this method to ensure that the component is checked even if these triggers do not occur abstract checkNoChanges(): void;
  // Detach the view from the change detection tree. The detached view is not checked until it is reattached.
  // Use in conjunction with detectChanges() to implement local change detection checks abstract detach(): void;
  // Check this view and its children, use with detach() to implement local change detection check abstract detectChanges(): void;
  // Check the change detector and its children, and throw this exception if any changes are detected abstract markForCheck(): void;
  // Reattach a previously detached view to the change detection tree // By default the view will be attached to the tree abstract reattach(): void;
}

Two types of views

Angular supports two types of views:

(1) An embedded view (embeddedView) linked to a template (template).

An embedded view represents an Angular view within a view container. A template is just a blueprint that holds a view, and a view can be instantiated from a template using the createEmbeddedView method described above.

(2) Link to the component’s host view (hostView).

A view that belongs directly to a component is called a host view.

The host view is created when the component is dynamically instantiated. You can use ComponentFactoryResolver to dynamically create and instantiate a component. In Angular, each component is bound to a specific injector instance, so when creating a component we pass the current injector instance.

The properties of individual elements in a view can be modified dynamically in response to user actions, but the structure (number or order) of those elements cannot. You can modify the structure of these elements by inserting, moving, or removing embedded views in their view containers.

ViewContainerRef

ViewContainerRef is a container that can attach one or more views to a component:

export declare abstract class ViewContainerRef {
  // Anchor element, used to specify the position of this container in the containing view // Each view container can have only one anchor element, and each anchor element can have only one view container abstract get element(): ElementRef;
  //DI of this view container
  abstract get injector(): Injector;
  // How many views are currently attached to this container abstract get length(): number;
  // Destroy all views in this container abstract clear(): void;
  // Instantiate a single component and insert its host view into this container abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
  // Instantiate an embedded view and insert it abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>;
  // Detach the view from this container without destroying it abstract detach(index?: number): ViewRef | null;
  // Retrieve a view from this container abstract get(index: number): ViewRef | null;
  // Returns the index of the view in the current container abstract indexOf(viewRef: ViewRef): number;
  // Move the view to a new position in this container abstract insert(viewRef: ViewRef, index?: number): ViewRef;
  abstract move(viewRef: ViewRef, currentIndex: number): ViewRef;
  // Destroy the view attached to this container abstract remove(index?: number): void;
}

Any DOM element can be used as a view container. Angular does not insert views inside the element, but appends them after the element bound to the ViewContainer.

Typically, a ng-container element is the best choice for marking where the ViewContainer should be created. It is rendered as a comment so that no extra HTML elements are introduced into the DOM.

Through ViewContainerRef, you can create a host view when instantiating a component with the createComponent() method, or create an embedded view when instantiating a TemplateRef with the createEmbeddedView() method.

Instances of view containers can also contain other view containers to create hierarchical views (view trees).

View hierarchy

In Angular, views are usually organized into view hierarchies. The view tree is a tree of related views that act as a whole and is one of the key components of Angular change detection.

The root view of the view tree is the component's host view. A host view can be the root of an embedded view tree, which is collected into a view container (ViewContainerRef) on the host component. The view tree can be loaded and unloaded dynamically as the user navigates through the application (for example, using a router).

The view tree and component tree do not correspond one to one:

• A view embedded in a specified view tree context, which may also be the host view of other components
• The component may be in the same NgModule as the host component, or it may belong to another NgModule.
  

Components, Templates, Views, and Modules

In Angular, you define a component's view through its companion template. A template is HTML that tells Angular how to render the component.

Views are usually organized hierarchically, allowing you to modify, show, or hide them as a unit of UI partitions or pages. A template directly associated with a component defines the host view for that component. The component can also define a view hierarchy that contains some embedded views that serve as hosts for other components.

A view hierarchy can contain views for components in the same module (NgModule), and can (and often does) contain views for components defined in other modules.

Summarize

This article briefly introduces some view-related definitions in elements, views, templates, and components in Angular, including ElementRef, TemplateRef, ViewRef, ComponentRef, and ViewContainerRef.

Among them, view is the basic building block of application UI in Angular, which is the smallest group of elements that are created and destroyed together.

ViewContainerRef is mainly used to create and manage embedded views or component views. Components can define views by configuring templates. The template directly associated with a component defines the host view of the component. Components can also include embedded views.

This is the end of this article about the detailed explanation of the view abstract definition of the Angular framework. For more relevant Angular view abstract definition content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

refer to

• Angular-Component Introduction
• Angular Glossary
• Exploring Angular DOM manipulation techniques using ViewContainerRef