Angular client server architecture

In this video we will discuss how the client communicates with the server in an Angular application. Along the way, we will understand the typical architecture of an angular application. Finally, we will discuss the difference between HTTP POST, PUT and Patch verbs. Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 Text version of the video http://csharp-video-tutorials.blogspot.com/2018/07/angular-client-server-architecture.html Slides http://csharp-video-tutorials.blogspot.com/2018/07/angular-client-server-architecture_4.html Angular CRUD Tutorial https://www.youtube.com/playlist?list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5 Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists 1. When a browser issues a request, a route in our Angular application responds to that request. 2. There is a component associated with a route and the component code executes. If the component needs data, it calls an angular service. 3. The data access logic is usually encapsulated in an Angular service. If you are wondering, why can't we include the data access logic in the component itself, rather than an Angular service. 4. Well, that's because, if the data access logic is encapsulated in a service, then the service can be reused across all the components that needs that data access logic. 5. Without the service we would have to repeat the data access code in each component that needs it. Imagine the overhead in terms of time and effort required to develop, debug, test and maintain the duplicated code across multiple places instead of having it in one central place like a service and reusing that service where required. 6. The Angular service, calls the server side service over HTTP. The HTTP verb that is sent with each request to the server, specifies what we want to do with the resource on the server. 7. The server side service talks to the database. HTTP Verb Purpose ---------------------------------------------- GET To get data from the server POST To post data i.e to create new item on the server DELETE To delete data PUT, PATCH To update data POST -------- 1. Create a new item 2. Not Idempotent PUT ------- 1. Create a new item with a given ID if the item does not exit or update the item with the given ID if the item already exists 2. Idempotent PUT is idempotent where as POST is not. So what does, Idempotent mean? Well, since PUT is idempotent, no matter how many times you call it, you would have the same effect. For example, when you use PUT with a specific ID and if a resource with that ID does not exist, PUT creates it. Now if you issue the same PUT request again with the same ID, another item with the same ID will not be created. Instead, that existing item will be updated. So it would not matter how many times you call PUT, it would have the same effect. Remember we use POST to create a new item. So, when you call POST multiple times, multiple items will be created. So for example, if you have an employee object and when you POST that same employee object 10 times, 10 objects will be created on the server. So POST is not idempotent. PUT -------------- 1. Replace an existing Resource entirely i.e update all the properties of a resource 2. Updates the item with the given ID if the item already exists or creates a new item with a given ID if the item does not exit PATCH -------------- 1. Partial update i.e update only a sub-set of the properties of a resource 2. An item can only be patched if it exists. We cannot patch an item if it does not exist Depending on the Angular version being used, we can either user the Angular Http service or HttpClient service to call the server side service. Since Angular Version 4.3.x, the old Http service is deprecated. If you are using a version less than 4.3.x, then your only choice is to use Http service. We discussed using the Http service in Parts 27 and 28 of Angular 2 tutorial. HttpClient service has some great benefits over Http service. We will discuss using the HttpClient service and it's benefits in our upcoming videos in this series.