Angular 10 Tutorial #72 - Services Tutorial | Angular 10 Tutorial For Beginners

hi friends welcome back to our tutorials this is angular 10 full tutorial series for absolute beginners starting today we will learn all about angular services what are services why are they important we'll also learn some important fundamental concepts like dependency injection we'll learn about a decorator called injectable we will learn about http client eventually in the next episode onwards you will learn about http get post put delete methods which forms the basis of your interaction between the backend api and the front-end angular application at the end of this particular mini series on services you will be able to master angular feature of how do you work with the backend apis how do you integrate them in your application and much much more let's get started this is part 72 of the angular 10 complete tutorial series uh i have planned more than 100 tutorials we have reached 72 and we are covering almost all aspects of angular framework including a lot of detailed use cases so make sure that you check out the playlist link which is in the description box below and if you have any doubts as always i welcome you to ask me in the comment section i try and help you as much as i can following are the topics that i've already covered in detail so take a look at it if you have any doubt in any of these topics feel free to reach out as well the following topics that i have covered so far 71 are covered in detailed with lot of detailed use cases you don't want to miss on them so make sure that you go through it well today we are learning about angular services so before i start explaining you about the angular services let me touch base upon a very very important topic called dependency injection so what is dependency injection right a lot of times this is asked in interviews as well so make sure that you understand the concept really well so what is dependency injection it's an important application design pattern right it's a design pattern and what it does is that it allows us the ability to add the functionality of components at runtime so you want to provide something like a service etc at runtime so these are done when you are compiling them so the dependencies are provided at runtime rather than at the compilation now that being said the di framework lets you supply data to a component from an injectable service like class now angular has its own di framework internally which is typically used in the design of angular applications to increase the efficiency and modularity now what are the types of dependencies we have so dependencies are like something like you can explain which is services or object of a particular class right that is also provided at runtime so those are the two examples that you should give if you want to talk about dependencies for a components or angular application now di is also a coding pattern in which a class will ask for dependencies from external sources then rather than creating themselves right so this is just a quick intro topic for you it's not if you will ask me are we using them on a day-to-day basis no we don't actually but internally angular framework does use it so it's important it's healthy to always know what's happening under the hood now that being said let's jump into angular services so what are what are angular services now services allows us to create reusable common shared functionality between various modules and components think of them like something that if you need certain functionality certain code certain functionality to be reused you put it under service also services are singleton which means they have only single instance services are injected into application using dependency injection mechanism that's what we just described some time back we need to create and inject services in components where we want to use them all right services are an abstraction layer or process layer which consists of our application's business logic services are mainly used to commonly used for making http requests to our endpoints or apis so for example whenever you have your backend apis you want to communicate with them with the application which is front-end application we will use services angular has a wide variety of solid support like for interaction with the backend apis so we will learn all about that now a service can have a value method or a combination of both right so this is just a brief introduction so that you know that some theoretical knowledge about what angular services are some of these questions are often asked in interviews so make sure that you understand and follow them correctly think of this example let's say you have multiple modules or components now you can use and all of these components let's say they share similar functionality right they need same data instead of having and definition defined in each of the component or module level you can have common leak placed in one place it's like a reusable piece of code which is called service then serve the same service can be served in different components now that was about service right so now let's see how do we generate a service so let's see that here alrighty if you want let me also make some notes for you real quick so some of the important things that you need to remember what our services mention that services are the are reusable reusable common shared functionality between different modules and components okay this is what you should answer and then you should specify that services are injected using the di mechanism or design pattern which is dependency injection now services are used for interactions with backend apis or rest endpoints right and you can say that services are one of the most crucial critical and crucial features because without which you cannot work with back-end apis or systems right all right so that is about the introduction now how do we how do we generate these services right just like any other angular using cli we will say ng generate service followed by the service name now some of the common things that people often ask me are where should you keep them right where should you keep the services some people suggest that if it's a functionality you should keep it under similar module should be inside the same module should be separate right so these are some of the valid legit questions that i get so the answer is in my experience at enterprise level what i have seen is uh usually we would have a separate folder right now the reason for that is because you can have all the things in one place now take an example of this right so i have this folder structure i have a lot of modules and components that we have generated over a period of time so if i want to have services the best practice that i have seen in different i would say enterprises that i've worked with is have a separate folder called services and this one folder will be will be used as a common repo where you can hold all your services right so i navigated to that service so create a creator single con folder to place all services that way you know you easily know that's a simple folder structure that you should adopt now how do we generate ng generate service service name so let's do that i'm in that folder of services am saying ng generate service followed by i am saying i want a service by the name users all right so it generate it will generate two files one is the service file one is the service spec dot ts which is the test unit test file so open service and you would see service dot ts file right now what's inside a service file let's quickly check that also if you open this service file you would see that it says injectable provided in root now this is a very very important concept that you have to understand the first thing is there is a decorator which is injectable okay now what it does it gives information about this particular file what is this file it's injectable that means it will use the dependency injection mechanism and will be will be injected from at run time right that means when you are running your application compiling it it would directly provide it so that's why it's a injectable now the other thing that you would see is provided in now this is very very important now you don't have to specify it anywhere because it's already saying that it is provided in the root that means it's available throughout your application wherever you inject it okay remember it's available wherever we inject it now where can we where can we inject right the services right inject any in injecting any component where you want to use it we want to use it okay so where do we so in a real time application you would have around 30 40 services in the components wherever you use it you will inject it right how do we inject it i'll show you in just a bit when we start coding right now what we have done is we have tried to understand the concept of services we have learned how to generate a service we have we are understanding what's inside a service file now that being said what is the other thing that is asked usually in interviews is what do you understand by injectable and what do you mean by provided in oh so we already did that right so provided in means wherever we want to inject it now where can we inject it we inject it in the services should we should do we have to import it anywhere no this is yet another important question that is often asked do we need to import this services in any module file this is often asked to trick the candidates to check if they have really worked on it or not a lot of times people say yes we need to inject and that's where you know that the candidate has not really worked on it so do we need to inject the service no we don't have to make any entry in anywhere we directly import it in the component okay in any module file no we don't import in module only imported in component where it's used right so that is all about services right all right so now let's see the next one which is injectable so like i said it's a dependency injection pattern right so what it tells is that it is coming from an external source load it inside this all right so that's the injectable decorator that we are using which allows the functionality of any class to be injected at runtime all right so we generated the service right and let's see how to call it now so we got a we got this service i'm just going to create a simple method i'm going to say get users all right i'm defining a method and i'm saying the name of the method is get users and for now i'm going to create a quick array nothing fancy just simple just for your simple understanding i'm just creating so say that whenever this method is called i expect it to return the these values fair enough and will return this so i saved it now how do we use this so let's say i will go to first let me check the route which one we can use because we made some changes so i see we have customers right so let's go and to our application and say customers okay customers works right so what i'm going to do go to customers customers component and here in the component.ts we will say import that particular service from we are going to say services slash user service so what are we doing we are going to import our user service in this class and since we are doing then the next step is to inject an instance here in constructor now usually the good practices always make the lower case of this particular class name so like for example if you have user service just make it small so you know that it's of the same service right so what did i do i injected this service here and then created an instance in the constructor which is private quick user service now should it always be private no it can be public as well okay but most times you would have it private so that the data is secured it doesn't go out now once you do this user service ng on init i'm saying this dot uses service dot now you see it is showing me the method that is available in that particular service call it right now this method doesn't take any input it's not taking any input right now as of now because it's a simple use case where we have a method which is inside a service and we are just calling it it will return us the value so what i am going to take to collect that output just do a console log or just throw it in the component for now here i will just all right so what i'm doing is i'm just throwing that output and putting it back all right why is it not coming let's see that customers so this is a local instance right so what i'm going to do this dot users and create a variable and use it here define that variable and say any for now so now i'm using and printing that so you see here user id 10 youtube and instagram which means that this data is now coming from the service into this component and that's the important lesson of this particular episode just to make sure that we are getting the correct data from the correct source i'm going to take this and add one more and i should expect that in my ui so i see it here that means the flow is now complete i have i was able to bind the data from the component to service and from service to component right so that is how you bind the data and you get the required information so it's from so what are the steps we did we imported the service into the component you can use it in any number of components okay there is no fixed thing that you can use only in one component or two components or anything you can use it anywhere in any component you want once you have imported the service create an instance in the constructor then call the method using the instance of the service then bind data the way you want in your ui now this is not necessary so i will not write it you can bind it in ui you can do it more logical processing in your component that depends upon your application but you get an idea that you can get the dynamic data all right so that's all uh it is there for you to learn today in the next episode i will start you with http client which is the way you talk to all the backend dependencies or api calls to make the rest api endpoint talk to them send data receive data etc i hope you like my work and tutorials if you do please do consider buying me a coffee at buy me a coffee.com slash arc tutorials stay tuned for the next episode where i will start with http client and will start interacting with the backend apis thank you so much for joining see in the next episode

Channel: ARC Tutorials

Views: 5,601

Keywords: angular services tutorial, angular 11 services, angular 10 services tutorial, angular generate service tutorial example, angular component interaction, angular component tutorial, Angular component tutorial, Angular 10 Tutorial, Angular 11 Tutorial, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular service tuts

Id: U71G375Aw6E

Length: 19min 0sec (1140 seconds)

Published: Tue Apr 27 2021