Welcome to this Angular guide! If you are new to modern frontend development, or have worked with HTML and a little JavaScript and now want to build web applications using current technologies, you are in the right place.
In this first article, I will explain what Angular is, where it comes from, why it is so widely used, and what you can build with it. Do not worry: no unnecessary jargon, just what you need to understand where you are stepping (spoiler: somewhere interesting).
🔍 What is Angular?
Angular is an open-source framework developed by Google that lets you create modern, interactive and scalable web applications. It is not a library like jQuery or React (which can be thought of as the V in an MVC application): Angular is a complete framework, offering all the tools you need to build an app from scratch without adding a thousand external libraries.
Angular is widely used in enterprise software, but not exclusively. The framework can build all kinds of applications and is particularly suited to:
- Single Page Applications (SPAs): apps that do not reload the page every time you change sections.
- Progressive Web Apps (PWAs): web apps that feel native.
- Complex business applications: with state management, authentication, forms and advanced routing.
- Dashboards, CRMs, management systems, internal portals and much more.
🕰 A little history
Angular began in 2010 as AngularJS (version 1.x). It was very different from today's framework, based on plain JavaScript and "magical" two-way binding. In 2016, Google released Angular 2, completely rewritten in TypeScript, with a stronger, more modern architecture. Since then, the framework has continued evolving with regular releases every six months. At the time this introduction was written, in June 2025, version 20 made Angular more powerful and simpler than ever, thanks to features introduced in recent releases such as signals and standalone components. In this guide, we will work with modern versions, making use of these APIs.
🔁 What is an SPA and how does it work?
As mentioned, Angular is primarily designed to build Single Page Applications (SPAs). An SPA is a web application that:
- Is loaded once by the browser.
- Changes its content dynamically without reloading the whole page.
- Uses JavaScript to manage internal navigation.
This rendering approach is also called CSR, or client-side rendering, and differs from SSR and SSG.
To understand the differences, let us clarify how a web page is rendered:
📦 CSR (Client-Side Rendering)
- Angular's default approach.
- The entire app loads in the browser.
- Faster after the first load.
- Great for interactive apps, but less favorable for SEO.
With CSR, the server sends the client a single HTML file (in Angular, index.html) that loads the JavaScript needed to run the application. This moves rendering work to the client, allowing the browser to update pages dynamically without necessarily reloading the whole page or returning to the server.
🛠 SSR (Server-Side Rendering)
- The first page is rendered on the server, then the client "takes over".
- Improves SEO and initial loading time.
- Angular supports SSR through Angular Universal.
With SSR, the server generates the HTML displayed by the browser. This lets the initial page load much faster, even before JavaScript has fully loaded. Once JavaScript is ready, the page becomes interactive: this process is called hydration.
📄 SSG (Static Site Generation)
- Pages are generated ahead of time during the build.
- Ideal for blogs and content that changes infrequently.
- Angular can perform SSG with third-party libraries, although this is not its main focus.
Static site generation produces HTML during the build rather than on every request. This lets all the site's pages be prerendered into static files. When a user visits a page, the server simply returns the prerendered file, resulting in extremely fast loading.
💡 When should you use each approach?
| Technique | Use case | ✅ | ❌ |
|---|---|---|---|
| CSR | Highly dynamic applications where SEO is not required. | High user interaction. Better performance for dynamic DOM updates. | Weaker SEO. Slower initial loading. |
| SSR | SEO is needed. Content-heavy sites where fast initial loading matters. | Good SEO. Fast initial loading. | Higher server load. More complex implementation. |
| SSG | Documentation. Landing pages. Blogs. | Excellent SEO. Very fast loading. | Unsuitable for highly dynamic content. Requires rebuilding to update content. |
🧩 What about components?
In Angular, everything revolves around components. A component is a reusable piece of user interface, with its own HTML, CSS and logic.
Think of a button, a card, a form or a page: they are all components.
Angular lets you create standalone (independent) components and assemble your app like a puzzle: each piece has a role and fits with the others. The pages that make up our web app are themselves components. We will explore this in a later article.
🚀 What will we cover in the next articles?
In this introductory module, we will learn everything you need to start using Angular confidently:
- Installing and configuring a project.
- Creating components and pages.
- The router and navigation.
- Signals and the new reactive tools.
- Modules, forms, HTTP calls, state, pipes and interceptors.
- Finally... putting everything together in a practical project 🎮.
Ready? In the next article, we will install our first Angular project.
Spoiler: you need Node.js, but do not panic; we will take it step by step.