Introduction

Web applications have become more prevalent in modern development, and both front-end and full-stack developers have been among the roles with the most open positions for a couple of years.

Nowadays, you will hardly find any developer that does not know at least the names of the most used web technologies and it is a valuable skill to learn to stay up-to-date in the current tech landscape.

Amongst those technologies, Angular has helped engineers develop powerful web applications since the end of 2016, cumulating more than 3 million downloads per week at the time of writing. While it already has some incredible features such as a powerful dependency injection system, an opinionated separation of concerns, and more, lately, this number kept on increasing with new features and improvements making Angular ready for the years to come by focusing on performances, standard adoptions, developer experience and enhanced learning paths.

Today, Angular is definitely a strong choice to consider when developing a new project, or as another tool to have on your belt, and, in my biased opinion, this book is a great starting point, and we hope you will enjoy reading it as much as we enjoyed writing it.

Audience

This book is aimed at developers interested in learning how to develop web applications, whether you are beginning in web development, wanting to transition to a new technology or simply seeking to learn or deepen your knowledge in Angular.

Prior experience with another framework or library is not required, but some knowledge of JavaScript, TypeScript, and/or HTML would be beneficial.

What is Angular?

Before diving into the actual code and the technical details, let’s first explore what Angular is.

A Bit of History

In 2010, in the early days of JavaScript frameworks, Miško Hevery developed a strongly opinionated tool to write web applications which was named AngularJS.

This framework focused on using a declarative approach to build web interfaces and enhanced HTML using a special syntax to enhance its behavior. It aimed to enforce a specific way of developing web applications to ease their creation and testing while pushing towards a specific technology stack.

As groundbreaking as it was, soon other competing technologies emerged, simpler and more efficient such as React, later VueJS, and so on.

As a result, AngularJS was discontinued, and Google released Angular at the end of 2016. Even though the name is almost the same, the two frameworks are vastly different and Angular is not just a more recent version of AngularJS. In fact, companies using AngularJS had no choice but to rewrite their whole code for Angular if they wanted to get the latest updates and features. It resulted in a huge impact on the framework’s popularity, and a lot of projects migrated to React or other alternatives.

Since 2016, however, Angular has had a stable and steady release cycle of a new major version every six months, with a detailed update guide, automatic code migrations, and, most importantly, enforces that every update is backward compatible. This means that a project written in Angular 14 won’t need any rewrite if migrated to Angular 18.

Angular Nowadays

Still suffering from the confusion with AngularJS, Angular has come a long way since its early days and has been experiencing what is commonly called "Angular Renaissance" since its v14 with the team focusing on backward compatible and innovative features. This renaissance led to a regain in popularity and a bump in the available job offers, mostly in North America, Europe, and India, and the birth of new technologies and initiatives such as AnalogJS, a meta-framework for Angular, more or less like Next for React.

Lately, pieces of Angular code have been incorporated into YouTube, and the implementation of Signals, which is a primitive that is considered to be integrated into JavaScript natively, has been selected by the TC39, the expert group that decides the future of JavaScript.

More than ever, the Angular core development team has been working on improving performances and enhancing the developer experience and the learning path. They reworked their documentation from the ground up (which I highly encourage you to browse at https://angular.dev), revamped the framework’s tutorial, created a Discord community, and showcased their work on YouTube through live coding sessions and presentations.

Any major change is now going through an RFC (Request For Comment) on GitHub in which it is debated with the community and released in developer preview for a couple of versions to get as much feedback as possible before making any actual change to the framework, which is made with an upgrade plan and automatic tools.

While still preparing for the future and improving the framework, they can already count on the most known and interesting feature Angular has, namely its dependency injection system that is very efficient, and allows for an organized and flexible way of creating your web applications; but also its CLI (Command Line Interface) that acts as a partner when coding by running migrations for you or scaffolding and organizing most of the code as you will soon see in the next chapters.

Angular in the JavaScript Landscape

With all those years of existence, Angular is one of the oldest JavaScript frameworks and countless websites of any size were built with it. To name a few there are:

KLM (Dutch airline) main website (https://www.klm.nl/en)

Google Gemini (https://gemini.google.com/)

Activizion Blizzar’s Battle.net e-shop (https://us.shop.battle.net/en-us)

More than "4500 Angular applications" in Google’s private monorepo according to Minko Gechev, DevRel lead at Google

Those are only some of the most known ones, but applications spread from internal business applications, e-commerce websites, landing pages, and more.

Thanks to the duration of its existence and Google backing it up, the framework still evolves and attracts new developers, staying relevant and competing against old frameworks (React, Vue) but also among newer ones (Svelte, Lit, and more).

From a company’s point of view, Angular is definitely a safer choice for several reasons. Its release cycle is carefully scheduled and communicated upfront with new features coming every 6 months and provided as functionalities you can opt-in if you want to, or simply ignore without being left behind. Angular also packs a powerful CLI that standardizes the development process. It also comes with a lot of the functionalities you can expect from a web framework out of the box: a router, an HTTP client, and so on. Thanks to that, the number of dependencies and third-party tools is greatly reduced which dramatically simplifies maintenance and allows for a reasonable level of confidence in the tools your project is using since most of them are used and battle tested in Google immense Monorepo before being even available to the public.

What’s in This Book?

At the end of this book, you will be able to navigate the codebase of existing Angular projects and build your own web applications.

Each chapter is designed as a building block on top of the previous one and features an exercise at the end, when applicable. While optional, we strongly encourage you to complete these exercises to gradually apply the concepts as we cover them. Some chapters might feature a lot of information and new concepts; take the time to read them more than once if needed, and don’t hesitate to go through again if something is unclear.

The learning path will be the following:

Setting up Angular: We will cover the technical installation of the framework and set up your development environment;

Creating our First Application: This will be our starting point to explore how an Angular application is structured.

Introduction to TypeScript: The language that Angular is using and that you will need to manipulate;

Components, Directives, Pipes, and Services: We will unravel the main building blocks of any Angular application;

Getting Started with Reactivity: We will explore the concept of reactivity, which, while not inherent to web development, can help you write efficient and maintainable code;

Component Communication and Data Flow: We will cover how to orchestrate your building blocks in a cohesive structure;

Reactive and Template-Driven Forms: This chapter will discuss various ways of creating forms to retrieve user input, which is at the core of any web application;

Form Validation: We will learn how to sanitize inputs and provide a good user experience while the user provides input;

Routing: We will explore how to create a multi-page web application and strategies to secure them and improve performance;

Unit Testing: We will see how to test our code to ensure that our code behaves as expected and prevent unexpected bugs and regressions.

With that covered, this ends the introduction of this book. and we can start diving right in!

CHAPTER 1

Setting up Angular

Introduction

This chapter is all about getting our development environment up and running to enable us to develop Angular applications. We’ll set up and install a few packages and go through the installation process using Linux and will cover where it differs on Windows.

We’ll look at the various Integrated Development Environments (IDEs) that allow us to write code, but also provide code checking in the form of errors, intellisense that provides us with additional information on what the properties, methods and data types do and how we can use them.

Structure

In this chapter, we will cover the following topics:

Setting up Node Version Manager (NVM): Install multiple versions of Node

Setting up Volta – an alternative to NVM: Install and pin versions of Node

Setting up Git: Git is a distributed version control system (VCS)

Setting up Angular: Install the framework so we can develop Angular applications

Setting up our Integrated Development Environment (IDE): This will allow us to write code and provide us with IntelliSense, color-coded text to make our code easier to distinguish between keywords, variables, and data types.

Setting up Node

Angular is a JavaScript framework that requires Node to enable the framework to run in our development environment.

There are four distinct Node packages available:

Pending version is the next version, still very much under development and unstable.

Current version is usually the bleeding edge version and is the most up-to-date, but it takes time for that version to be supported by other vendors including Angular.

Long-Term Supported (LTS) is usually a version behind the current version but is more stable and more widely supported by other vendors.

Maintenance version is for the two versions prior to the LTS version that is out of long-term support but is likely to still be in production applications, these would only receive security and bug fixes that are deemed to be critical.

Note: Node’s versioning is structured so that even-numbered versions are released in April and odd-numbered versions in October. The October release pushes the even-numbered release into Long Term Support, with twelve months of active support, and after the twelve months, it moves into maintenance support for eighteen months.

There are a couple of options to install Node on our computers, we could download and install it, which will work fine. The main downside to this comes when we need to upgrade (or downgrade to an earlier version) this means we must uninstall it and then install the next (or previous) version, this can be time-consuming and not particularly helpful if we need to switch between the versions regularly.

For that reason, we use a Node Version Manager (NVM), which gets installed before we install Node. This package will let us install multiple versions of Node and gives us the ability to switch between versions with a couple of simple commands.

Note: We’ll go through each setup, on each of the main Operating Systems (OS) starting with Linux and Windows. You can skip this section if you have a Node or Node Version Manager installed on your OS. If using a Mac, please follow the instructions for Linux as these are similar.

Linux/Mac OS

We’ll use the terminal to install all the packages in this section and we’ll use Curl to install NVM. Depending on what’s installed on your computer, you may already have Curl installed, if you do have it installed then you can skip this part of the process.

Tip: Curl is a way to transfer data from a server to your local computer.

To check if it’s installed from the terminal window, type:

curl --version

If it returns a version number then you know it’s installed (currently, the latest version on Ubuntu is 7.81).

If not, start by updating your system, open a new terminal and type:

sudo apt update

Enter your password and wait for it to complete, then type:

sudo apt upgrade

Once complete, type:

sudo apt install curl

Note: Since we’re using the sudo command, we will need to enter the user’s password.

Once installed, we can check the version again, but also to test that curl is working, we can download an example page, on the terminal type:

curl example.com

We should see a copy of the website’s page in HTML format.

utf-8 />

Content-type content=text/html; charset=utf-8 />

viewport content=width=device-width, initial-scale=1 />

// styling removed for brevity

Example Domain

This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.

https://www.iana.org/domains/example>More information…

Note: This won’t download any files; it will just display an HTML page in the terminal window.

Node Version Manager

With Curl installed, we can now install Node Version Manager (NVM). Back in the terminal window, type the following:

curl –o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Note: Ensure that you are using the latest version and update the version number (v0.39.3) in the preceding link before running it.

NVM has now been cloned into the ~/.nvm directory and will update the profile file script, (for example ~/.bashrc). Once this is complete, either close and reopen the terminal or type:

source ~/.bashrc

This command will reload your profile. At this point, we should now have a Node Version Manager installed. To test this, type:

nvm –v

which should return the current version number (at the time of writing this is 0.39.3).

Table 2.1: List of regularly used Node Version Manager commands

With NVM installed, we can now use NVM to install Node, from the terminal type:

nvm install 20.13.1

This will install the latest (at the time of writing) Long Term Support version and will set this to be the default version. We could have also typed:

nvm install –lts

It would have installed the same version. Now, if we type:

nvm ls

We can get a list of installed Node versions.

$ nvm ls

-> v20.13.1

Default->  20.13.1 (-> v20.13.1)

We now have one version of Node installed, let’s install another version. At the terminal, type:

nvm install 22.2.0

$ nvm install 22.2.0

Downloading and installing node v22.2.0…

Downloading https://nodejs.org/dist/v22.0.0/node-v22.0.0-linux-x64.tar.xz…###100%

Computing checksum with sha256sum

Checksums matched!

Now using node v22.2.0 (npm v10.7.0)

This will install the latest, the current version, run this command again to see both versions:

nvm ls

$ nvm ls

-> v22.2.0

Default-> 20.13.1 (-> v20.13.1)

Notice that we didn’t uninstall the previous version of Node.

NVM has now made version 22.2.0 the latest but creating a new project will still use the default 20.13.1, to use the latest version (22.2.0 in this case), we need to let NVM know we want to use that version. In the terminal, type:

nvm use 22.2.0

Now, any new project created with this currently open terminal will now use this version; once this terminal has been closed then NVM returns to the default version.

With NVM and Node installed, in a way that if we need to change our Node version, then this is a simple command to switch to the new version or quickly install another without having to worry that we have broken other applications.

Tip: If we want to change the default at any time, then we use the alias command, in a terminal type:

nvm alias default

Windows – 10/11

There isn’t an official version of NVM that supports Windows, but there is nvm-for-windows (this is a similar package to NVM mentioned in the Linux section, but it’s not identical). In this section, we’ll walk through installing Node Version Manager for Windows and installing Node on Windows.

Note: Before you start, uninstall any previous versions of the Node and delete the existing Node installation directories before installing the Node Version Manager for Windows.

Download the installer for Node Version Manager for Windows from the GitHub repository and run the installer using the default settings.

Figure 1.1: Installation Wizard for Node Version Manager for Windows

To ensure that the Node Version Manager for Windows has been installed, open a command line or PowerShell window and type:

nvm version

This will return the version number which confirms it’s now installed and working.

Note: The Node Version Manager for Windows requires either PowerShell or a Command line with admin privileges.

Tip: To open a PowerShell or command line window with Admin privileges, use the search menu to locate PowerShell or command line application and right-click the application and from the context menu, select "Run as Admin".

With the terminal window open let’s install Node, type:

nvm install 20.13.1

This will install Node version 20.13.1, type:

nvm list

This will list the version of Node installed.

C:\nvm list

-> v20.13.1

Default-> 20.13.1 (-> v20.13.1)

Running the install command again:

nvm install 22.2.0

Will now install version 22 of Node, and running,

nvm list

This will list both versions of Node installed.

C:\nvm list

-> v20.13.1

-> v22.2.0

Default-> 20.13.1 (-> v20.13.1)

To use a specific version of Node type:

nvm use 20.13.1

or you can specify, latest, lts, or newest instead of the version number. We are now ready to install Angular and switch between versions of Node with ease.

Note: One main difference between NVM and Node Version Manager for Windows, every time we install a new version of Node, we will need to re-run any globally installed packages, for example, yarn.

nvm use 22.13.1

npm install –g yarn

Table 2.2: NVM commands

Setting up Volta

In recent years, Volta has been gaining traction as an alternative to Node Version Manager for Windows. Volta takes a slightly different approach to managing versions of Node by allowing to pin a version of Node to your application, so you can easily swap between different projects using different versions of Node and it will swap automatically.

Note: Volta’s role is to manage command line tools, such as yarn, npm, or executables that are part of JavaScript packages.

Download the installer from the Volta website (https://docs.volta.sh/guide/getting-started) and then run the installation. Open the Command line window and type:

volta install node@20

This will install the latest version of Node 20, to pin a version of Node to your project type:

volta pin node@20

This will add an entry to the project’s package.json file, so each time you run the project the version