Angular Tutorial - 19 - Using a Service

alright guys in this video let's implement the three steps to use a service in angular let's begin with step one creating the employee service now to generate a basic service template we use angular CLI so in the integrated terminal within the project folder run the command ng G for generate s for service and followed by name of the service in our case it is the employee service when the command completes you should have a new file in the source folder employee dot service dot TS and if you take a look inside you have the basic template for an angular service now what is our service responsible for to provide the employee data so in the employee service class let's create a new method get employees and we just return the array of employees and in the list and detail components initialize the employees array to an empty array empty array in the list component empty array in the detail component so the service now has a method that returns the employees our first step is complete we have created our service the second step is to register the service with angular's injector if we don't register the service will be just another regular class according to angular now there are multiple places where you can register the service but the place you register is important because angular has a hierarchical dependency injection system so consider the example application it has app module the app module has app component the app component has two components nested inside employee lists and employee detail here is how angular's di system will work if you register in the employee list component the service can be used by the employee list component and its children no other components not even the employee detail component can use it so this is not a good choice now if you register with the app component the app component and all its children can make use of the service this works fine but each module is usually a feature area in your application and might grow so it is better if you register the service at the module level by doing so components under the app module can use it and to register a service we use the providers metadata so let's go back to visual studio code in the app module include employee service in the providers array also make sure to import employee service so our second step is now complete we have registered a service with angular's injector using the providers metadata the third step is to mention the dependency for this service in the component that needs it and if you remember from the last video the dependency is specified in the constructor so let's go back to employee list component in the constructor I'm going to use type scripts shorthand syntax to make use of the dependency so in the constructor private underscore employee service of type employee service and we also need to import it so now we have a local variable underscore employee service that gives us an instance of the employee service next we need to make use of the service instance and fetch the employee data and the code for that goes inside the ng on in it life cycle hook we haven't talked about lifecycle hooks but the ng on in it hook gets called once the component has been initialized so inside the art init method this dot employees is going to be equal to this dot employee service dot get employees so here is how this works we have the employee service class employee service class has a get employees method that returns the employee data so in our Employee List component we get hold of an instance of employee service which is underscore employee service and call get employees method and assign the returned data to the employees array that belongs to the Employee List component now let me do the exact same thing in the employee details component private employee service of type employee service and then in the ng on init method this dot employees is equal to this dot employee service dot get employees so now if we save this and restart our application so NPM start take a look at the browser and we still have the list and details displayed but this time we are doing it much more efficiently of course we might have different views to display the list and details and also make use of routing to switch between the views but I wanted to focus solely on how to use a service and this is how you do it create a service register it with the injector and declare it as a dependency in the component that wants to use it alright one last topic of discussion is about the injectable decorator this right here why is it required well injectable decorator tells angular that this service might itself have injected dependencies so if you ever want to inject a service into another service injectable decorator is a must right now the employee service doesn't have dependencies so the injectable decorator is not necessary but the employee service might have dependencies in the future and that is why it is recommended to add this injectable decorator as soon as you create a service class and since angular CLI follows best practices it adds the injectable decorator when you generate a new service now you might ask so how come we don't use the decorator on the employee list or employee detail component we don't see an injectable decorator here right and the class still makes use of the employee service well that is because components have the component decorator that lets angular know hey I might have dependencies and might make use of the dependency injection system but for a service we don't have that component decorator if you remove the injectable decorator as well it becomes a plain type script class nothing to do with angular and that is why injectable is required only for a service and not a component alright that is what I wanted to cover about services let's take a look at HTTP and observables in the next video thank you guys for watching don't forget to subscribe and I'll see you guys in the next video

Channel: Codevolution

Views: 394,240

Rating: 4.921659 out of 5

Keywords: Angular, Angular Tutorial for Beginners, Using a Service in Angular, Angular Tutorial, Angular 5 Tutorial, Angular 5, Angualr 5 Tutorial for Beginners, Angular 6, Angular 6 Tutorial

Id: 69VeYoKzL6I

Length: 8min 39sec (519 seconds)

Published: Mon Dec 25 2017