Task guides on AngularTS

Keep the application on the server

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

Start with HTML from the server

Do not start by building an SPA. Render the useful page on the server and use normal links and forms. Keep domain models, validation, authorization, transactions, URLs, and HTML generation together for as long as possible.

This is the simplest way to keep the model consistent. The server reads current data, applies the rules, and renders the result in one place. The browser receives HTML it can display immediately. There is no second model to synchronize, no client startup request for content the server already had, and no duplicated loading, routing, validation, and error behavior.

Structure an application

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

Start with server rendering

Follow the server-first guideline. Keep domain models, validation, authorization, navigation, and HTML rendering together on the server. Render the useful document and initial state before AngularTS starts.

Place an AngularTS root around the smallest region that needs browser behavior. Do not create a browser copy of the domain model merely to make the page interactive. Local selection, disclosure, pending state, and DOM behavior can remain small browser concerns while durable state stays on the server.

Build and validate a form

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

Separate validity from validation visibility

A field can be invalid before the user has interacted with it. Show field feedback after blur or a failed submit, but always prevent invalid submission.

<form name="taskForm" ng-submit="submit(taskForm)" novalidate>
 <label for="task-title">Task title</label>
 <input
 id="task-title"
 name="title"
 ng-model="draft.title"
 required
 aria-describedby="task-title-error"
 />
 <p
 id="task-title-error"
 role="alert"
 ng-show="submitted && taskForm.title.$invalid"
 >
 Enter a task title.
 </p>
 <button ng-disabled="saving">Add task</button>
</form>

The controller owns submitted, saving, and the editable draft. The repository owns the write.

Load server data

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

Represent request state explicitly

Do not use tasks.length === 0 to mean both “not loaded” and “loaded empty.”

type LoadState = 'idle' | 'loading' | 'ready' | 'error';

class TaskList {
 state: LoadState = 'idle';
 tasks: Task[] = [];
 error = '';
}

Put transport behavior in a repository

app.factory('taskRepository', [
 '$http',
 ($http) => ({
 list: (cancelled) =>
 $http
 .get('/api/tasks', { timeout: cancelled })
 .then((response) => response.data),
 }),
]);

The timeout promise should resolve when the component is destroyed or a newer query supersedes the request. Cancellation saves work; a request sequence or identity check still protects against transports that complete while cancellation is racing.

Add routing

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

Do not default to client-side routing

Use server routes and ordinary links first. They provide addressability, history, streaming HTML, metadata, authorization boundaries, and resilient navigation without a client router.

Introduce the AngularTS router when multiple screens are intentionally owned by one bootstrapped application and preserving client state or resources between those screens materially improves the product. A client router is not required for AngularTS components embedded in server-rendered pages.

Handle errors

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

Classify before rendering

Validation and domain rejection are expected outcomes near the action.
HTTP timeout, abort, offline, and non-success status belong to the request owner.
Route resolve failure belongs to transition policy.
Unexpected exceptions belong to $exceptionHandler and diagnostics.

Do not convert every rejection to [], null, or false. That destroys information and commonly renders an empty success state after a real failure.

Wrap low-level errors with the operation name while retaining the original cause. The UI should receive a stable category and recovery action, not a stack trace or server payload. Logs may include release, route, operation, and correlation identifiers but must exclude credentials and private data.

Test application behavior

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

Use the narrowest layer that can fail

Test transformations and domain transitions as plain TypeScript. Compile typed component views to catch invalid model properties, event types, and DOM property names. Use a browser for compilation, directives, focus, routing, and reactive rendering.

test('task form prevents duplicate submission', async ({ page }) => {
 await page.goto('/tasks');
 await page.getByLabel('Task title').fill('Write tests');
 await page.getByRole('button', { name: 'Add task' }).dblclick();
 await expect(page.getByRole('listitem')).toHaveCount(1);
});

Select by role, label, visible text, or stable application identifiers. Scope IDs, generated comments, internal CSS classes, and scheduler timing are implementation details.

Troubleshoot an application

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

Find the first failed boundary

Confirm the JavaScript module loaded.
Confirm registration completed before automatic or manual bootstrap.
Confirm ng-app names the created module.
Read the first AngularTS error, not the cascade.
Confirm injected token order matches function parameters.
Confirm the owning scope/controller contains the value read by the view.
Inspect transport status before changing rendering code.

Raw interpolation means bootstrap or compilation did not complete. “Module not available” usually means boot order or spelling. “Unknown provider” means the token is absent from the loaded module graph.

Production and deployment

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

Produce one immutable artifact

Install from the lockfile, typecheck source and tests, validate generated bindings, run browser tests, and build once. Promote the same artifact through environments. Rebuilding after approval changes the release.

Fingerprint immutable assets. Revalidate HTML and route manifests so they reference current fingerprints. Version service-worker caches and remove obsolete entries only after the new worker can serve a complete application.

Verify production behavior

Smoke-test generated output with development fallbacks disabled. Cover direct route entry, refresh on nested URLs, CSP, API credentials, loading and failure states, offline behavior, and service-worker upgrade from the previous release.

Browser support

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

List browser families and versions, mobile requirements, assistive-technology coverage, and optional capabilities. Framework support does not automatically provide WebTransport, service workers, storage, workers, or WebAssembly everywhere.

Isolate capability selection:

function createRealtime() {
 if ('WebTransport' in window) return createWebTransport();
 if ('WebSocket' in window) return createWebSocket();
 return createPolling();
}

Detect the API used, not a browser brand. Keep fallback selection in one service so components consume domain events rather than transport differences.

Test production output: cold load, direct route entry, back/forward, storage denial, offline transition, reduced motion, keyboard navigation, and service-worker upgrade. Disable capabilities to test fallbacks even when CI supports them.

Accessibility

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

ng-if removes content and destroys focused descendants. Before closing a dialog, menu, or editor, choose the element that regains focus. ng-show retains the subtree; verify hidden descendants cannot remain in keyboard order.

Use native buttons, links, labels, headings, and lists before ARIA. Attach AngularTS events to those controls instead of rebuilding their keyboard behavior on generic elements.

Associate errors with controls using aria-describedby. Show invalid state after interaction or submission, retain the invalid value, focus the first invalid control after failed submission, and provide a summary for long forms. Server failures are separate from field constraints.

Internationalization

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

Use stable message identifiers and named placeholders. Do not concatenate translated fragments or use English text as an identifier. Choose plural forms from locale rules rather than count === 1.

AngularTS formatting filters delegate to Intl. Pass the application locale and explicit currency or time-zone policy; browser defaults may differ from user settings.

<span>{{ total | currency:user.locale }}</span>
<time>{{ dueAt | date:user.locale }}</time>

A locale service should deduplicate catalog requests, cache by locale and catalog version, and expose loading and fallback state. Do not render raw message identifiers while loading.

Application security

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

External sources include URL parameters, forms, storage, server responses, realtime messages, worker messages, and cross-window events. Sensitive sinks include HTML, executable URLs, navigation, credentials, logs, and persisted state.

Prefer interpolation, text children, and typed DOM properties. Use ng-bind-html only for markup that passed application sanitization. A trust override must be local and reviewable; never trust a value merely because it came from your server.

Hidden routes, disabled buttons, and client guards improve UX but do not authorize operations. The server must validate identity, permission, input shape, size, and state transition.

Observability

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

Assign a stable operation name and correlation ID at the user-action or route boundary. Record start, terminal outcome, duration, release, and route. Do not log every reactive read or scope write; volume hides causality and changes timing.

performance.mark(`task-save:${id}:start`);
try {
 await repository.save(task);
 record({ operation: 'task.save', outcome: 'success', id });
} catch (error) {
 record({ operation: 'task.save', outcome: classify(error), id });
 throw error;
}

Expected domain and transport failures should produce classified outcomes. Unexpected exceptions should reach $exceptionHandler with their cause. Redact credentials, request bodies, user-entered text, and model snapshots.