In this section, we will learn about building single-page applications. 

What exactly is a single-page application? 

A single-page application is a web application or website that interacts with the user by dynamically rewriting the current page, rather than loading entirely new pages from a server.

Think of it as an application with only one HTML file, and the contents of the page load dynamically based on the request made by the user. We only create templates that get rendered in our browser dynamically at runtime. 

Let me give you a good example.

In Chapter 15, Deploying Angular Applications, using the ng build command, we generated the compiled code of an Angular app.

Take a look at the compiled source code that was generated by Angular:

In the preceding screenshot, you will see only one HTML file, named index.

Go ahead and open the file—you will see it's blank. That's because Angular applications are single-page apps, which means the content and data will be generated on the fly dynamically based on user actions.

The following are some of the advantages of building a single-page application:

• The pages are rendered dynamically, and therefore our application source code is secure.
• As the compiled source code renders in the user's browser, the pages load much faster than in the traditional request and response model.
• Since pages load faster, this leads to a better user experience.
• Using the Router component, we only load components and modules that are needed for certain features and do not load all of the modules and components in one go.

Throughout the course of this book, we have created many Angular apps, and each one of them has been a single-page application.