Single-page application

As explained in Modern Angular

A single-page application is a web application that loads a single document and updates its displayed content through client-side code during navigation.

A single-page application (SPA) renders pages in the browser: the backend can provide dynamic data as JSON while client-side code updates the displayed interface during navigation. This avoids replacing and repainting an entire page, producing application-like interactions and immediate feedback. section 9.1.1

Angular applications are single-page by default. An initial request delivers sparse HTML containing the root component and script references; the browser then downloads and executes JavaScript before rendering the requested content. This can worsen Largest Contentful Paint and time to interactive, particularly for mobile-heavy or marketing-facing sites. section 9.1.2

SPAs separate responsibilities and change deployment requirements:

• Serve bundled JavaScript, HTML, and CSS from static hosting or a CDN, keeping server delivery separate from client rendering. section 9.1.1 section 9.4.4
• Configure the host to return index.html for unknown routes. Otherwise, a direct request such as /products can make the server seek a nonexistent products.html file and return 404. section 9.4.4
• Consider server-side rendering when initial-load costs make a browser-only render unsuitable; an SSR setup retains a normal browser bootstrap alongside server-specific bootstrap and configuration. section 9.1.2 section 9.2.1

Angular SPA entry document

An Angular SPA can begin with an index.html document containing an <app-root> element and runtime, polyfills, vendor, and main scripts. The application content appears only after those scripts run. section 9.1.2

Figure 9.3 Life cycle of the relation between a SPA and server/CDN

Trace the SPA relationship with a server or CDN and the additional browser-side rendering steps. section 9.1.1

How Modern Angular covers it

How deep it goes

Explains initial HTML, script loading, browser rendering, performance effects, and deployment fallback; defers server-specific configuration details.

Examples

Uses an HRMS application, its index.html and root component, and a direct /products request to illustrate SPA behavior.

What you can do after

Operate/configure SPA hosting by serving bundled assets and returning index.html for routes unknown to the server.

How it connects

Connects single-page applications with server-side rendering, client-side rendering, content delivery networks, routing, hydration, and Largest Contentful Paint.

liveBookmanning.com

Read Modern Angular on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Build a Frontend Web Framework (From Scratch)A web application that updates its displayed content and navigation within one initially loaded document rather than requesting a new page for each route.
• 

  liveBookmanning.com
  Django in ActionA single-page application is a web application that renders its interface and performs substantial application logic in the browser within a single web page.
• 

  liveBookmanning.com
  ASP.NET Core in Action, 3eA single-page application is a web application that updates its user interface dynamically without full-page navigation for most interactions.
• 

  liveBookmanning.com
  React Quickly, Second EditionA single-page application is a web application that dynamically updates its interface in the browser without full-page navigation for most interactions.

Compare how 5 books explain single-page application →

Related concepts

• server-side renderingcontrasts with · A web-rendering technique in which a server generates a user interface’s markup or other rendered representation before delivering it to a client.
• multi-page appcontrasts with · A multi-page application is a web application whose navigation loads separate HTML documents for different routes or views.
• JavaScriptuses · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
• routinguses · Routing is the selection of a path, destination, or processing component to direct an item, request, or flow toward an intended endpoint.
• web applicationkind of · A web application is software that provides functionality through web technologies and is accessed by users through a browser or other web client.

This explainer was generated by Manning's knowledge graph from the text of Modern Angular. The section links point to the parts of the book it draws on.