Angular services tutorial

Text version of the video

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.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

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.

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

[khalidkhan]

You are the best human being in this world, much appreciate your hard effort. Thank you venkut. Everyday i am watching your videos and learning new things. God bless you.

[someshnukala]

God has sent a Technology messenger sri sri Kudvenkat sir to enlighten the students. Pranam to your feet sir. You are really great sir. No words.
Guru brahma Gurur Vishuhu Gururdevo Maheswaraha
Gurur Sakshath Parabrahma thasmaisri Gurave namaha

[tigapuramramesh]

Thanks sir ji, I saved lot off money and time by watching your videos

[ishanbhawantha]

You are the best human being in this world, much appreciate your hard effort. Thank you venkut. Everyday i am watching your videos and learning new things. God bless you. (* 2)

[vishalshira]

It is one of the best learning channel, I have ever seen. Complex topics are explained in very easy way, which helps go into the depth of subject. Thank you very much !!

[sanmani]

You are a great teacher, u r an example of a good teacher

[kamdemkakengne]

Thank you very much Venkat! You are a great teacher!

[sanmani]

Its gives confidence to me that i can do angular project alone

[aasthawadhwa]

Clearly explained the concept, very well done

[Naveenkumar-vzyc]

Hi Sir,
Your Tutorials are awesome...
I need WPF Turorial Videos sir.
Waiting for a long time.

[AKA-]

venkat how did you learn this much information so fast, by just reading documentation and practicing?

[vissumumbai]

Hi Venkat,

I Followed all of the tutorials ex: WebAPI, Angular js, bootstrap that you are briefing with PPT's and Videos in you tube. Your explanation is awesome really no words to say for your great effort and hard work.

I have a quick question in Angular 2. I saw employe.component.js and employe.component.map files for each component that you are creating employe.component.ts.

Can you please brief me why these two additional files are creating what is the main purpose.

[excitingmonkey]

It would be great if you provide your next video with services fetching data from a public API like twitter or graph API and provide details on how to authorise them . I'll be glad if you consider this

[bhavinjadav]

I am developing on angular 2, first project on angular. Need to call ajax, post and get both and need to set data to the parent component.
So, I hope you are going to explain how to call HTTP Get, Post.

[miteshvora]

Hi venkat, 1. does consuming the service in angular 2 uses closures ?? 2. Sometimes need to clear cache after making changes and refresh of page. How can it be avoided ???

[mohamedsameel]

Hello Sir, I tried to consume my local web api, but it returning error says

[preethamv]

Hello sir, The tutorials are very much useful to everyone.
The question i wanted to ask is, is it possible to use jquery in type script/ angular js ?
if so can you please teach us how ?
Thank you.

[ShahrukhKhan-jjhx]

sir, I want to learn JSON features of SQL server kindly make videos for these topics