Getting Started With Angular

Angular is a framework which allows you to create reactive, single page applications. A Single Page Application (SPA) is an application like the one shown below, a simple github profile searching application. You can search different profiles based on username but the URL remains remain constant. It is only one HTML file and some JavaScript code that we got from the server and everything which you see here, every change, every update, is rendered in the browser.

Why is that soo cool?

It gives the user a very engaging user experience (UX). JavaScript is faster than having to reach out to a server for every page change and for every new piece of data you want to display. Therefore, this approach allows you to create web applications which look and feel almost like mobile applications. Everything happens instantly because server needs to send only part of the data, not the entire page. This give speed boost to the website. So every word i type in the search field simply changes this one single HTML page we're using.

How this is done?

JavaScript changes the Document Object Model (DOM), changes whatever is displayed in the browser, by changing the HTML code during runtime. That is why you never need to refresh the page because we're only changing the currently loaded page. You can even see that if you inspect the source code of a page like below image.

That is comprised of a simple HTML file, it does not seem to contain the content you are viewing on page. We only have one single HTML element which does not seem to be a native HTML tag, that's Angular in action.

<my-app><div class="loader"></div></my-app>

Sample Angular github profile application can be found here.