角路由；错误：$injector:modulerr 模块错误答案

【问题标题】：Angular Routing; Error: $injector:modulerr Module Error角路由；错误：$injector:modulerr 模块错误
【发布时间】：2017-03-09 07:59:25
【问题描述】：

我在将 ngRoute 注入模块时收到错误消息。或者可能完全在其他地方。我在控制台窗口中遇到的错误链接到以下站点https://docs.angularjs.org/error/$injector/modulerr?p0=routingApp&p1=Error:%20%5Bng:areq%5D%20http:%2F%2Ferrors.angularjs.org%2F1 .5.8%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs% 2Fangularjs%2F1.5.8%2Fangular.min.js:6:412%0A%20%20%20%20at%20sb%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8 %2Fangular.min.js:23:18)%0A%20%20%20%20at%20Pa%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min .js:23:105)%0A%20%20%20%20at%20Function.cb.$$annotate%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular .min.js:200:148)%0A%20%20%20%20at%20e%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js :41:20)%0A%20%20%20%20at%20Object.invoke%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:41 :243)%0A%20%20%20%20at%20d %20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:39:418)%0A%20%20%20%20at%20https:%2F% 2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:40:19%0A%20%20%20%20at%20q%20(https:%2F%2Fajax.googleapis.com %2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:7:355)%0A%20%20%20%20at%20g%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs %2Fangularjs%2F1.5.8%2Fangular.min.js:39:319

我一直在网上寻找解决此问题的方法，但没有发现任何特别有用的方法。至少有足够的帮助来解决这个问题。下面的代码是我的 angular.js 文件

        (function (angular) {
            'use strict';

            angular.module('routingApp', ['ngRoute'])
                   .controller('routeController', routeController)
                   .config('routeProvider', routeProvider);

            function routeProvider($routeProvider) {
                $routeProvider
                .when('/',{
                    templateUrl: 'index.html',
                    controller: 'routeController'
                })
                .when('/A', {
                    templateUrl: 'pageA.html'
                })
                .when('/B',{
                    templateUrl: 'pageB.html'
                });
            }

            function routeController() {
                var rc = this;
                rc.msg = 'Main Page';
            }

        })(angular);

下面是我的 Index.html 文件

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
    <script src="js/angular.js"></script>

    <body ng-app="routingApp" ng-controller="homeController as hc">
        <h3>Angular Routing</h3>
            <div class="main">
                <div class="nav">
                    <input type="button" class="homeButton" value="home"><a href="#/"></a></input>
                    <input type="button" class="buttonA" value="A"><a href="#A"></a></input>
                    <input type="button" class="buttonB" value="B"><a href="#B"></a></input>
                </div>
                    <p>{{hc.msg}}</p>

                <div ng-view></div>
            </div>
    </body>

【问题讨论】：

我猜文件没有从 https.. 下载。

标签： angularjs

【解决方案1】：

Config 接受一个函数参数，而不是像控制器声明那样的键值。那应该可以解决错误。我还看到它正在从您提供的代码中不存在的 homeController 中读取 msg。更新了相同的内容以使用 RouteController 使主页消息正常工作。这是解决方案。

(function(angular) {
  'use strict';

  angular.module('routingApp', ['ngRoute'])
    .controller('routeController', routeController)
    //.config(routeProvider);

  function routeProvider($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'index.html',
        controller: 'routeController'
      })
      .when('/A', {
        templateUrl: 'pageA.html'
      })
      .when('/B', {
        templateUrl: 'pageB.html'
      });
  }

  function routeController() {
    var rc = this;
    rc.msg = 'Main Page';
  }


})(angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

<body ng-app="routingApp" ng-controller="routeController as rc">
  <h3>Angular Routing</h3>
  <div class="main">
    <div class="nav">
      <input type="button" class="homeButton" value="home">
      <a href="#/"></a>
      </input>
      <input type="button" class="buttonA" value="A">
      <a href="#A"></a>
      </input>
      <input type="button" class="buttonB" value="B">
      <a href="#B"></a>
      </input>
    </div>
    <p>{{rc.msg}}</p>


  </div>
</body>

【讨论】：