Angular application architecture

Author: Dawid Adach

-

Angular app architecture

Most of modern applications consist of two parts: Front—end and Back—end

Frontend and backend

What is a Front-end and what do we use it for?

It's all about presentation.

For out purpose, a front—end which is often called a client, is a code which is running in a web browser. It's responsible for the presentation part (User Interface). Within Angular we are using HTML, CSS (or Sass) and Typescript to build the front-end of our application.

The front—end is responsible for displaying data and presentation logic. This logic decides what happens when the user clicks on a button or picture or what to do when the user navigates to a different page.

Back-end

The back—end usually consists of three parts:

  • Application (code)
  • Database(s)
  • Server (on which Application is running)

The back—end is used to store the data and it's processing. If you finished a previous tutorial where we have built a Todo App, you probably have noticed that after refreshing a browser, data was lost. That's because Angular doesn't store the data itself. Instead, it uses an Application Programming Interface (API) to connect to the back-end system and store data there.

API

An API (Application Programming Interface) is a set of functions and/or procedures exposed locally or globally, that allows other applications/clients to create/manipulate/obtain certain data or services from a server. Although it might sound scary, it's actually quite simple. Let me illustrate it on a real-life example. Each API has certain endpoints and operations. We can call (call = send a request) different endpoints with different parameters (payload/data).

Now, imagine a harbor. Yes, a harbor like this one:

Harbor

So we have:

  • A Harbor which is equivalent to our Backend Application
  • Multiple Docks which are similar to API Endpoints
  • Different Ships sailing which relate to our Requests
  • Containers on our ships which carry some Data

Imagine that you sit in another harbor and you wish to get some stuff from another harbor. What do you do? You send a Ship, to specific Harbor, which goes to a particular Dock, load some Containers and come back. And this is exactly how an API works. While using an API you are also sending your Request (Ship), to specific Application/Endpoint (Harbor/Dock) to obtain/deliver certain Data (Containers)!.

It might sound funny but it really works the same way. For example, if you send your ship to the wrong dock, most probably you won't get the containers taht you wanted. Same with an API if you confuse endpoints. If you send the wrong data (containers) they won't be accepted by the server, similarly, any wrong containers won't be accepted by customs in the destination harbor. There might be one difference though. Ships don't sail as fast as requests fly :)


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...