<!DOCTYPE html>
<html data-ng-app="serviceModule">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS Service example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
 
	var serviceModule = angular.module('serviceModule', []);
	
	serviceModule.controller('myServiceController', function($scope, sampleService) {
		
		$scope.variable = "Read property value using service controller example"
	    
		sampleService.getDataExample1().then(function(response){
	        $scope.TestStringValue = response.data.TestString;
	        $scope.BooleanValue = response.data.BooleanValue;
	        console.log($scope.TestStringValue);
	    });
		
		sampleService.getDataExample2().then(function(response){
			$scope.TestStringValue = response.data.TestString;
	        $scope.BooleanValue = response.data.BooleanValue;
	        console.log($scope.TestStringValue);
	    });
		
	});
	
	serviceModule.service('sampleService', function($http) {
		
		this.getDataExample1 = function() {
		    var promise = $http({
		        method : 'GET',
		        url : 'resources/Test.properties'
		    }).success(function(data, status, headers, config) {
		        return data;
		    });   

		    return promise; 
		};
		
		this.getDataExample2 = function() {
		    var promise = $http.get('resources/Test.properties').success(function(data, status, headers, config) {
		        return data;
		    });   

		    return promise; 
		};
		
	});
	
</script>
</head>
<body data-ng-controller="myServiceController"> 
	
	<div>
		<h2>{{variable}}</h2>
		<p>1. String value:  {{TestStringValue}}</p>
		<p>2. Boolean value: {{BooleanValue}}</p>
	</div>
 
</body>
</html>