I am fairly new to AngularJS and I am trying to improve my knowledge of this JavaScript Framework by building small real-world web-apps.
In this case, I have built a currency converter app with harnesses an exchange rate API built by me which runs here.
I want to know whether there exists a scope of improvement and optimization in my code.
app.js
var app = angular.module('QConvert', ['qconvertctrlmodule']);
qconvertctrl.js
var app = angular.module('qconvertctrlmodule', [])
.controller('QConvertController', function($scope, $http, $log, $interval) {
$scope.currencyObject = {
from : "",
to : "",
amount : "",
amount_converted : "",
exchangeRate : ""
};
$scope.currencyCodes = [{value : 'INR', display : 'Indian Rupee'}, {value : 'USD', display : 'US Dollar'}, {value : 'GBP', display : 'British Pound'}];
$scope.getexchangerate = function() {
$log.info("FROM : " + $scope.currencyObject.from);
$log.info("TO : " + $scope.currencyObject.to);
$http.get("http://api.decoded.cf/currency.php", {params : {from : $scope.currencyObject.from,
to : $scope.currencyObject.to, amount : 1}})
.then(function(response) {
$scope.currencyObject.exchangeRate = response.data.amount_converted;
$log.info(response.data.amount_converted);
});
};
$interval(function() {
$scope.getexchangerate();
console.log('Exchange rates refreshed!');
}, 5000);
});
app.filter('toDecimal', function() {
return function(input, precision) {
return input.toFixed(precision);
};
});
index.html
<div class="container">
<div class="page-header">
<h1>QConvert</h1>
</div>
<p class="lead">A Seamless Currency Converter</p>
<div class="row" ng-controller="QConvertController">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="amount">Amount</label>
<input type="number" step="any" class="form-control" id="amount" ng-model="currencyObject.amount">
</div>
</div>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="from">From</label>
<select class="form-control" id="from" ng-model="currencyObject.from" ng-change="getexchangerate()">
<option ng-repeat="currencyCode in currencyCodes" value="{{currencyCode.value}}">{{currencyCode.display}}</option>
</select>
</div>
</div>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="to">To</label>
<select class="form-control" id="to" ng-model="currencyObject.to" ng-change="getexchangerate()">
<option ng-repeat="currencyCode in currencyCodes" value="{{currencyCode.value}}">{{currencyCode.display}}</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="col-md-8 col-md-offset-2" ng-show="currencyObject.amount">
<h3 class="display-4" ng-If="currencyObject.from != currencyObject.to">{{currencyObject.amount}} {{currencyObject.from}} <span ng-show="currencyObject.to">=</span> <span ng-show="(currencyObject.amount * currencyObject.exchangeRate)">{{(currencyObject.amount * currencyObject.exchangeRate) | toDecimal:3}}</span> {{currencyObject.to}}</h3>
<h3 class="display-4" ng-If="(currencyObject.from == currencyObject.to && currencyObject.from !== undefined && currencyObject.to !== undefined)">{{currencyObject.amount}} {{currencyObject.from}} = {{currencyObject.amount}} {{currencyObject.from}}</h3>
</div>
</div>
</div>
The app is running live here.
currency
filter to display the numbers with currency symbols as prefixes. \$\endgroup\$