I am currently working with 2 separate javascript files for my project. One is being used as a controller, while the other serves as a service. However, when I attempt to inject the service into the controller and access its function, an error message pops up.
var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {
var localToINR = [
{USD: 0.015},
{GBP: 0.011}
];
var convertToLocalCurrency = function (amount, localCurrency) {
return amount * localToINR[localCurrency];
}
return { convertToLocalCurrency };
});
var app = angular.module('cartModule', ['currencyConverterModule']);
app.controller('cartController', ['$scope', 'currencyConverter', function ($scope, currencyConverter){
$scope.SelectedCountry = '0';
$scope.localCurrency = function(amount, currencyConverter) {
currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
}
$scope.Products = [
{name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
{name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
{name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
];
$scope.Countries = [
{name: 'India', currency: 'INR', currencySymbol: '₹'},
{name: 'United States', currency: 'USD', currencySymbol: '$'},
{name: 'England', currency: 'GBP', currencySymbol: '£'}
];
$scope.getCartValue = function () {
var total = 0;
for (var i = 0; i < $scope.Products.length; i++) {
total = $scope.Products[i].price * $scope.Products[i].quantity;
}
return total;
}
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="cartModule" ng-controller="cartController">
<table ng-hide="SelectedCountry == '0'">
<tr>
<th>Product</th>
<th>Price Per Unit</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr ng-repeat="product in Products">
<td ng-bind="product.name">
</td>
<td ng-bind="product.price | currency : '₹'"></td>
<td>
<input type="number" ng-model="product.quantity" min="0" max="100">
</td>
<td ng-bind="product.price * product.quantity | currency : '₹'"></td>
</tr>
<tr>
<th colspan="3">Total</th>
<th ng-bind="getCartValue() | currency : '₹'"></th>
</tr>
</table>
<select ng-model="SelectedCountry">
<option value="0">Select your country</option>
<option ng-repeat="country in Countries" ng-value="country.name" ng-bind="country.name"></option>
</select>
</div>
</body>TypeError: Cannot read property 'methodName' of undefined
Service
var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {
var localToINR = [
{USD: 0.015},
{GBP: 0.011}
];
var convertToLocalCurrency = function (amount, localCurrency) {
return amount * localToINR[localCurrency];
}
return { convertToLocalCurrency };
});
and Controller
var app = angular.module('cartModule', ['currencyConverterModule']);
app.controller('cartController', ['currencyConverter', function ($scope, currencyConverter){
$scope.SelectedCountry = '0';
$scope.localCurrency = function(amount, currencyConverter) {
currencyConverter.convert(amount, $scope.SelectedCountry); //Error here
}
$scope.Products = [
{name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
{name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
{name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
];
$scope.Countries = [
{name: 'India', currency: 'INR', currencySymbol: '₹'},
{name: 'United States', currency: 'USD', currencySymbol: '$'},
{name: 'England', currency: 'GBP', currencySymbol: '£'}
];
$scope.getCartValue = function () {
var total = 0;
for (var i = 0; i < $scope.Products.length; i++) {
total = $scope.Products[i].price * $scope.Products[i].quantity;
}
return total;
}
}]);
I have attempted switching the order of including these files in the view, but that did not resolve the issue. Can someone help me identify what I am doing incorrectly?
In my HTML file, I reference the following JS files:
<script src="../Script/angular.js"></script>
<script src="../Services/currencyConverter.js"></script>
<script src="../Script/cartController.js"></script>