This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Decision guides

Short decision guides for common AngularTS architecture choices.

Use these guides when more than one feature can solve the problem:

Each page gives a default and the conditions that justify another choice.

1 - Templates or typed views

Choose between declarative HTML templates and type-safe DOM construction.

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.

2 - Controller state, models, or services

Put state at the narrowest lifetime that satisfies its consumers.

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.

3 - HTTP, SSE, WebSocket, or WebTransport

Select a network transport from the communication pattern and fallback requirements.

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.

4 - CSS or JavaScript animations

Choose the simplest animation mechanism that meets sequencing and control needs.

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.

5 - Component, directive, or web component

Choose the correct ownership and interoperability boundary.

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.