Angular CRUD with Web API Tutorial Part #9 - Service For Feature Module

hi friends welcome to our tutorials we are continuing with our angular crud tutorial series this is part nine of it where we are trying to build a back-end common utility service in this particular series we are trying to build a feature module called products in our e-commerce application so far we have done a lot of groundwork and the fundamentals to get our application up and running and started today we will be building a service which will help us write a common utility which can be shared between components welcome back friends my name is sridhar i bring over 10 years of experience as a full stack developer i am here to share my knowledge on modern web technology stack i will share my knowledge on angular react node express mongodb and much more i'm here to share my knowledge with you and i'm also here to learn from you i know a lot of you would be building your own feature modules along this tutorial and i cannot wait to see what you build i want to assure you that at the end of the series you will be able to build your own angular thread functionality for your feature modules i am right here to help you if you have any doubts just ask me in the comment section below i will try and help you as much as i can this is part of the angular crud full tutorial playlist the playlist link is in the description box below in this particular example we are trying to build a products feature module for our ecommerce shopping cart application if you haven't if you haven't checked out the previous episodes i request you to please do so so you have continuity in learning so so far we have covered eight topics before eight episodes where we have done the project introduction set up our mock data we have created angular application from scratch we have installed bootstrap created feature modules we have created components created site framework and we created routes in the previous episode in this episode we will create an angular service which will be used across different components in our feature module let's get started so these are the things that we are we are trying to build in the project scope that we have seen and today we will be writing a feature module service right so how do you write a service we'll use a angular cli to generate our service using ng generate service command and then we will have to import the client module into our app module and import http client into a service let's see how to do it with a hands-on experience let's get started all right i will create some notes as in when we go along but first let's see what we are up to in the application and see what all we have done so far so we have our products feature module we have some components we have created routing let's see it in the application how and what we are up to so you see we have the products feature module it has its own route and you see it's a lazy loading module which means it will be loaded only when it is requested then we have the list products which will list down the products here and we have similarly we have view product by id that we configured and that id we are able to capture similarly we have update similarly we have delete so we have all the routing in place now let's fix the service part today so for that i will go into the application and then i will generate and service i will go into the products the best way to maintain is to go into that particular module right so that we can club and group all things related so i'm going to generate a service here ng generate service i'm going to call it products and you will see it will be generated inside the products module okay you can see it here that we have the product service which is generated inside the products module so everything related to products is inside this module right so this is a self-contained module which can be shared which can be reused throughout across different applications all right so now we have our service so i told you the first thing we do is go to app module and we have to import the module so here we will write from at the rate angular slash core slash http so here let's just inject it otherwise it will automatically if you don't remember the package don't worry here i'm going to say http client module now it will say doesn't know and will take help so we are going to import it import http client module from angular slash core slash http all right uh okay spelling all right so it says cannot find the module all right uh let's see the module name once again just to be sure it's oh sorry it's not core it's common all right so we have imported our http client module we are done now the next step is into our service we have to import right at the rate angular slash common slash http and import the client okay so now we have the http client imported let's create an instance of it so i'm going to say private declined the best way is always to refer it with small caps all right so this is what we have our service now we need some methods right for the components so here we are going to say the first thing right so we are going to say create product this is a method which we will use and we will call uh the service method which will call the end point right and we will have to pass a body so i'll going to say product body we'll pass it and we will say we need a endpoint right so i'm going to declare a endpoint here so i'm going to say just or just i'll keep it simple and we will give the end point which is in our case localhost 3000 slash products okay and this is our url right now it says uh cannot find did you mean url declare here right so instead i'm going to call it product url okay and then what we are going to do is we will we will use this http client dot post post method and we will pass the product url we'll have to pass the product body right that's what we will call it and remember friends we will return this and when we return this it will return an observable okay so it will return an observable now similarly let's create other methods where we will say view product and here we'll pass an id product id so this will be a get call so here i'm going to say product and url product slash plus product id which means i'm appending it to the url and that's what i'm passing the url as again this will return me an observable similarly we'll create you will create for update product again you will pass the product body we will use a put method we'll use along with this and say product body right and this will be product slash we'll need a product id and product body for this so here i'm going to say product id and product body and finally i am going to put delete product it will be a delete okay remember all of this will return us an observable we will use these observables and we will get that so i'll say search category search category products right here i'll pass the category id right so this will be the id so i'm going to say products search and here i'll say category equal to category id right and here this will be a get call right simple right so see how quickly we are able to get our service up and running for the crud operations similarly here i'm going to say by date and here i'll pass the date param right and paste here and say date equal to right similarly you can create multiple search criteria for rating price etc that's up to us however we want but this is how we will call our methods and this is our service to get our crud operations up and running right if you want to test you can test your endpoints some people prefer to use web apis you can use that as well there is no restriction to it here say you have some web url which says jsonplaceholder.com right so you have some api endpoints you just mention the url that you want to use okay i will show you that also in the next episode this is our base structure which will return us now in some places we might want to send headers right or we can configure them also as part of our params that we want to send right but we'll keep it simple we'll keep growing it okay so this is the service that we will use in all our components here in the next episode stay tuned for that i hope you are following along i hope you are following the tutorial if you have any doubts just put them just put them in the comments section i will be happy to help you thank you so much in the next episode we will create a products module which is an interface class that way we can use type casting very strictly all right thank you so much for joining today and we'll see you in the next episode

Channel: ARC Tutorials

Views: 7,184

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, Angular CRUD with web api tutorial, service for feature module, angular services tutorial, angular services http post, angular service observable, angular service http

Id: 4N2PIgsTqwk

Length: 11min 39sec (699 seconds)

Published: Mon Aug 03 2020