Architecture of Angular Applications

Angular Web App Architecture

A lot of modern application has at list a two part a front-end and a backend

The Front-end also called client is part of a web browser and this is what the users and interact with so essentially include the user interface or UI of an application, we use HTML, CSS, TypeSCript and Angular to built the frontend.

The Backend sits on a web server or multiple web servers on the cloud and it’s responsible for storing the data and doing any kind of processing.

Our frontend or the client App talks to the backend to get or save the data.

One of the questions that lot of beginner asks how do save data in Angular, well you don’t save data in Angular in most cases you don’t save data on the client, because it is easily disappears as the users clears the browser data or moves to a different computer that’s why we store the data on the Backend on the server.

HTTP Services

On backend we often have one or more databases as well as the bunch of HTTP services or APIs to make this data available to the clients.

In case you don’t know API stands for Application Programming Interface

This HTTP Services or APIS are essentially endpoints that are accessible via the HTTP protocol, so we can them using simple HTTP request to get or to save the data.

So our web application consist of a front-end and a back-end, the backend is responsible for Data plus APIs and any required Business logic that process or calculates the data and gives response the frontend using HTTP services. The front end is purely responsible for presentation so on client we have HTML Templates as well as the Presentation Logic of application this logic is all about displaying data and responding to user actions like what should happen when the user clicks on button or navigates away from a Page these are examples of the presentation logic or the logic that is all about the presentation aspect of an application


Now in terms of the implementation building the backend requires a familiarity with the other languages and frameworks.

As an angular or frontend developer you don’t worry about those but if you are a full stack developer then you may already have an idea about backend languages like PHP, Python, Node, .Net and so on.

What’s Next

With understand of Angular basics now it is time to move to next step and get your setting ready to work on Angular applications, to do that you can follow this tutorial Setting up Angular Development Environment it will get you setup all things you need for Angular Application on your operating system (Windows, Linux or Mac).

Yogesh Koli

Software engineer & Blogger live in India, has 8+ years of experience working with the Front-end and Back-end Web Application Development.

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example…

2 years ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify…

2 years ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter…

2 years ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the…

2 years ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them,…

2 years ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super…

2 years ago