Directive Guides on AngularTS

Advanced directives: workers, WASM, channels, viewport

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS ships several advanced directives that expose modern browser APIs — Web Workers, WebAssembly, Intersection Observer, and custom event channels — directly in HTML without requiring JavaScript. These directives are registered as part of the core ng module and are available in every AngularTS application.

Controller and scope directives

`ng-controller`

Attaches a controller function to a section of the DOM, creating a new child scope populated by the controller.

Animation Directives: ng-animate-swap and CSS Hooks

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS integrates animations into the same lifecycle that drives structural directives. Rather than managing setTimeout calls or CSS transitions manually, you add the animate attribute to an element and AngularTS’s $animate service handles entry, exit, and class-change transitions — applying and removing CSS hook classes at the right moment in the digest cycle.

How `$animate` integrates with directives

Structural directives — ng-if, ng-repeat, ng-show, ng-hide, ng-switch, ng-include, and ng-animate-swap — all check whether an element carries animation data before manipulating the DOM. When the animate attribute is present on an element (detected via hasAnimate(element)), they delegate DOM operations to $animate instead of performing them directly:

Data Binding Directives in AngularTS Explained

Mon, 01 Jan 0001 00:00:00 +0000

Data binding directives synchronise values between the scope and the DOM without requiring you to write event listeners or DOM queries by hand. AngularTS provides one-way and two-way binding variants to cover every use case, from safe text output to full form synchronisation.

ng-bind

ng-bind is the attribute equivalent of double-curly interpolation ({{ }}). It watches the given scope expression and writes the result as the element’s textContent. Because it sets textContent, it is immune to XSS — no HTML is ever parsed.

Form Directives and Validation in AngularTS

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS treats HTML forms as first-class citizens of the framework. Every <form> element (and ng-form directive) creates a FormController instance that tracks the aggregate validity and dirty state of all its inputs. Each input bound with ng-model gets its own NgModelController that manages the view-to-model pipeline, validation, and CSS class hooks.

The form directive

A plain <form> element is enhanced by AngularTS into a FormController. Give the form a name attribute and the controller is published on the current scope under that name, giving you programmatic access to validation state.

HTTP Directives: ng-get, ng-post, ng-put, ng-sse

Mon, 01 Jan 0001 00:00:00 +0000

AngularTS ships a family of declarative HTTP directives inspired by HTMX. Rather than wiring up $http calls in a controller, you attach ng-get, ng-post, ng-put, ng-delete, or ng-sse directly to HTML elements. The directives handle the request lifecycle, DOM insertion, loading states, error handling, and scope merging — all configured through HTML attributes.

How they differ from `$http`

When you use $http directly you write controller code: define the request, subscribe to the promise, update scope properties, handle errors, and trigger a digest. The HTTP directives do all of this declaratively:

Directive Overview

Mon, 01 Jan 0001 00:00:00 +0000

Directives are how AngularTS attaches behavior and structure to HTML. A directive is a marker on a DOM element or attribute that tells $compile to attach behavior, transform DOM, wire events, create scopes, or connect controllers.

Every built-in directive in AngularTS is applied as an HTML attribute using the ng- prefix. The compiler normalizes prefixes, so ng-bind, data-ng-bind, and x-ng-bind all match the same directive.

Exact custom directive contracts live in TypeDoc:

Structural Directives: ng-if, ng-repeat, ng-switch

Mon, 01 Jan 0001 00:00:00 +0000

Structural directives reshape the DOM by adding, removing, or repeating elements. Unlike attribute directives that modify an existing element, structural directives use transclusion to stamp out or remove entire sections of the template. They run at high priority (600–1000) and set terminal: true so that lower-priority directives do not compile until the structure is resolved.

ng-if

ng-if conditionally includes or removes a DOM element based on a scope expression. When the expression becomes falsy, the element and its entire subtree — including child scopes and event listeners — are destroyed. When it becomes truthy again, a fresh element and child scope are created.

Directive Guides on AngularTS

Advanced directives: workers, WASM, channels, viewport

Controller and scope directives

ng-controller

Animation Directives: ng-animate-swap and CSS Hooks

How $animate integrates with directives

Data Binding Directives in AngularTS Explained

ng-bind

Form Directives and Validation in AngularTS

The form directive

HTTP Directives: ng-get, ng-post, ng-put, ng-sse

How they differ from $http

Directive Overview

Structural Directives: ng-if, ng-repeat, ng-switch

ng-if

`ng-controller`

How `$animate` integrates with directives

How they differ from `$http`