Learn to use Angular to create dynamic and interactive front-end interfaces for web applications.

Become a MEAN Stack Developer

In this module, we’ll cover the most fundamental concepts of Angular, a popular JavaScript framework. We’ll learn everything about building a complete Angular app, setting up the development environment, and building our own single-page application (SPA). We’ll start off by covering the basic building blocks of Angular, such as modules, components, and directives. After that, the module will introduce us to some more advanced material that focuses on forms, routing, and dealing with APIs. By the end of this module, we’ll have gained hands-on experience by building a fully functional e-commerce application.

A Hands-On Guide to Angular

## Single-page applications

>The examples of single-page applications that we use every day include Google, Gmail, Facebook, Twitter, and GitHub.

![single-page-app](/api/collection/5854561945255936/5664668925296640/page/5262111799246848/image/6701379402858496)

From websites that consisted of several interlinked pages to single-page applications, we have come a long way. 

SPAs do not need to download every page every time from the server. They just download the index.html, and the rest happens on the client-side.

You may be thinking that we load very little HTML from the server initially. What about the data that is added later? How does that get updated in a SPA every time? To do this, browsers need to change the data into HTML every time.

The answer to that can be obtained by comparing SPAs to traditional server-based applications. The rendering of data that used to be done on the server-side has a different approach with SPAs.

With SPAs, the data to HTML transformation is done on the client-side. SPA-friendly browsers have something like a template engine running in them that makes rendering much faster and easier. Now, the data won’t need to be loaded from the server every time.

A look at the below diagram might help understanding the concept better.

traditionally...
![](/api/collection/5854561945255936/5664668925296640/page/5262111799246848/image/4816713305030656)

Multiple page reloads take place every time a new page is requested.. How about with SPAs?

with SPAs...
![](/api/collection/5854561945255936/5664668925296640/page/5262111799246848/image/5596662353887232)

Only request data to display on your single page application with no page reload needed but only AJAX calls to fetch data using HTTP methods.

## Advantages of using SPAs

- Easier to deploy in Production
- Server to serve a minimum of 3 files — single-page index.html, a CSS bundle, and a JS bundle.
- Faster page refreshes and no full-page refreshes occur.

## Downsides

One major downside of using a SPA is that not all browsers are SPA-friendly. In such cases, they cannot index the SPA correctly. Browsers use AJAX Crawling or Progressive enhancement to solve this problem.

Here is an interesting read about AJAX Crawling that explains what it is and how it can be done: https://developers.google.com/search/docs/ajax-crawling/docs/learn-more

Progressive Enhancement, as per MDN docs:
https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement

# Single-page applications

>The examples of single-page applications that we use every day include Google, Gmail, Facebook, Twitter, and GitHub.

![single-page-app](/api/collection/5854561945255936/5664668925296640/page/5262111799246848/image/6701379402858496)

From websites that consisted of several interlinked pages to single-page applications, we have come a long way. 

SPAs do not need to download every page every time from the server. They just download the index.html, and the rest happens on the client-side.

You may be thinking that we load very little HTML from the server initially. What about the data that is added later? How does that get updated in a SPA every time? To do this, browsers need to change the data into HTML every time.

The answer to that can be obtained by comparing SPAs to traditional server-based applications. The rendering of data that used to be done on the server-side has a different approach with SPAs.

With SPAs, the data to HTML transformation is done on the client-side. SPA-friendly browsers have something like a template engine running in them that makes rendering much faster and easier. Now, the data won’t need to be loaded from the server every time.

A look at the below diagram might help understanding the concept better.

traditionally...
![](/api/collection/5854561945255936/5664668925296640/page/5262111799246848/image/4816713305030656)

Multiple page reloads take place every time a new page is requested.. How about with SPAs?

with SPAs...
![](/api/collection/5854561945255936/5664668925296640/page/5262111799246848/image/5596662353887232)

Only request data to display on your single page application with no page reload needed but only AJAX calls to fetch data using HTTP methods.

# Advantages of using SPAs

- Easier to deploy in Production
- Server to serve a minimum of 3 files — single-page index.html, a CSS bundle, and a JS bundle.
- Faster page refreshes and no full-page refreshes occur.

# Downsides

One major downside of using a SPA is that not all browsers are SPA-friendly. In such cases, they cannot index the SPA correctly. Browsers use AJAX Crawling or Progressive enhancement to solve this problem.

Here is an interesting read about AJAX Crawling that explains what it is and how it can be done: https://developers.google.com/search/docs/ajax-crawling/docs/learn-more

Progressive Enhancement, as per MDN docs:
https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement

Talks through the world of how traditional websites  have come a long way and we work with single page applications now.

Introduction to the MEAN Stack

Introduction to the Framework

Building Blocks of Angular

Basic Concepts in an Angular Application

Forms in Angular

Routing in Angular

Services and Dependency Injection

Dealing with APIs

Implement the Above in a E-commerce App

Login and Authentication

Conclusion

Introduction to SPAs

Single-page applications