AngularJS Service and Factory Tutorial with Example

AngularJS Service and Factory Tutorial with Example

AngularJS Service and Factory

AngularJS provides many more useful inbuilt services for example Like, $https:, $route, $window and $location etc.

All angularjs internal services starts with $ sign.)

AngularJS most supports the concepts of “Separation of Concerns” slogan using services architecture.

There are two most useful ways to create a service.

  • factory
  • service




AngularJS internal services

module.controller('myfirstController', function($http){
	//...something code
});

module.controller('mysecondController', function($window){
	//......something code
});

AngularJS custom services : example

var module = angular.module('myapp', []);
module.service('userService', function(){
	this.users = ['Ravi', 'Jignesh', 'Harshad'];
});

AngularJS factory Method : Example

module.factory('userService', function(){
	var fac = {};
	fac.users = ['Ravi', 'Jignesh', 'Harshad']; 
	return fac;
});

AngularJS Service vs Factory : Example

module.service( 'serviceName', function );

module.factory( 'factoryName', function );

what is factory?

AngularJS factory is a simple Javascript function(js function) which allows you to add some (logic data and return)logic before creating the object(recreated object). and It returns the created new object.

Also Read :   Add Dynamic Table Row Dynamically using AngularJS

AngularJS Factory Syntax with Example

Factory Syntax

    var module = angular.module('ng4App', []);    
    module.factory('yourserviceName', function(){    
        return serviceObject;   //return something...
    });    




Factory Example

<html>      
<head> <!-- www.live24u.com -->      
<title>My first AngularJS Factory and Service code</title>      
<Script SRC="https://w2way.com/lib/angular.js">      
</script>      
<Script>      
//Simple Defining Factory      
var ng4App = angular.module('app', []);      
      
ng4App.factory('calculatorService', function(){        
    var calculator = {};       
    calculator.multiply = function(a, b) { return a * b };      
    calculator.add = function(a, b) { return a + b };     
    calculator.substract = function(a, b) { return a - b };     
    calculator.divide = function(a, b) { return a / b };     
    return calculator;        
});      
       
ng4App.controller('CalculatorController', function($scope, calculatorService) {      
    $scope.do_simple_mul = function() {     
        $scope.answer = calculatorService.multiply($scope.number,$scope.number);      
    }      
    $scope.do_simple_add = function() {     
        $scope.answer = calculatorService.add($scope.number,$scope.number);      
    }     
    $scope.do_simple_sub = function() {     
        $scope.answer = calculatorService.substract($scope.number,$scope.number);      
    }     
    $scope.do_simple_div = function() {     
        $scope.answer = calculatorService.divide($scope.number,$scope.number);      
    }     
});      
</script>      
</head>      
<body style="background-color:#DDE4E9;">      
<fieldset style="background-color:#DDE4E9;">            
    <legend>AngulerJS Factory Example</legend>         
<div ng-app="app">      
    <div ng-controller="CalculatorController">      
        Enter your Valid Number:      
        <input ng-model="number" type="number">      
        <button ng-click="do_simple_mul()">Multiply(*)</button></br>   
    
      Enter your Valid Number:    
        <input ng-model="number" type="number">      
        <button ng-click="do_simple_add()">Addition(+)</button> </br>   
    
      Enter your Valid Number:    
        <input ng-model="number" type="number">      
        <button ng-click="do_simple_sub()">Substraction(-)</button> </br>   
    
      Enter your Valid Number:    
        <input ng-model="number" type="number">      
        <button ng-click="do_simple_div()">Division(/)</button>    
          
      <p>Your Calculator Answer <mark>: {{answer}}</mark></p>     
    </div>
<p>
	<hr/>
	<h1>Solution of AngularJs All Problems For live24u.com</h1>
	<h3>
	<a href="http://live24u.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of live24u.com </a>
</p>
</div>      
      
</div>    
</fieldset>     
</body>      
</html>  

   

Add a Comment

Your email address will not be published.