While we write code for a project, we used to keep all utility functions in one file and access them from all other files. Here in AngularJS we need to write those utility functions in a Provider or Factory or Service. We will go with example. Find HTML markup below for example

Markup

Here angular app is myApp and controller is MyCtrl and hellos is variable contains the utility function output
<html ng-app="myApp" ng-controller="MyCtrl">
....
<div>
    {{hellos}}
</div>
....
</html>

Utility Functions In Service 

When you’re using Service, AngularJS instantiates it behind the scenes with the ‘new’ keyword. Because of that, you’ll add properties to ‘this’ and the service will return ‘this’. When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service. So write your utility functions using 'this', those functions will be available to controllers. Take a look at below code 
var myApp = angular.module('myApp', []);

//service style, the simplest one
myApp.service('mathUtilFromService', function() {
    this.findSquare = function(num) {
        return num * num;
    };
});

function MyCtrl($scope, mathUtilFromService) {
      $scope.hellos = mathUtilFromService.findSquare(4);
}
You can assign values to variable in service, the utility functions can make use of those variables.
var myApp = angular.module('myApp', []);

//service style, probably the simplest one
myApp.service('mathUtilFromService', function() {
    this.factor=0;
    this.multiplyWithFactor = function(num) {
        return this.factor * num;
    };
});

function MyCtrl($scope, mathUtilFromService) {
      mathUtilFromService.factor = 2;
      $scope.hellos = mathUtilFromService.findSquare(4);
}

Utility Functions In Factory

When you’re using a Factory you create an object, add properties to it, then return that same object. When you pass this factory into your controller, those properties on the object will now be available in that controller through your factory. 
var myApp = angular.module('myApp', []);

//factory style, more involved but more sophisticated
myApp.factory('mathUtilFromFactory', function() {
    return {
        findSquare: function(num) {
            return num * num;
        }
    };
});

function MyCtrl($scope, mathUtilFromFactory) {
      $scope.hellos = mathUtilFromFactory.findSquare(4);
}

Utility Functions In Provider

Providers are the only service you can pass into your .config() function. Use a provider when you want to provide module-wide configuration for your service object before making it available.
var myApp = angular.module('myApp', []);

//provider style, full blown, configurable version     
myApp.provider('mathUtil', function() {
    this.$get = function() {
        return {
             findSquare: function(num) {
                return num * num;
             }
        }
    };
});

function MyCtrl($scope, mathUtil) {
      $scope.hellos = mathUtil.findSquare(4);
}
Provider can be configured at the time of loading the application
var myApp = angular.module('myApp', []);

//provider style, full blown, configurable version     
myApp.provider('mathUtil', function() {
    this.factor=0;
    this.$get = function() {
        var factor = this.factor;
        return {
             multiplyWithFactor : function(num) {
                return factor * num;
             }
        }
    };
    this.setFactor =function(num) {
       this.factor = num;
    };
});

//hey, we can configure a provider!            
myApp.config(function(mathUtilProvider){
    mathUtilProvider.setFactor(2);
});

function MyCtrl($scope, mathUtil) {
      $scope.hellos = mathUtil.multiplyWithFactor(4);
}

0 comments:

Blogroll

Follow this blog by Email

Popular Posts