AngularJS - 无法实例化模块答案

【问题标题】：AngularJS - Failed to instantiate moduleAngularJS - 无法实例化模块
【发布时间】：2017-08-21 12:49:03
【问题描述】：

（下面的完整错误消息）

导致我的所有脚本都失败，甚至无法运行简单的 $scope 消息。

JSFiddle：https://jsfiddle.net/cj5pe43k/5/.

HTML

<body ng-app="app" ng-controller="mainController">

    <div id="test" style="position:absolute;top:0;left:0;background:#000;width:100vw;height:100vh;color:#fff;display:flex;align-items:center;justify-content:center;"><p>{{message}}</p></div>

</body>

JS：

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

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl: 'index.html',
    controller: 'mainController'
  })

  .when('/', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })
})

app.controller('mainController', function($scope) {
  $scope.message = 'Main Controller Active';
})

错误：[$injector:modulerr] 无法实例化模块 justpayrollApp 由于：[$injector:nomod] 模块 'justpayrollApp' 不可用！您要么拼错了模块名称或忘记加载它。如果注册一个模块，请确保您将依赖项指定为第二个参数。

【问题讨论】：

我不是 JsFiddle 人，所以我将您的代码放入 Plunker (plnkr.co/edit/rFDtZ65kKYpYhPvyuKP9?p=preview) 中，它工作得很好。我看不出你的 js 是在哪里导入的……但我还是不熟悉 JsFiddle 的内部工作原理

标签： javascript angularjs

【解决方案1】：

首先，将 angular.js 脚本放在其他脚本之上。

然后，将您的应用脚本放入页面的body元素底部。

然后，删除您拥有的两个 angular-resource.js 依赖项之一。应该只是依赖项的一个实例。

【讨论】：

【解决方案2】：

由于您似乎使用的是 Angular 原生路由系统，因此您不需要包含 ngRoute。此外，这并不是你应该使用它的方式：对于每条路由，你都在指定一个控制器，所以你不必在 body 元素中指定它。

您的代码中有几件事必须解决，所以我在这里修复了您的 Fiddle：

Working Fiddle

【讨论】：

【解决方案3】：

我不确定这是否能解决问题，但我看到的一个错误是使用相同的 .when('/', 在每条路线。在第一种情况下，您可以输入when('/index'，在第二种情况下，您可以输入when('/home' 类似的东西

看看这个routing in angularjs

【讨论】：