Add routing and server data
Give the task board a URL and expose explicit loading and error states.
Register the component as a route:
app.router({
name: 'tasks',
url: '/tasks',
component: 'taskBoard',
});
Place the route outlet in the host page:
<main ng-view></main>
Load initial data from a controller method:
loading = true;
error = "";
tasks: Task[] = [];
async onInit() {
try {
const response = await fetch("/api/tasks");
if (!response.ok) throw new Error(`HTTP ${response.status}`);
this.tasks = await response.json();
} catch (error) {
this.error = error instanceof Error ? error.message : "Load failed";
} finally {
this.loading = false;
}
}
Render loading, error, empty, and populated states deliberately. An empty array does not prove loading succeeded.
Checkpoint
Opening /tasks renders the board. A failed request produces a readable error
state.
Next step
Test the application behavior.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.