0
votes
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-resource.min.js"></script>-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>-->
    <!--<script src="js/angular.min.js"></script>-->
    <script src="js/ang.js"></script>
</head>
<body>
<script>   
</script>
<div ng-app="invoice3" ng-controller="InvoiceController as invoice">
    <b>Invoice:</b>
    <div>
        Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
    </div>
    <div>
        Costs: <input type="number" min="0" ng-model="invoice.cost" required >
        <select ng-model="invoice.inCurr">
            <option ng-repeat="c in invoice.currencies">{{c}}</option>
        </select>
    </div>
    <div>
        <b>Total:</b>
    <span ng-repeat="c in invoice.currencies">
      {{invoice.total(c) | currency:c}}
    </span>
        <button class="btn" ng-click="invoice.pay()">Pay</button>
    </div>
</div>


</body>
</html>

//ang.js

angular.module('invoice3', ['finance3'])
    .controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
        this.qty = 1;
        this.cost = 2;
        this.inCurr = 'EUR';
        this.currencies = currencyConverter.currencies;

        this.total = function total(outCurr) {
            return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
        };
        this.pay = function pay() {
            window.alert("Thanks!");
        };
    }]);

//finance3--service

angular.module('finance3', [])
    .factory('currencyConverter', ['$http', function($http) {
        var YAHOO_FINANCE_URL_PATTERN =
            '//query.yahooapis.com/v1/public/yql?q=select * from '+
            'yahoo.finance.xchange where pair in ("PAIRS")&format=json&'+
            'env=store://datatables.org/alltableswithkeys&callback=JSON_CALLBACK';
        var currencies = ['USD', 'EUR', 'CNY'];
        var usdToForeignRates = {};

        var convert = function (amount, inCurr, outCurr) {
            return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
        };

        var refresh = function() {
            var url = YAHOO_FINANCE_URL_PATTERN.
            replace('PAIRS', 'USD' + currencies.join('","USD'));
            return $http.jsonp(url).then(function(response) {
                var newUsdToForeignRates = {};
                angular.forEach(response.data.query.results.rate, function(rate) {
                    var currency = rate.id.substring(3,6);
                    newUsdToForeignRates[currency] = window.parseFloat(rate.Rate);
                });
                usdToForeignRates = newUsdToForeignRates;
            });
        };

        refresh();

        return {
            currencies: currencies,
            convert: convert
        };
    }]);

I am having this error: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=invoice3&p1=Error%3…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.min.js%3A19%3A463)

1
I believe it's saying it can't find a particular module. You haven't included the full error URL, but if you go paste the full URL into your browser you should get an little better explanation. From what you've shown, it sounds like Angular is saying the invoice3 module depends on the finance3 module, but it can't find the finance3 module. But with that said, it looks like you are properly including both modules in your app (assuming both modules are found in your file ang.js).Sunil D.

1 Answers

0
votes

Add angular.route.min.js file. Its not included in your code.

Like script src="https://code.angularjs.org/1.4.9/angular-route.min.js" /script