angular services tutorial with examples | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

There are various inbuilt services in angular like $location, $timeout, $root-Scope etc.The main benifit of these service components are that they hold some inbuilt logic that’s required at multiple points within our application. Although services and factories are all used to accomplish the same task (encapsulating repetitive logic), there are subtle differences between them.

Services and factories are all injectable types(using dependency injection).they can be injected into controllers and other services through Dependency Injection.

How to create custom services in angularjs or angular service

The main thing which has to keep in our mind that angular Services are Always Singletons(They are created once and used in various places(controllers) of our application).To do the same we create instance of service and used in throughout

Angular never crate two instance of same service.


For example if user logged successfully in your application and want to retrieve his concerned data through his username and then we can store his username in service instance and used in other controllers where we want it.


Now let me take an simple example to use angular inbuilt services ($http and $timeout). Following is the general syntax to use them.




//use $http, $timeout here



Note: angular http service is used for server communication using http get and post method.


Same way, we can also create our own custom services that encapsulate the business logic or function specific to our apps. Let’s see how we register a service in a module:



this.sayHello=function(){ // define an instance method

alert('Hello!! Welcome to services.');




As we can observe that we are using a service method in angular module which is registering a service named “helloService” .The first argument to this function is the service name. The second argument is a constructor function. It can have usual instance variables and functions.

Now, in a controller, if you ask for this service AngularJS constructs an object by

calling the constructor function with the new keyword. This object is then injected

Into your controller. If we want to use our helloService in a controller we can

do this:



helloService.sayHello(); // helloService is the service object.It has sayHello function.



Above service is used to responded hello message only .

Now Let’ see that how we can inject other angular service when using or calling our custom service.

For example, custom service can depend on the $timeout service and defer the alert by an interval you specify. The service can be rewritten as follows:





alert('Hello '+name);





Our service, here, is dependent on the built-in $timeout service. When AngularJS invokes this constructor function it’ll pass the dependency i.e. $timeout. Now the instance method has been modified to take a name and show a customized Hello message. With the help of $timeout we display the message after a two-second delay. Finally, we can inject this into our controller and use it, as follows:





helloService.sayHello('AngularJS'); // Alerts Hello AngularJS



angular service complete example



Live Demo

How to use angular factory to create custom service in angularjs

In angularjs a factory is another injectable type service provider. Effectively it’s the same as a service. However, it’s more configurable and manageable , by which I mean it gives you the freedom to determine what to instantiate and return from the factory. As its name suggests, it’s

a factory for a service.


You register a factory by calling the factory() function on angular.module(). For example, we can implement helloService as a factory as follows:



return {

sayHello: function(name){

alert('Hello '+name);


echo: function(message){






In above case the first argument to factory() is obviously the name you want to use for the

factory. The second argument is a normal function (not a constructor function), which can return an object or a function. When we ask for the factory as a dependency in a controller/service, AngularJS invokes the factory function (the second argument to factory()) and injects the value it returns. The value, as I said above, can be a function, object, or value. In our case, we are just returning an object with two instance methods. So, this object is assigned to the variable helloService while instantiating the controller. In simpler terms, your service is nothing but the return value obtained from calling the factory function.

The above factory can be used in a controller in exactly the same way as services:



function(helloService) {

helloService.sayHello('Hello ! AngularJS guys'); //Hello! AngularJS guys

helloService.echo('I promote AngularJS'); //alerts I promote AngularJS



Usually, the object you return from the factory function, has several functions that perform different tasks. For instance, in a note-taking app you can have a noteFactory. The instance returned by the factory function may have functions such as:



//declare dependency on $http

return {

addNote: function(note){

// save the note. may be use $http to persist on server


updateNote: function(note){

//update note


getNotes: function(){

//get all notes


getNote: function(noteId){

//get a single note