What is a Single Page Application (SPA)?

Maximilian Schwarzmüller
A free video tutorial from Maximilian Schwarzmüller
Professional Web Developer and Instructor
4.6 instructor rating • 37 courses • 1,531,132 students

Lecture description

First things first: In order to fully understand the idea behind a MEAN app, we need to understand what a SPA (Single Page Application) is.

Learn more from the full course

Angular & NodeJS - The MEAN Stack Guide [2021 Edition]

Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application

12:41:09 of on-demand video • Updated March 2021

  • Build real Angular + NodeJS applications
  • Understand how Angular works and how it interacts with Backends
  • Connect any Angular Frontend with a NodeJS Backend
  • Use MongoDB with Mongoose to interact with Data on the Backend
  • Use ExpressJS as a NodeJS Framework
  • Provide a great user experience by using Optimistic Updating on the Frontend
  • Improve any Angular (+ NodeJS) application by adding Error Handling
English Now as I said, in this course we'll build a Single Page Application with Angular. Now what is that? What is a Single Page Application? Well in an Angular app, we'll have one root HTML file, a so-called index.html file and we will serve that from our Node server or from a different server, that's important, it can be totally decoupled from our Node backend and it actually will be and this HTML page basically includes some script imports that houses our Angular app, so the Angular framework and our own code and we use this application to dynamically re-render what the user sees, without ever requesting a second page to be rendered by the server. Why? Because by having this pattern, we never need to reload the page just because the user maybe clicked on a post and want to see the details. We can instead navigate to that page directly because we don't really leave the page, we just remove some elements from the DOM and add new elements and all of that is handled for us by the Angular framework, it's really convenient to use and to work with the DOM with it. And therefore we have a powerful way of immediately changing the page, maybe showing a spinner whilst we're fetching some data behind the scenes, so that list of posts which we probably still need to get but we will do that behind the scenes and this provides a highly-interactive, mobile-app-like feeling, a very responsive and fast web page where we never have to wait, where things always happen and that of course is a great user experience and this is why we'll use JavaScript and Angular therefore for the entire front-end, for the entire user interface and we will use Node, Express and MongoDB as a back-end to which we reach out behind the scenes to fetch and send data but the whole user interface is handled as one page only which is dynamically re-rendered all the time by Angular.