Question

无法在我的PC上的以下程序中运行angular js代码。它可以在线运行在插件编辑器中。请在运行代码之前让我知道是否需要下载任何内容。预先感谢

HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>The angularjs app!</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
            <script src="C:\Users\komar\Desktop\script.js"></script>
    </head>
    <body>
        <div ng-app="MyModule" ng-controller="MyController as ctrl">
            <b>Invoice:</b><br>
            <div>
            Quantity:<input type = "number" min = 0 ng-model = "ctrl.quantity" required><br>
            Costs:<input type = "number" min=0 ng-model="ctrl.costs" required>
            <select ng-model="ctrl.selCur">
                <option ng-repeat = "c in ctrl.currencies">{{c}}</option>
            </span><br>
            <b>Total:</b><span ng-repeat= "c in ctrl.currencies">
                {{ctrl.convert(c) | currency:c}}
            </span><br>
            <button class ="btn" ng-click="ctrl.createAlert()">Pay</button>
        </div>
    </div>
    </body>
</html>

JavaScript代码：

var app = angular.module('MyModule');

app.controller('MyController',[MyService,function MyController(MyService){
    this.quantity = 1;
    this.costs =2;
    this.selCur = 'EUR';
    this.currencies = MyService.currencies;

    var convert = function(baseCur){
        return MyService.currentCurrencies(this.quantity*this.costs,this.selCur,baseCur);
    }
    this.createAlert = function createAlert(){
        window.alert('Thanks!');
    };
}]);

app.factory('MyService',function(){
    var currencies= ['USD','EUR','CNY'];
     var values = {
        USD: 1,
        EUR: 0.88,
        CNY: 6.72
    };

    var currentCurrencies = function(amount,selCur,baseCur){
        return amount*values(selCur)/values(baseCur);
    }

    return {
        currentCurrencies: currentCurrencies,
        currencies: currencies
    };

});

我无法运行此代码。请帮助我解决问题并帮助运行代码

即使此代码不起作用 HTML代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-21-production</title>


  <script src="//code.angularjs.org/1.7.7/angular.min.js"></script>
  <script src="finance2.js"></script>
  <script src="invoice2.js"></script>



</head>
<body >
  <div ng-app="invoice2" 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><br>
    <button class="btn" ng-click="invoice.pay()">Pay</button>
  </div>
</div>
</body>
</html>

脚本文件

(function(angular) {
  'use strict';
angular.module('finance2', [])
  .factory('currencyConverter', function() {
    var currencies = ['USD', 'EUR', 'CNY'];
    var usdToForeignRates = {
      USD: 1,
      EUR: 0.74,
      CNY: 6.09
    };
    var convert = function(amount, inCurr, outCurr) {
      return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
    };

    return {
      currencies: currencies,
      convert: convert
    };
  });
})(window.angular);


(function(angular) {
  'use strict';
angular.module('invoice2', ['finance2'])
  .controller('InvoiceController', ['currencyConverter', function InvoiceController(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!');
    };
  }]);
})(window.angular);

Answer 1

您必须更改

var app = angular.module('MyModule');

到

var app = angular.module('MyModule', []);

检查[]

也

app.controller('MyController',[MyService,function MyController(MyService){

收件人

app.controller('MyController',["MyService",function MyController(MyService){

在MyService中选中“

更多修复程序

还有更多修复程序，

您必须关闭标签。
return amount*values[selCur]/values[baseCur]; <-在这里将(更改为[
var convert =必须更改为this.convert =

Answer 2

请使用<script></script>代替<script src="C:\Users\komar\Desktop\script.js"></script>，然后在脚本标记之间复制JavaScript。

Answer 3

在下面找到更新的代码

var app = angular.module('MyModule', []);

app.controller('MyController', ["MyService", function MyController(MyService) {
  this.quantity = 1;
  this.costs = 2;
  this.selCur = 'EUR';
  this.currencies = MyService.currencies;

  var convert = function(baseCur) {
    return MyService.currentCurrencies(this.quantity*this.costs, this.selCur, baseCur);
  }
  this.createAlert = function createAlert() {
    window.alert('Thanks!');
  };
}]);

app.factory('MyService', function() {
  var currencies = ['USD', 'EUR', 'CNY'];
  var values = {
    USD: 1,
    EUR: 0.88,
    CNY: 6.72
  };

  var currentCurrencies = function(amount, selCur, baseCur) {
    return amount*values(selCur)/values(baseCur);
  }

  return {
    currentCurrencies: currentCurrencies,
    currencies: currencies
  };

});

<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>The angularjs app!</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
            <script src="script.js"></script>
    </head>
    <body>
        <div ng-app="MyModule" ng-controller="MyController as ctrl">
            <b>Invoice:</b><br>
            <div>
            Quantity:<input type = "number" min = 0 ng-model = "ctrl.quantity" required><br>
            Costs:<input type = "number" min=0 ng-model="ctrl.costs" required>
            <select ng-model="ctrl.selCur">
                <option ng-repeat = "c in ctrl.currencies">{{c}}</option>
            </span><br>
            <b>Total:</b><span ng-repeat= "c in ctrl.currencies">
                {{ctrl.convert(c) | currency:c}}
            </span><br>
            <button class ="btn" ng-click="ctrl.createAlert()">Pay</button>
        </div>
    </div>
    </body>
</html>

Answer 4

您的HTML代码正确无误，您只需要使用以下代码更改script.js文件代码即可。

var app = angular.module('MyModule', []);

app.controller('MyController',['$scope','MyService',function MyController(MyService, $scope){
    this.quantity = 1;
    this.costs =2;
    this.selCur = 'EUR';
    this.currencies = MyService.currencies;

    var convert = function(baseCur){
        return MyService.currentCurrencies(this.quantity*this.costs,this.selCur,baseCur);
    }
    this.createAlert = function createAlert(){
        window.alert('Thanks!');
    };
}]);

app.factory('MyService',function(){
    var currencies= ['USD','EUR','CNY'];
     var values = {
        USD: 1,
        EUR: 0.88,
        CNY: 6.72
    };

    var currentCurrencies = function(amount,selCur,baseCur){
        return amount*values(selCur)/values(baseCur);
    }

    return {
        currentCurrencies: currentCurrencies,
        currencies: currencies
    };

});

无法在计算机上运行angularjs代码

4 个答案: