A single-page application (SPA) represents that the application can solely have one page; hence the term single-page application. Let me explain how this can be possible. In an SPA, there's a main page, which is known as the shell page, and different pages that are dynamically created at runtime on the same page. In an SPA, when you go from one page to another, it's not really going to another page, but just loading totally different data on to the same page.

An SPA generally has initial resources and a content-generated server aspect on the initial application request. For all subsequent requests, it'll use the client-side code to load any required resources and to show content. An SPA can also have one or more static pages that serve as physical entry points of the application.

So in traditional applications, you must be aware that the pages usually blink and everything loads once more. This is not very efficient with the use of bandwidth, particularly within the mobile world. SPAs are distinguished by their ability to redraw any part of the UI while not requiring a server round-trip to retrieve HTML. This can be achieved by separating information from the presentation of data by using a model layer that handles data and a view layer that reads from the models. In an SPA, we will load the initial content upfront, and so the various views (loaded as and when required) or the little reasonably mini websites may be loaded on the fly and embedded into the shell.

AngularJS can be an excellent SPA framework, but it's not used only for that. You don't have to load these dynamic views with it. In truth, you may simply use it to achieve separation of code.

The challenge of building SPAs from scratch is that there are lots of various problems to deal with that are related to DOM manipulation and history. However, you can dynamically load modules, and the way you load these modules guarantees that you create sync calls and so on. Routing becomes a large issue as a result of which you have to possess a way to trace "Where are we tending towards? And wherever are we going?" All of these constraint are made into AngularJS.

As mentioned, AngularJS is a full-featured SPA framework. We have two-way data-binding and we tend to have the Model-View-Controller structure. Routing of views, which we discussed in the earlier section, into the shell pages is finished through built-in routing support. Testing was designed right from the start; thus, you will be able to build strong tests if required. For DOM manipulation, jQLite is built in, which is like the Mini-Me of jQuery. If you wish to use more advanced stuff, you'll be able to even use jQuery. AngularJS and jQuery play really nicely together.