Why is Angular called a single-page application?

Question

One of the most common terms associated with Angular(JS) is SPA.

1. Why is Angular(JS) called a single-page application?
2. Even if the URL changes in an Angular(JS) site will it be called an SPA?
3. Are all the site created using Angular(JS) really a single page application? If not, why?

I hope answers to these question get much clarity on Angular(JS).

Answer 1

Before answering the three questions I just want you to know what a SPA is.

Single page application (SPA) is a web application that fits on a single page. All your code (JavaScript, HTML, and CSS) is recovered with a single page stack. Further more, route between pages performed without invigorating the entire page.

Advantages of SPA:

1. No page flicker. Native application feel.

2. Client-side routing and data rendering on the client side.

3. Data from server is in JSON format.

Coming to the questions

1. Why is Angular called a single-page application?

Answer:

AngularJS is a full featured SPA framework, with the help of which a single page application is created. In the SPA, the whole page is not reloaded every time, only every time the view will be change.

So when you load the application for the first time, not all the pages from the server will be rendered... It's only index.html that loads when you load the application. Since only a single page is loaded it is called SPA

2. Even if the URL changes in angular site will it be called SPA?**

Answer: Basically URL changes are done through routing. Routing in AngularJS is implemented by including <ng-view> or <ui-view> in your index.html page without refreshing the entire page.

So when the URL changes it not the entire index.html that changes, only part of the HTML in ng-view or ui-view is switched between views.

3. Are all the sites created using Angular really single page applications? If not, why?

Answer: Yes. All the sites created with Angular are SPAs. AngularJS is defined in the SPA framework.

Answer 2

First of all, what is SPA?

SPA is:

Single-page applications (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the application. SPAs use Ajax and HTML5 to create a fluid and responsive Web applications, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.

Hence when AngularJS loads in the browser, it loads only the single index.html file, as a user interact other components are loaded without refreshing a page.

Overall, it can also use with web pack to maximize the performance of your application.

There are many benefits and are listed on the AngularJS site.