Angular services tutorial

Published: 02 August 2017
on channel: kudvenkat

172,532

675

Text version of the video
http://csharp-video-tutorials.blogspo...

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
   / @aarvikitchen5572

Slides
http://csharp-video-tutorials.blogspo...

Angular 2 Tutorial playlist
   • Angular 2 tutorial for beginners

Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic

Tags
angular2 service tutorial
angular2 service best practices
how to call service in angular 2
angular 2 service dependency injection
angular 2 service injection
angular2 service ngoninit
angular2 service oninit
angular2 service singleton example
angular 2 service vs component

Why do we need a service in Angular
A service in Angular is generally used when you need to reuse data or logic across multiple components. Anytime you see logic or data-access duplicated across multiple components, think about refactoring that piece of logic or data-access code into a service. Using a service ensures we are not violating one of the Software principles - DRY ((Don't repeat yourself). The logic or data access is implemented once in a service, and the service can be used across all the components in our application.

Without the service you would have to repeat your code in each component. Imagine the overhead in terms of time and effort required to develop, debug, test and maintain the duplicated code across multiple places instead of having that duplicated code at one central place like a service and reusing that service where required.

Creating a service in Angular : We will be working with the same example that we have been working with so far in this video series. Add a new TypeScript file to the "employee" folder and name it employee.service.ts. Copy and paste the following code. At the moment we have the data hard-coded in the service method. In a later video we will discuss retrieving data from a remote server using HTTP.

Difference between constructor and ngOnInit
A class constructor is automatically called when an instance of the class is created. It is generally used to initialise the fields of the class and it's sub classes.

ngOnInit is a life cycle hook method provided by Angular. ngOnInit is called after the constructor and is generally used to perform tasks related to Angular bindings. For example, ngOnInit is the right place to call a service method to fetch data from a remote server. We can also do the same using a class constructor, but the general rule of thumb is, tasks that are time consuming should use ngOnInit instead of the constructor. As fetching data from a remote server is time consuming, the better place for calling the service method is ngOnInit.

So coming back to our example, the dependency injection is done using the class constructor and the actual service method call is issued from ngOnInit life cycle hook as shown below

On this page of the site you can watch the video online Angular services tutorial with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 02 August 2017, share the link with friends and acquaintances, this video has already been watched 172,532 times on youtube and it was liked by 675 viewers. Enjoy your viewing!

994