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.
angular.module('myApp').controller('myctrl,
function($http,$timeout){
//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:
angular.module('myApp').service('helloService',function(){
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:
angular.module('myApp').controller(myctrl,
function(helloService){
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:
angular.module('myApp').service('helloService',function($timeout){
this.sayHello=function(name){
$timeout(function(){
alert('Hello '+name);
},2000);
}
});
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:
angular.module('myApp').controller(‘myctrl’,
function(helloService){
helloService.sayHello('AngularJS'); // Alerts Hello AngularJS
});
angular service complete example
{{msg}}
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:
angular.module('myApp').factory('helloService',function(){
return {
sayHello: function(name){
alert('Hello '+name);
},
echo: function(message){
alert(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:
angular.module('myApp').controller(‘myctrl’,
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:
angular.module('myApp').factory('noteFactory',function($http){
//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
}
}
});