Purpose of AngularJS Services

Question

I'm new to AngularJS. I'm currently looking at the services. Some of these services look like the replace functions already available in JavaScript. For instance, the $timeout service. Why does AngularJS have these services? Is there a technical reason? Are there any advantages to this approach? I just don't understand the need for using these services.

Thank you for any help.

Answer 1

A service is a function or an object, with a set of methods, that could be used by several components (controllers, directives, filters, other services) of your application.

The main advantage that "wrapping" services like $timeout or $window have over their global functions equivalent is that they're injected by Angular, and can thus be mocked in unit tests, i.e. replaced by fake implementations.

Read the chapter about dependency injection in the angular documentation. Regarding the $timeout service in particular, its documentation explains what it does in addition to the native setTimeout() function.

Answer 2

Angular uses dirty check -- it keeps track of all variables that should be updated automatically and in case of any changes iterates through them as many times as needed (as there can be interdependence between observing variables). (To be precise if there are too many iterations something wrong is probably with your code and exception is raised).

The main reason behind $timeout is to signal to Angular engine that you will be making some changes to the observing variables in the callback. In case you would call normal timeout there is a way to inform Angular about those changes by calling e.g. $scope.$apply(function() {...}).

The other big reason, as @JB Nizet stated is that mocking is much easier.

Answer 3

Service is a way to store persistent information over your application. unlike the $scope, which is an new child of $rootScope per each route\controller.

The purpose of the Angular-specific implementation of already existent functions, is to make your life and work easier, by automatically telling angular to register your changes, and apply them to the current scope at the next $digest iteration.

I'll be happy to address any other questions.

Good luck with Angular! :)

I will now create an example plunk to emphasize the idea to you

UPDATE: This is the plunker: http://plnkr.co/edit/mVmhZpEdsZDQ0MUQpFJ7?p=preview

I used ng-change and the native change keyup event to explain the point.

while using the angular built in ng-change directive requires no additional effort nor code, using the native events requires wrapping everything in the scope.$apply function/ calling scope.$digest manually. (run the code and see for yourself)

Answer 4

Check out this older answer which covers Services, Providers and Factories.

AngularJS: Service vs provider vs factory