This is the multi-page printable view of this section. Click here to print.
A view is the DOM output of a component or directive. AngularTS offers two authoring styles:
Read how to choose. Both styles register on normal modules. A server-rendered module can use HTML while a client-owned dashboard module uses typed programmatic views in the same application.
Render the task count as a small template component.
Read components.
angular.getModule('todoApp').component('todoSummary', {
bindings: { remaining: '<' },
template: `
<p>
<strong>{{ $ctrl.remaining }}</strong>
tasks remaining
</p>
`,
});
<todo-summary remaining="remaining()"></todo-summary>
The binding is the component’s public input. $ctrl is the component controller
in its template. Interpolation converts the value to displayed text and keeps
that text current.
Templates are a strong default for mostly static HTML, designer-edited markup, and teams that want structure visible without reading JavaScript.
Learn template expressions or compare typed views.
Render a task form whose controller properties and event handlers are checked by TypeScript.
Install the npm package, enable TypeScript, and read components.
import { angular, button, form, input } from '@angular-wave/angular.ts';
class TodoForm {
draft = '';
add() {}
}
const app = angular.createModule('todoApp', []);
app.component('todoForm', {
controller: TodoForm,
view: ({ controller }) =>
form(
{
onsubmit: (event) => {
event.preventDefault();
controller.add();
},
},
input({
value: () => controller.draft,
oninput: (event) => {
controller.draft = (event.currentTarget as HTMLInputElement).value;
},
}),
button({ disabled: () => !controller.draft.trim() }, 'Add'),
),
});
A function in a child or property position is a reactive reader. AngularTS runs it, records the controller values it reads, and updates that DOM position when those values change. A plain value is a snapshot.
Typed views are useful when compile-time model-to-view checks, dynamic element construction, native DOM properties, or direct browser API integration matter.
Learn collections and cleanup.
Render the changing task collection and close an external resource when its component is removed.
Complete typed views.
import { each, li, ul } from '@angular-wave/angular.ts';
view: ({ controller, onDestroy }) => {
const channel = new BroadcastChannel('todos');
onDestroy(() => channel.close());
return ul(
each(
() => controller.todos,
(todo) => todo.id,
(todo) => li(() => todo().title),
),
);
};
Normal array.map() creates a one-time DOM snapshot. each() observes the
collection, preserves nodes by a stable unique key, moves existing nodes when
order changes, and disposes nodes for removed keys. Its renderer receives a
reader because an item object can be replaced while retaining the same key.
Bindings and framework listeners are cleaned up automatically. Register sockets,
channels, timers, observers, and other application-owned resources with
onDestroy().
Use the complete typed component view reference.
First decide who owns the model and rendering. The server should own both by default. View style follows that decision.
Read the short template and typed-view examples.
| Prefer HTML templates when | Prefer typed programmatic views when |
|---|---|
| The server owns the model and rendering | The browser owns the application model |
| The page or route is server-rendered | The browser owns model consistency and compilation |
| AngularTS adds a small enhancement | A complex screen is primarily TypeScript |
| Server-rendered markup is reused | Checked model-to-view bindings are required |
| Normal HTML remains the clearest representation | Native properties and browser APIs dominate |
Both choices use module.component(), controller injection, reactive state,
transclusion, routing, and lifecycle cleanup. They can interoperate, but avoid
splitting one complex client-owned model across TypeScript and loosely typed
HTML bindings.
Start with server-rendered HTML, not a client template that recreates the same page. Keep using HTML for server-owned pages, route fragments, and focused enhancements. If the browser must take ownership of a complex model, a typed programmatic view can add compile-time checks between the model and DOM. It is optional; HTML templates remain supported. Make REST contracts, cache consistency, and browser security policy primary at the same ownership threshold; simple HTTP remains preferable before it.
Choose at the module boundary. A server-rendered login module can use HTML while a dashboard module in the same application uses a client-owned model and its preferred view style. Do not convert one merely to make it match the other.
Read Keep the application on the server, then follow the selected authoring guide.