Angular 9 Tutorial For Beginners #58- Services

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn all about angular services what are angular services why are they important and how do we use them in our application in real time we learn all about it in today's episode welcome back my name is shredder I bring over 10 years of experience to share with you all on the modern technology frameworks I am also here to learn from you all so during the course of this tutorial series if you have any doubts any queries on the code samples or the explanations feel free to ask me in the comment section below I'll be happy to help you for free I am putting in a lot of hard work in bringing these tutorials for you so I'd really appreciate if you can subscribe to my channel and also like the videos thank you so much in advance this is part of the angular 9 full tutorial playlist where we have now close to 55 tutorials and the playlist link is in the description box below please check it out also again I will request you if you have any doubts during in any of the tutorials just ask me in the comment section I'll be happy to help you so we are focusing on the angular HTTP feature series from past few episodes we learnt about observables we learnt about dependency injection and today we are learning about services in angular so what you will accomplish at the end of this tutorial at the end of this tutorial you will know what our services how do we generate the service using angular CLI understanding the at the rate injectable decorator how do we import the service in component and how do we call the methods this will help you understand and kind of stitch the entire application from services to component to template let's get started so what are services services allows us to create reusable common shared functionality between various modules components imagine if you want to share some certain functionality between different components we cannot directly do it and hence we use services so we write only once and we will reuse them every time we want to use in any component services our singleton which means they are injected in a particular component that requires it we learned that this mechanism we call it as dependency injection using dependency injection we inject the services into the component at runtime services are an abstraction layer or process layer which holds your business logic for examples and some real-time use cases so services are the are may mostly used to make the HTTP requests to our endpoints and also to make a request and rest and process the response a service can have a value it can have methods or a combination of both take an example of this take an example we'll look at this example that I have put together so it has three modules this particular application let's say it has three modules which will have lot of components inside them they will all share the services which are written once so let me give you some examples by making some notes before we go into generating and using the services so let me open it here let me make some notes for you alright so the first thing we know is services are used for reusing the common shared functionality right so when we say this commonly used shared responsibility let me give you an example here so let's say we are building let's say user profiles write or say orders right or leads or contacts I keep it simple in this so let's say we are building a contacts so we will say create contact create contact and view contact we will have edit contact and we will have delete contact so if you see these are all your components right so the way you will generate is this will be your module these are all your components right so now we have our components that we identified for a module called component now what we will do is we can write some service right will write services which are shared so we will write a common service called contacts dot service right now this file will have all the things required for making HTTP calls processing data cleaning data before adding or sending it to so basically this is the business logic for contacts this services will be used in all the components so that is how you will reuse the services into all the components that's the beauty about services so now you can relate to it that how easy it is that you write only once reuse it in all the different components we will see how to do that now so remember that services are singleton right which means if they need to be they need to be injected into the components where we want to use them unlike components services need not be included in your modules and then we can create any number of services no restriction right no restriction to that no restriction also services services are used for sharing data between components okay and then the important thing we should know is that importing importing and injecting services into components is called dependency injection services are injected at runtime into components right so this way this way the code the code becomes highly efficient efficient and easy to maintain the code becomes much easier to test right we can we can have we can have a value or a method inside the services we can have values we can have methods or both both in the service you can relate you can relate that a service is simply a JavaScript class right is it JavaScript class with methods and variables right so this is all about services so I hope your concepts are clear I hope you are clear about what services are and how to use them so let's get started now and see how to use them how to generate them how to use them so how do we generate a service we can generate a service using cooller CLI and using that we can run command and generate service followed by service name let's do that now so the command we will run is ng generate service followed by service name this name can be anything that we want to give right so I'm going to create in from scratch I want you to know how it works so I'm going to create a new component as well just to show you how things are done so I'm creating a quick component called contacts here where we will do all the crud operations so here I'm going to run the command ng generate compo contacts the contact component is created and it has updated my app module file let's see let's take a look at the contacts it's here now I need a route for it so inside the routing file I'm going to throw in the route and that would be simply to track our work so contacts and here I'm going to call it contacts component all right now let's run the application in the meanwhile while it is building if you're liking the tutorial give a like to this video if you have not yet subscribed kindly do so so that you can keep getting notifications when I share more tutorials thank you again in advance let's give it a minute to build also I encourage you if you have any doubts any problems in executing the code feel free to ask me in the comments I will be happy to help you alright so we have our application let's go to the contacts link so we see contacts works right so it's a simple component which has a template and then we have the mapping now let's go ahead and create a service so here I will say ng generate service ng generate service followed by this name of the service so I am going to call it contact service right you give ng generate service name followed by the name that you want of the service again remember we can generate these services in any folder so there is no restriction right we can we can generate generate the service in any folder we want right the best practice is always keep all services related into modules right so once you have created the service let's see the service so now we see this is the code that is auto-generated by the service and it has the import injectable and angular slash core and then if you see there is a decorator which says injectable so this property this decorator will say that it can be injected into components right since we are using a since we are using injectable it we can always mention that it is can be injectable right decorator in forms angular that we can inject it into components or it is a service class ok so that's it's a service class and the important thing to note here is the value the the service is provided in root which means it's available across the application can be injected into any and we need okay that is what this injectable provided in route means we can also change this and we can also mention where we want to provide it alternatively but that will see it in some other time today let's focus on writing the service so now that we have our service written we have written our service and it's ready I think let's go ahead and write a method right so what I'm going to do I'm going to write a method I'm going to call it get contacts you can name it you can give any name to the method you want now I'm going to write a simple JSON object it can be any object that we want but usually you will make a HTTP call that's what we will learn it in the upcoming tutorials HTTP calls here and you get some data so I'm going to call it contacts list contact list list is equal to it's an array and it's an object so I'm going to say contact ID is 1 and contact name you can create any any type of JSON object that you want to prefer there is no restriction toward YouTube YouTube ok just any name that we want and let's close it and this is just a returning the contact list so we have a method which is just written in a JSON array which is what will come from HTTP calls right when we make a HTTP call to endpoint we will usually get a response which is JSON format we'll take that and return it now this method this now the service is complete now let's use it in our contacts component so in the component what we will do first thing we have to import it right so here we will have to import it and we'll say contact service right so we have imported the contact service and then we will use give the class that we want okay so once this is done take this and inject it into the constructor and we'll call it private okay so we have the service injected and I'm saying ng on in it let's use a variable here and say contact list equal to okay and here I will say this dot contact list equal to this dot contact service dot method is third right so we are doing a binding and getting the data from the contact service and using using the method get contacts so see this is the beauty now we have written this method in the service we are just using it in contacts we can use it in any component we want and and in any number of contact components there is no restriction you can use it in all components wherever you need it now let's go to a template let's throw in some H for list of contacts right and for now I'm just using a ul Li but you can use anything you want like a table or any format I'm using ng for let contact contact list right and here I'm going to write and using interpolation I'm saying contact dot contact name so alright so I have just used a simple ng for and looped it into a list of contacts and now let's go and we see the values are displayed into our contacts page right and you see these are values which are not in our component but they are coming from the service which is account contact service right so when we go to contact you see this is just looping and printing the value but the actual values are coming from the get contacts method how we can also make sure that it is the same behavior so what we can do is we can simply go here change these values okay and now let's see it will reload we'll see the new value so see this is the beauty of writing a service that now look at the component code it looks so easy pretty and easy to maintain that all the components will just take values from the services and this way we can reuse it in any number of components we want this is the same process you can you can define any number of methods right let's just write that also import the services into any number any number of components no issues we can call any we can call any methods inside the service right similarly just remember it's not only read-only we can also pass some values right so we can also pass values to methods here when we toured so will will do will learn about that when we hit the HTTP GET client pose delete in the upcoming tutorials but this is what you should be knowing if you want to really work with services in angular alright so we just saw the injectable decorator how to use that and we have seen how how it works as part of dependency injection that it's imported and then it's injected into the constructor and we use it so these are some of the steps for your notes generate the service which we did using and in G CLI and we have imported the service into the component class we initialize the constructor method in the dependency injection and we have we are calling the methods and properties now there is one more way to call it which is if you want to access it wire directly into the template right so here if you see we have called on ng on in it but let me define one more one more method into our contacts service and here I will say calling from template so this can be any method that you want like I said I'm just showing you the possibilities calling from template directly right so here I have the contact service in the contacts template just make sure you make it public right private will not work so if you want to directly directly call the method install method of service make it public in constructor okay that's important otherwise it will not work so now that I have made it public so what I can do in the template I can have a link I say click Save button I'll say click equal to I'll say what is the name of the thing that we have injected here contact service and we can say contact service start calling from template so you I'm here I'm directly calling inside the template I'm calling the service instance and calling the method okay so let's see this also now open inspector this is because I've just done a console.log so if you see here the message let me clear again and click it so when I click it says calling from template directly which is what our contacts are visited nothing much right so the idea you get it which is either you can call it using a method in your component which internally calls the method of service or we can directly call the methods inside the template alright so that brings us to the end of learning about services I hope you really liked and enjoyed this tutorial in the next tutorial I am going to talk about we will start learning HTTP client of angular and will start writing and calling some endpoints using our HTTP api's thank you so much for joining I hope you are liking the series give a thumbs up to the video to subscribe to my channel ask me if you have any doubts thank you

Channel: ARC Tutorials

Views: 17,652

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular services tutorial, angular 9 services tutorial, angular services examples, angular service

Id: cznobRuS0UQ

Length: 23min 13sec (1393 seconds)

Published: Wed Jul 01 2020