Angular Tutorial For Beginners - Angular Services | Angular Services Full Tutorial

hi friends welcome to arc tutorials this is angular full tutorial series with live examples and we are still building an beautiful application called a child board before we start today's tutorial I request you to kindly subscribe to my channel if you have any questions any doubts any queries please feel free to drop them in the comment section I will help you for free let's get this tutorial started so today we are learning all about angular services so angular services what are angular services angular service is nothing but a class a singleton class which can be injected into angular components so let me give you an example over a period of time while building angular applications you will need lot of code a lot of features or a functionality which you might want to share between different components you might want to share different data between different components and that's exactly where tsarouchas company comes into picture so services makes it easy to create reusable methods and functionality using which you can share data between various components data can be easily shared between various components like I said it's a good practice to keep all the HTTP calls and details requests into one single service file for each feature we will learn more about this this is a good practice that you should follow unlike components you don't have to register it or inject it anywhere in app module or anything so this is one of the most frequently asked questions and interviews that they'll ask do you need to inject angular services into app module or anywhere no we don't have to register we don't have to inject the services into app module that's exactly why we call them as singleton class and you will also see that this is injected at the root level that's why it is not required to inject or register it in app module we'll see that in detail let's see the next part ok so here is the command to generate the angular service so if you want to generate any angular services you will use the command ng generate service service name you can give any service name you can generate any number of services no issues you can inject them into components only where it is required so for example if you are building a user service you need to only inject it in places where it's calling that functionality components can have any number of services injected into the components right so which means I can have 10 services I can use it in 20 components I can use it in 50 components so we can have any number of services injected into a component now time for some practical let's get that started but before we proceed please do remember that if you have any doubts in equation questions or queries feel free to drop them in comment section I will be happy to help you alright so we are still building on our angular application project just in case friends so this is the arc tutorials channel YouTube channel and you can see I am posting a lot of angular tutorials for beginners and full tutorial series please please subscribe to my channel to keep encouraging me alright so we have here we have our project which is beautiful up and running so I'm gonna sell this job okay alright so here we are learning services so I have created few services but I will create new for you so let's go to this services so we see that under services app alright source you would see services right so under this source you are under inside the app I have created a folder called services and you would create all your services here so that way you can organize and keep all your services under one single folder alright so first let's go to that folder so app and then services alright so far so good now gee generate service and here you will give the service name the alternate shortcut is to just write ngg service and the service name so I am creating a new service and let's call it books right I'm calling it book so this will generate as a service which will say book service right and ok or let's think of a good one let's say messages right so message service or book service I mean you can think of anything in your project come up with any service that is required for you in your application now ng generates service book hit enter and you should see that there should be two files generated you can see here two files created one is the service file the other is the spec file right so far so good you can also see that the book service is created and book dot service taught spec is also created under services alright great so now let's go ahead and use this in our component so if you see let me before we start coding into the service right it's some important things that you should note here so we are importing injectable class from angular core and then in it we are telling that using the directive injectable we are telling it's provided right inside the root that's exactly why you do not have to inject it in the app module or you do not have to register it it in any module it's injected in the root and that's exactly why it is called singleton class all right so so we got export class class name and then we have a constructor so far so good I'm going to quickly throw in a method here let's call it get books right so IDE now we got the books method here i am writing let's say i will just create a simple array for now and we will return it I'll say Const book list is equal to let's throw in an array for now and then we'll make it an object so a b c d e f g so you can give any you can even use an object i will show you that also in just a bit let's first finish this up a class member kaos sorry I forgot I'm writing an Express alright so you can register it if you want you can make it type also an argument all right okay let's just leave it at this for now I'll come back and fix that okay and then I'm going to use a message alright on all right so I'm going to use a message also and I can use I am using an array and a string here in the get books now let's just say return okay right so ideally in let's in our services you would write and make this data from the HTTP calls for example you would write you'll inject the HTTP client and then you would make a HTTP request here a get request and get data from server or your deeply that's the ideal case we will come there in probably in next door so tutorial but for the sake of learning with simple service I am starting you with a very very basic service to show you that what how to generate a service how to write a method in service and how to use this method in your components that's the purpose of this tutorial will stick to it all right so I have a method which says get books which will return me the list of books let's go to our component and generate a component we have seen that in previous tutorials if you have missed any of those tutorial please go back and check out the tutorials completely in order to learn it ng generate component books now this will generate for files and update one file you can see here component HTML spec TS component end module it has updated in the app module so ok so I made a mistake by generating and wrong so I will just move it to app and it will automatically figure it out move and you would see that we'll have to update that the path ok so it has you can see it has updated on its own so visual studio code is smart enough it knows that it has to update it has done it now let's go to app component alright so here we are books dot component or TS and we have services here our book service so first thing we have to do is import our service from dot slash services ok it's one level above so services slash book dot service and then we are importing the class service alright so once you have imported the service need to create a instance for the same so it's a good practice always to have the first as camelcase because this is pascal case so here we have imported our service the next step is to register it in create an instance in our constructor which I have done and now take this service and we can call the method now I'm saying ng on init this dot booked service dot you can see it's already showing us the method right so I'm going to use a list or I can just say my books is equal to write and I'm saying this dot my books is equal to the books value that I will get it from this service now let's take a minute to revise this code before we go any further the first thing I have done in this component the component is books that we just created our services under the services folder which is book dot service I mean in the book dot component or TS file I have imported the service that's step number one step number one I'll just list it down so you can revise it step number one import your service into component right that's your first step the second step is to create an instance in the constructor always you need to create it for all the service that you want to use it this is optional the third step is optional which is calling it in ng view you can call it you can call this service and you can call the variable or the methods in anywhere in this component because you have a instance of the same right so now I'm going to go to the HTML and throw in a list let's throw in a first heading say books book list my books from service and you can throw in a you will write and you can throw in a lie and you can say here ng for equal to book let book has led so here if again friends if you have not comfortable using the template directives you must note that I have created this tutorial for you in previous videos so please to check it out so what I am doing here is writing a simple ng for loop and printing the value this is called data binding in angular so using that I am just displaying the data in a more complex one you can address it using the if it's an object you can have key value details as well we'll see that but for now I'm just looping all the values that I am getting from the array and and displaying them so it's important to show that you need to have the same variable name my books which was mentioned here it has to be the same otherwise it will not work so remember that all right so that's all done let's go ahead and now run this application hold on alright so before we do we need to take the selector books and then go into our app component dot HTML and here let me inject it right here after the menu so I'm just calling this component in the app component HTML now we are good to go now we should see the list of books here while it's building I request your friends please to subscribe to my channel to keep supporting me and encouraging me to bring you more tutorials and videos thank you alright so the application is compiled now let's alright so you see here now my books from service we created a list and it is throwing us the values why is there an extra ok here alright so you can see so my books from service abcdefgh eat whatever we had here in our service is what is getting displayed now to show you that I'm going to change some values here so you know that all right so you can see here the values already is reflecting and they I am updating it in my service but it is coming and displaying it in my books using dependency injection that is what we have seen just now all right so this should get you started as a first tutorial on services and in the next tutorial I am going to use a more complex objects but that's for the other tutorials keep stay tuned with me I'll be bringing you step-by-step tutorials for to empower you and so that you can learn angular in detail alright so that was all about angular services please do subscribe to my channel and ask me questions I'm here to help you shoot me with questions I'll be bringing more complex use cases also try this out I will handhold you and make sure that you learn angular thank you so much for joining see you next time

Channel: ARC Tutorials

Views: 701

Keywords: angular full tutorials for begineers, angular 8 tutorials, angular 8 full tutorial, angular 8 services full tutorials, angular 8 services how to, learn angular services, angular 8 services, tutorial angular 8 services, angular bootstrap full tutorial series, Angular CLI Tutorial, Angular 8 Components Tutorial, Build Angular Applications, Test Angular 8 Applications, Angular 8 ngIf Complete Tutorial, Angular 8 ngFor Loop Tutorial, Angular 8 Full Tutorial

Id: Fxx16kvXdjw

Length: 17min 28sec (1048 seconds)

Published: Mon Nov 18 2019