Angular - 1.2 Angular définition

So, what exactly is Angular? Angular is a JavaScript framework that enables the creation of Single Page Applications — commonly called SPAs. A SPA is a web app that lives on a single page: as you navigate between sections, you might feel like you're opening new pages, but you're not — there is only one HTML file and only the content changes. Compare this to a traditional site like GitHub: when you click on a tab, the browser tab shows a loader because a brand new page is being downloaded.

On a SPA, since there is only one file and only the content updates, navigation is instantaneous. You click a link, you immediately see the new content, and you never see the browser's reloading spinner. This is because the app is not asking the server for new pages — it lets the server alone and updates the page locally.

What this means for the user experience

  • Reactive UI: JavaScript runs locally and is much faster than waiting for a server round-trip on every click
  • App-like feel: the experience feels like a desktop client or a mobile app, not a website
  • Background data loading: if data needs to come from a server, it's fetched asynchronously without blocking the UI
  • Tiny initial HTML: if you inspect the source, you'll see only about 13 lines of HTML — none of the content you see on screen is in the static HTML

Why is there almost nothing in the static HTML? Because Angular dynamically generates and updates the DOM based on the route you visit. When you go to a route, Angular's JavaScript modifies the DOM in real time to build the page you see. That's why pages appear instantly without any reload icon. Throughout this course, you'll learn what happens under the hood and how Angular accomplishes this magic.

Summary

Angular is a JavaScript framework designed to build Single Page Applications (SPAs) where content changes dynamically without reloading the entire page. Unlike traditional multi-page applications, SPAs load a single HTML file and use JavaScript to modify the DOM on the fly, delivering a reactive user experience that feels like a native desktop or mobile application.

Key points

  • Angular is a JavaScript framework for creating Single Page Applications (SPAs) with a single HTML file
  • SPAs modify the DOM dynamically as users navigate between sections, eliminating full page reloads and loading spinners
  • JavaScript execution is significantly faster than requesting new pages from a remote server, providing instant content updates
  • The responsive nature of SPAs creates a user experience comparable to desktop or mobile applications
  • Background data loading can be implemented to preserve responsiveness while fetching content from servers
  • Inspecting SPA code reveals minimal HTML structure since content is generated dynamically by JavaScript during runtime

FAQ

What is the key difference between an SPA (Single Page Application) and a traditional multi-page website?

An SPA has only one HTML file and uses JavaScript to change content dynamically, whereas traditional websites load a new page from the server each time you navigate. SPAs eliminate the loading time and refresh icon because they don't request new pages from the server.

Why do Single Page Applications provide a more reactive user experience?

JavaScript executes much faster than requesting a new page from a remote server. Since only the content changes and not the entire page, users see instant updates when they navigate between sections, creating an experience similar to a desktop or mobile application.

How does Angular modify web page content if there's only one HTML file in an SPA?

Angular uses JavaScript to dynamically modify the DOM (Document Object Model) while the application is running. When users navigate to different sections, JavaScript generates and inserts new HTML elements into the existing page structure, without requiring a full page reload.