<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="services">
<h1>Example 4 Defining Mutliple Methods in One Factory</h1>
<div id="simple" ng-controller="MainController">
<span><button ng-click="timeFromUTCDateHHMM(date)">timeFromUTCDateHHMM:: </button>{{timeFromUTCDateHHMMValue}}</span><br>
<span><button ng-click="timeFromUTCDateHHMMSS(date)">timeFromUTCDateHHMMSS:: </button>{{timeFromUTCDateHHMMSSValue}}</span><br>
</div>
</body>
</html>
(function(angular) {
'use strict';
angular.
module('services', [])
.factory('processTime', ["$filter", function ($filter) {
var timeFromUTCDateHHMM = function(dateObj)
{
var utcDate = new Date(dateObj);
var convertedTime;
convertedTime = $filter('date')(utcDate, "hh:mm");
console.log("processTime:: UTC Date:: "+utcDate+" :: Converted Date::"+ convertedTime);
return convertedTime;
};
var timeFromUTCDateHHMMSS = function(dateObj)
{
var utcDate = new Date(dateObj);
var convertedTime;
convertedTime = $filter('date')(utcDate, "HH:mm:ss");
console.log("processTime:: UTC Date:: "+utcDate+" :: Converted Date::"+ convertedTime);
return convertedTime;
}
return {
timeFromUTCDateHHMM : timeFromUTCDateHHMM,
timeFromUTCDateHHMMSS: timeFromUTCDateHHMMSS
};
}])
.controller('MainController', ["$scope", "$rootScope", "$filter", "processTime", function ($scope, $rootScope, $filter,processTime) {
console.log('---------- Controller ----------');
$scope.timeFromUTCDateHHMMValue = undefined;
$scope.timeFromUTCDateHHMMSSValue = undefined;
$scope.timeFromUTCDateHHMM = function(dte){
$scope.timeFromUTCDateHHMMValue = processTime.timeFromUTCDateHHMM(dte);
console.log("Oringal Date:: "+dte+" Converted Date:: "+$scope.timeFromUTCDateHHMMValue);
};
$scope.timeFromUTCDateHHMMSS = function(dte){
$scope.timeFromUTCDateHHMMSSValue = processTime.timeFromUTCDateHHMMSS(dte);
console.log("Oringal Date:: "+dte+" Converted Date:: "+$scope.timeFromUTCDateHHMMSSValue);
};
$scope.init = function(){
$scope.date = new Date();
console.log("init::Today's Date::"+$scope.date);
};
$scope.init();
}]);
})(window.angular);
/* Styles go here */
AnuglarJS Example for:
Multiple methods in a One Factory
Hit the Buttons to show the results.
Structure for Factory
angular.module('services', [])
.factory('factoryName', ["$filter",
function($filter) {
var method1Logic = function(args) {
//code
};
var method2Logic = function(args) {
//code
};
return {
method1: method1Logic,
method2: method1Logic
};
}
])
.controller('MainController',
["$scope", "$rootScope", "$filter", "factoryName",
function ($scope, $rootScope, $filter,factoryName) {
$scope.testMethod1 = function(arg){
$scope.val1 = factoryName.method1(arg);
};
$scope.testMethod2 = function(arg){
$scope.val2 = factoryName.method2(arg);
};
}]);