控制台上没有错误，但 html 没有加载

Question

我不知道为什么这不起作用。我在这里做错了什么？我在控制台中没有错误，但是 main.html 和 about.html 中的 html 没有加载。

当我在 html 中直接使用控制器时，它运行良好，但是当我使用上面的代码时，ng-view 不会从 main.html 和 about.html 中获取 html文件。

app.js

angular
  .module('invoice2', [
    'ngRoute'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'InvoiceController'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

about.js

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
  };
});

angular.module('invoice2', ['finance2'])
.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!");
  };
}]);

index.html

<body ng-app="invoice2">        
    <div class="container">
        <div ng-view=""></div>
    </div>
</body>

Answer 1

您不能多次定义一个模块

你在做

angular
  .module('invoice2', [
    'ngRoute'
  ])

以后

angular.module('invoice2', ['finance2'])

覆盖第一个。相反，有一组依赖项，稍后再获取模块。

// define it once
angular.module('invoice2', ['ngRoute', 'finance2'])

// and get that instance later
var app = angular.module('invoice2');

控制台上没有错误，但 html 没有加载

No errors on console but html doesn't loading

angularjs

ng-view