View guides on AngularTS

HTML template views

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

What you will build

Render the task count as a small template component.

Before you start

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.

Type-safe component views

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

What you will build

Render a task form whose controller properties and event handlers are checked by TypeScript.

Before you start

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.

Reactive collections and cleanup

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

What you will build

Render the changing task collection and close an external resource when its component is removed.

Before you start

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.

Choose a view style

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

What you will decide

First decide who owns the model and rendering. The server should own both by default. View style follows that decision.

Before you start

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.