AngularJS Read Property File Value
As we know AngularJS framework work on MVW (Model-View-Whatever) design pattern. If you are working on small, medium or large project using AngularJS framework you will have to setup your constant resources in property file and read environment or constant value from there. In this demo you will see how to read value from property file:
- Create dynamic maven web project. Below is final project structure:
- Test.properties:
{ "TestString": "Read value from file", "BooleanValue": false }- index.html:
<!DOCTYPE html>
<html data-ng-app="myapp">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('HelloWorldController', function($scope, $http){
$scope.variable = "AngularJS Property file read test";
$http.get('resources/Test.properties').then(function (response) {
$scope.TestStringValue = response.data.TestString;
$scope.BooleanValue = response.data.BooleanValue;
console.log('TestString is ', response.data.TestString);
console.log('BooleanValue is ', response.data.BooleanValue);
});
});
</script>
</head>
<body data-ng-controller="HelloWorldController">
<div>
<h2>{{variable}}</h2>
<p>1. String value: {{TestStringValue}}</p>
<p>2. Boolean value: {{BooleanValue}}</p>
</div>
</body>
</html>- For this demo I will run this web application on tomcat server inside eclipse. You could use any server you like. If you want to configure and run tomcat inside eclipse please use this tutorial. Below is output which shows data from property file:
- For more information about AngularJS please use their official site here
Download Project: JavaHonkAngularJSProperty
Thank you!
It helped me a lot !!
Am I the only one recognizing that this returns a *.json content and not a *.properties content?