Angular Services Tutorial | Angular Services Explained | Angular Tutorial For Beginners |Simplilearn

hi guys welcome back to another video by simply learn in today's video we're going to learn all about angular services now if you haven't watched our videos on angular forms or components then i highly recommend you watch them first but before we begin if you haven't subscribed to our channel already make sure to hit the subscribe button and the bell icon to never miss an update from us so now without further ado let's begin i'm sure you all know that an angular app is divided into several components for example you have the logo component you have the sign in component an image component and say a create account component now these components are standalone and each of them represents a part of the user interface now imagine if all of these components performed common tasks for example accessing the database or rendering images on the view tasks like those now instead of having to write the code for every component you can just make use of angular services now the service can be written once and they're injected into all of these components now a service could be a function it could be a variable or a feature that an application needs so the main use of a service is to write code once and avoid rewriting of it now the same code can be injected into several components that make use of this particular service but what are angular services so normally components are used to ensure a good user experience now that is the extent of it components make sure that whatever is being rendered onto the screen is right and pristine but in order to execute tasks we make use of services and this approach is ideal so a component can basically delegate tasks like fetching data from the server validating user input or logging directly to the console to a particular service and these tasks can be made available to any component in the app so now let's talk about a few features of angular services now typically an angular service is simply a typescript class with an at injectable decorator this decorator tells angular that the class is a service and can be injected into components that need that service now they can be used to share the same piece of code they can also inject other services as dependencies now these services hold valuable business logic and can also be used to interact with the backend now for example if you want to make ajax calls you can have methods to those calls in the service and then use it as a dependency in files and as mentioned earlier it can be used to share data among several components in angular services are singleton meaning that only a single instance of a service gets created and the same instance is used by each and every building block in the application and finally a service can be registered as a part of a module or it can be registered as a part of the component now to register it as a part of the component you'll have to specify it in the providers array of the module i'm sure you'll understand the concept of services better if we look at a simple demo so in the next section we're going to look at a demo but before that let me tell you the use case so basically in the demo what we'll do is we'll create an employee details list say for example you will have employee information like name employee id and their email id we'll create a database of say three employees and on the browser when you click on the employee button it displays the information about that particular employee and at the end we can also add information to the employee's details so without delay let's head to our vs code and start learning angular services hands-on so here first i've created a folder called demo underscore angular within which i've created a file called hello world so this was previously used for a tutorial so the name is just hello world so don't get confused however when you look at the browser i've written an initial code here which is angular services and i have the simply learn logo so back in my browser this is what the ui looks like so uh to so to understand the concept of angular services first let's go ahead and create a component so here i'm going to say ng g c e info i'm creating a component for employee information so as you can see inside my app file we have the e info component which has these four files so if you're wondering what exactly components are and how this is working then i highly suggest you watch our components video first so now let's go ahead and create a service so i'm just typing in the command ng g service here g stands for generate and we're generating the service and the name of the service that i'm providing is data so now it creates a service which is going to be a dot ts file so you can observe that dot service is appended this indicates that it is a service all right as mentioned earlier we have to display the employee details correct so for that in my component.ts file i'm going to create an array that displays the employee information in our case i'm creating uh three different employee records so for that i'll have three different arrays so let me just call the arrays info received one indicating this is the information of first employee and this is going to be of type string and i'll just initialize it to null for now all right and i'm going to create two other arrays and let me just change the name of that is all right so now to retrieve the information i'll have to create a method again i'm creating three methods for the three different employee records so i'm going to call the array get info [Music] from service one indicating it's again for employee one and i'm just going to leave it as it is for now i'll tell you how the information is being received and i'm gonna do the same for the other two uh employee records so let me just copy paste and here i'm just gonna change the name of the methods all right so this is the initial code for retrieving information however we have to create the employee record in our service so back here in my data.ts file what i'm going to do is i'll create three different records for the employees so let me say info1 which is going to be of type string all right and let me just give a random names say for example i say john matthew [Music] all right and employee id say e 354 and let me just give a random email id and say jm at abc.net all right so i'm gonna do the same for the other two uh records so let me just create another one and call it info two and the name i'm providing is say rob listen with a different employee id say 673 and i'm just going to make it rw at abc.net and another record for employee number three and i'm just gonna say rose adams [Music] with some employee id and an email id all right so now we've created the employee records so what i have to do is i have to create a method that returns these employee records correct so for that i'm just going to create another method called get info 1 which is of type string and it just returns this dot info one all right similarly for the rest of the two records i'm just gonna retrieve them [Music] let's say in four two and get in for two and again i'm just gonna make it get in four three and this is going to return in 4 3 all right so i'm sure you've got an idea as to what i'm doing here so basically this information is going to be retrieved in our employee component correct so for that i'll have to make use of dependency injection so here i'll have to import the service that i've created so let's go ahead and say import [Music] the service was data service all right from slash data dot service all right now the main reason we're doing this is to tell angular that when the component is created the service instance is also created and this instance is being used to perform particular tasks and for that we'll also have to include this in our providers area so here let me just say providers and let's say data service now to access this instance of service that is created we make use of a property so this property basically allows us to access all the methods that are defined in the service class all right so here in my constructor method i'm just gonna say private and you can give any name for your property and here i'm just giving the name d service all right and which is of type data service all right so now with the help of this property i can retrieve information from the service class so here i'm just going to say this dot info receipt equals this dot d service dot get info one all right so what it basically does is that it calls the get info one method in our service which returns the information of the first employee and this information is being stored in the array that is info received one so similarly for the next two methods i'm just going to use the same piece of code let me just change it here and same for the third one all right so now that we have the logic behind what is being displayed let's go ahead and create the ui for it here in my html file i'm going to create an unordered list [Music] and now i'm going to make use of the ng for director to uh basically loop over the record and display everything so for that i have to make use of a particular variable so i'll just say let info of info received so um you can check here in our ts file the array is info received correct so i'm going to make use of the same array here and since it's displaying the first in employee record i'm just going to say info received one all right and let me just create a class a bootstrap class of list group item of list group info and we're just gonna have to interpolate info all right that is basically going to display what the information holds what the info variable holds all right and here as well let me create a bootstrap class called list group all right i hope this was clear to you so basically here the information is being retrieved with the help of this method right that is get info from service one so in order to call this method we'll have to bind it with a button all right so that's what we're going to do let's just copy this and here i'm going to create a button all right and the type is button with name button again all right so i'm going to bind it with the click event so what happens is that when i click on it this particular method gets called all right i'm just pasting the method here and finally let's just provide the name employee 1 for the button all right so uh similarly we'll have to do the same for the other two records as well let me just make this look better all right so uh what i'm gonna do is i'm just gonna paste the same twice and here i'm gonna just change the names i'll say 2 here and this is again for employee 2. and i'm going to change this as well it's going to be employee i'm sorry it's going to be in 4 received 2 this is going to be in 4 received 3 and finally employee 3 all right and lastly we'll have to include the selector that is app hyphen e info in our main component or html so here let me just create a custom tag all right and save this so now let's go back to our browser and see what it looks like so here you can see that three different buttons have been created for employee one two and three and when you click on it it retrieves the information that is the name the employee id and their email ids so we've successfully created an angular service and injected it into our component to retrieve information all right so now the last part of the use case that we discussed was uh to add another detail that is the employee detail in the record all right so for that we'll have to take input from the user and in our case we're taking the location now uh we're also adding the same location for all three employees so this is what services do you know they can be used to update modify alter anything that happens in the back end so you can tweak the code a little bit and you can change the entire uh view of your application you can add information you can delete you can retrieve you can alter etc all right so for that what we're going to do is back in the html file we'll create a form that basically takes the input so i'm just going to say [Music] form all right within which i'm going to be defining a div class [Music] within which i'm going to be defining a div tag inside of which i'll have the input tag of type text and the name i'm going to be providing it will be location all right and we'll have a value and i'll just leave it blank and finally i'll have ng model so if you're confused as to what i'm doing here then i suggest you watch the angular forms uh video it basically teaches you uh how to work around with angular forms all right and now after this we're gonna have a button so let me say button [Music] all right [Music] and i'm gonna just say add info okay all right so now when i'm creating the form i'll also have to create a template variable to access all the values within my form so if i have to access the location then i need a variable to access it so here let me just go ahead and create a template variable let me call it frm and i'm going to make use of the ng form directive so this tells angular that uh this variable can be used to access all the values within the form and since i'm using form here i'll have to import it in my module file so here i just go ahead and say import forms module from angular forms and here in my imports [Music] i'll just say forms module okay so i've imported the forms module so now back in my html file what i'm going to do is that i'll have to make use of this template variable to update my information correct so i'll have to create another method that will update information into the records so here in my component.ts file i'll have to create another method and i'm going to call this method update info method all right and uh this basically takes in the template variable that is form and let me just specify any okay and what this is going to do is that it updates the record correct so i'm going to say this dot d service dot add info now you must be wondering what add info is i'll just let you know in a minute and and the value that i'm going to be passing will be the value that you've provided as an input which is nothing but form dot value dot location all right so now what happens is that i'll have to again specify what add info is and this method is going to be defined in the service file correct so here i'm going to create another method that's add info and i'm going to pass info as a parameter and what this method does is that it just pushes the information or the data into the arrays so since i'm going to be pushing the same information into all of these arrays that is info one in photo and info three i'm just going to say this dot info one dot push off info [Music] all right and uh the same for the other two areas as well let me just change these all right so what exactly i'm doing is that i have i have a method called add info which gets information from the component all right and it basically pushes this information into the array and also i have to return it so i'll say return this dot info [Music] 1 all right and i'll save it and here we have another method called update info which basically calls uh the add info method in our service and passes the value to it and in my html file also note that the button type here is submit and not button so what happens is that now the value that we've received as an input has to be uh passed on to the method that is update info so here i'll say ng submit and i'm going to call the method update info and i'm going to pass frm as the argument and now let's save this and execute so all right here you can see that we have an input field and a button saying add info so now i can just go ahead and see type usa and when i say add info and when i check on my employee one details usa has been added to the list and same goes with employee 2 and employee 3. so i hope this simple demo on angular services helped you understand the concept better i highly recommend you play around and explore other possibilities so with that we conclude the session i hope it helped you thank you so much for being here and watch out for more videos from us until then keep learning and stay tuned to simply learn hi there if you like this video subscribe to the simply learn youtube channel and click here to watch similar videos turn it up and get certified click here

Channel: Simplilearn

Views: 11,726

Keywords: angular tutorial For Beginners, angular tutorial, angular services, angular services tutorial, angular services and dependency injection, angular service best practices, what is angular services, what are angular services, angular services http, angular services unit testing, angular services http post, angular service json, angular services http get, angular service singleton, angular training, angular course, angular, learn angular, simplilearn angular, simplilearn

Id: 0v1mQB4BCIo

Length: 26min 40sec (1600 seconds)

Published: Wed Sep 23 2020