AngularJS - Services

A JavaScript object that provide some sort of the service that can be reused within an angular application.

Angular has inbuilt services and you can create your own custom services too. Some examples of inbuilt services are $http - which is used for making AJAX calls and $log to log an object to the console. AngularJS services have properties and methods like any other services (ASP.NET Web service and WCF service).

Usually services in AngularJS are stateless.

Why do we need services in AngularJS?

The main task of the controller is to build the model for the view. It shouldn't have the complex computing logic for the model since it breaks the SRP (single responsibility Principle - that states that an object should have only one reason to change). This is the reason we need services so that the addition complex logic can be moved to the services. Basically, Service encapsulate reusable logic that doesn't belong to directives, filters, models, & controllers. 

Benefits:

• Re-usability - For example anytime an AJAX call is being made the $http service is being called. The $http service is used simply by injecting into the object that needs this service. 
• Maintainability- This makes Angular application easy to maintain as the reusable components are encapsulated in their own service.
• Dependency Injection - Services can simply be injected into the controllers or any other services which need them.
• Testability - Makes unit testing easy as we can mock the services in the controller or the object that are using the services.

Creating Custom Service: 

For creating custom service either use Angular object method service or factory. The referecne to service scrip file needs to be added to the html page.

Example: Lets say we need to convert the input string to a BCD string.

Define Service: service.js

var myApp = angular.module("myApp", [])

                                   .factory("myService", function(){

                                         convertToBCD: fucntion (input) {

                                               if(!input) {

                                                   return input;

                                               }

                                               var output = '';

                                               // add some logic for converting number to BCD string

                                               return  output;

                                        }

                                    });

The first parameter is the name of the service in  our case its is myService and second is the anonymous function. The service has one method convertToBCD that takes input as a parameter and return an output by converting number to BCD format.

Using services in Controller: controller.js

var myApp = angular.module("myApp", [])

                                   .controller("myController", function($scope, myService){

                                          $scope.convertToBCD = fucntion (input) {

                                          $scope.output= myService.convertToBCD(input);

                                          }

                                      });

Using controller in HTML page: number.html

     <div ng-controller='myController'>

              <div>

                       <table>

                             <tr >

                                    <td> 

                                           <input type="text" ng-model ="input" />

                                    </td>

                                    <td>  

                                          <input type="text" ng-model ="output" /> 

                                    </td>

                                    <td>

                                         <input type ="button" ng-click="convertToBCD" value ="Convert to BCD" />

                                   </td>

                       </table>

              </div>    

    </div>