Angularjs Examples

AJS Examples


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