Decision guides on AngularTS

Templates or typed views

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

Default

Use typed views for new TypeScript components when model-to-view type safety matters. Use templates when designers own substantial HTML or server-delivered markup is required.

Choose a typed view when

Refactors must check property and event bindings.
The view is highly dynamic.
You want real DOM construction without parsing HTML.
A component and its view evolve together.

Choose a template when

Markup is mostly static and visually authored.
Existing template tooling is central to the team.
Progressive enhancement starts from server HTML.

Both use normal module registration, dependency injection, lifecycle, and change detection.

Controller state, models, or services

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

Default

Keep transient view state on the component controller.

Use a named model when state is reactive, shared by multiple roots or components, and benefits from snapshot, restore, or synchronization behavior.

Use a service when the primary responsibility is an operation or external resource rather than mutable view data.

Ask who owns the state, who may mutate it, how long it lives, and how it resets. Global state is an application-level lifetime commitment, not a shortcut for passing data.

HTTP, SSE, WebSocket, or WebTransport

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

Default

Use HTTP for request-response work.

Use SSE for server-to-client events with straightforward reconnect behavior.
Use WebSocket for broadly supported bidirectional messages.
Use WebTransport when independent streams or datagrams are required and the support contract permits it.

Decide from direction, ordering, reliability, backpressure, authentication, proxy support, observability, and fallback behavior. Hide transport details behind an application service.

CSS or JavaScript animations

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

Default

Use CSS transitions or keyframes for visual state changes. They are easy to cancel and keep view logic small.

Use JavaScript animation hooks when sequencing depends on application state, measurements, asynchronous work, or coordinated entry and removal.

Always respect reduced-motion preferences. Animation should explain change or preserve spatial context; it must not block input or carry required information by itself.

Component, directive, or web component

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

Default

Use a component for an application-owned UI region with a controller and view.

Use a directive to add behavior to existing DOM when the host and surrounding content remain owned by another view.

Use a web component when the element must cross framework or document boundaries through browser-standard custom-element APIs.

Avoid directives that secretly own large subtrees and components that mutate unrelated DOM. Clear ownership makes cleanup, testing, and change detection predictable.