AngularJS Services and Type of Services

AngularJS Services and Type of Services

AngularJS Services and Type of Services:Services are javascript functions and are perform to do a specific tasks only. This makes them an individual entity which is testable and maintainable. Controllers, filters can call them as on requirement basis. Services are normally injected using dependency injection mechanism. AngularJS provides many specific services for example, $http, $window, $route, $location etc. Each service is responsible for a specific task for example, $http is used to make ajax request to get the server data. $route is used to define the routing information . The location provider service is used for creating view location. Inbuild services are always prefixed with $ symbol. There are two type service in angular js like:

  • factory
  • service

Using factory Service

	<script>
     mainApp.factory('ConciteService', function() {     
         var factory = {};  
         factory.addstring = function(a, b) {
            return a +' '+ b ;
         }
         return factory;
      }); 
    </script>

Using service method

	<script>
     mainApp.service('CalService', function(ConciteService){
            this.square = function(a,b) { 
            return ConciteService.addstring(a,b); 
         }
      });
    </script>

AngularJS Service Example

       <html>
        <head>
           <title>AngularJS Service Example</title>
           <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        </head>
        <body style="background-color:#FF6633;">
           <h2>AngularJS Service Example</h2>
           <div ng-app="mainApp" ng-controller="ConciteController">
              <p>Enter a First: <input type="text" ng-model="first" /></p>
              <p>Enter a Last: <input type="text" ng-model="last" /></p>
                
              <p><button ng-click="square()">Display-Full</button></p>
              <p>Result: {{result}}</p>
           </div>
           <script>
             
              var mainApp = angular.module("mainApp", []);
              mainApp.factory('ConciteService', function() {     
                 var factory = {};  
                 factory.addstring = function(a, b) {
                    return a +' '+ b ;
                 }
                 return factory;
              }); 
            
              mainApp.service('CalService', function(ConciteService){
                    this.square = function(a,b) { 
                    return ConciteService.addstring(a,b); 
                 }
              });
        
              mainApp.controller('ConciteController', function($scope, CalService) {
                    $scope.square = function() {
                    $scope.result = CalService.square($scope.first,$scope.last);
                 }
              });
           </script>
        
        
        </body>
        </html>
angularjsserviceexample

angularjsserviceexample

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates