AngularJS Factory

In AngularJS services can be created using service, factory and provider. Service object contains few useful functions that you can call from Controllers, Directive and Filters etc.

A factory is a simple Javascript function which allows you to add some logic before creating the object. It returns the created object.

Syntax

var module = angular.module('myapp', []);  
module.factory('serviceName', function(){  
    return serviceObject;  
});

AngularJS Factory Example

<html>    
<head> <!-- www.techstrikers.com -->    
<title>My first AngularJS Factory code</title>    
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">    
</script>    
<Script>    
//Defining Factory    
var app = angular.module('app', []);    
    
app.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;      
});    
     
app.controller('CalculatorController', function($scope, calculatorService) {    
    $scope.doMultiply = function() {   
        $scope.answer = calculatorService.multiply($scope.number,$scope.number);    
    }    
    $scope.doAddition = function() {   
        $scope.answer = calculatorService.add($scope.number,$scope.number);    
    }   
    $scope.doSubstraction = function() {   
        $scope.answer = calculatorService.substract($scope.number,$scope.number);    
    }   
    $scope.doDivision = 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 a number:    
        <input ng-model="number" type="number">    
        <button ng-click="doMultiply()">Multiply</button></br> 
  
      Enter a number:  
        <input ng-model="number" type="number">    
        <button ng-click="doAddition()">Addition</button> </br> 
  
      Enter a number:  
        <input ng-model="number" type="number">    
        <button ng-click="doSubstraction()">Substraction</button> </br> 
  
      Enter a number:  
        <input ng-model="number" type="number">    
        <button ng-click="doDivision()">Division</button>  
        
      <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">   
        Answer: {{answer}}</p>   
    </div>    
</div>    
    
</div>  
        </fieldset>   
</body>    
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS Factory

AngularJS Factory Example

Recent Articles