向 routeProvider 添加或删除新路由，它不会在 AngularJS 中加载任何内容答案

【问题标题】：Adding or removing a new route to the routeProvider, it doesn't load anything in AngularJS向 routeProvider 添加或删除新路由，它不会在 AngularJS 中加载任何内容
【发布时间】：2016-08-10 21:16:00
【问题描述】：

我有这个网站用 4 个 html 文件路由我的页面，它工作正常，但是当我尝试添加或删除一个新文件时，它只显示空白屏幕和我的导航栏。我发现的错误是：错误：$injector:modulerr 模块错误

作为 Angular 的新手，我看到了各种与 ngRoute 相关的解决方案，但都是徒劳的。

我想为其余项目添加更多 html 文件，但我不能。

我使用 1.2.15 版本并在本地调用文件。下面是我正在使用的 Angular 脚本，还添加了一些代码来浏览项目。

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

            app.controller('MainCtrl', function($scope, NextBackBasicService, $location) {
              $scope.message = $location.path();
            });

            app.config(function($routeProvider) {
              $routeProvider.
              when('/', {
                templateUrl: 'home.html',
                controller: 'MainCtrl'
                    }).
              when('/example1', {
                templateUrl: 'example.html',
                controller: 'MainCtrl'
              }).
              when('/example2', {
                templateUrl: 'example2.html',
                controller: 'MainCtrl'
              }).
              when('/example3', {
                templateUrl: 'example3.html',
                controller: 'MainCtrl'
              }).
              when('/example4', {
                templateUrl: 'example4.html',
                controller: 'MainCtrl'
              });
              $routeProvider.otherwise({
                redirectTo: '/route'
              });
            });

            app.run(function($rootScope, NextBackBasicService){
              $rootScope.goNext = function() {
                NextBackBasicService.goNext();
              };

              $rootScope.goBack = function() {
                NextBackBasicService.goBack();
              };
            });

            app.factory('NextBackBasicService', function($route, $location) {
              //array for keeping defined routes
              var routes = [];

              angular.forEach($route.routes, function(config, route) {
                //not to add same route twice
                if (angular.isUndefined(config.redirectTo)) {
                  routes.push(route);
                }
              });

              return {
                goNext: function() {
                  var nextIndex = routes.indexOf($location.path()) + 1;
                  if (nextIndex === routes.length) {
                    $location.path(routes[0]);
                  } else {
                    $location.path(routes[nextIndex]);
                  }
                },
                goBack: function() {
                  //window.history.back();
                  var backIndex = routes.indexOf($location.path()) - 1;
                  if (backIndex === -1) {
                    $location.path(routes[routes.length - 1]);
                  } else {
                    $location.path(routes[backIndex]);
                  }
                }
              };

            });

这是我的 index.html

            <!DOCTYPE html>
            <html ng-app="myapp">

              <head>
                <meta charset="utf-8" />
                <title>My Title</title>
                 <!--<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
                <script src="https://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>-->
                <!--<script data-require="ng-route@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>-->
                <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
                  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
                -->
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />

                <link rel="stylesheet" href="css/style.css" />
                <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
                <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700&subset=latin,greek,greek-ext' rel='stylesheet' type='text/css'>
                <!--Loads Angular
                <script src="https://code.angularjs.org/1.2.15/angular.min.js" data-semver="1.2.15"></script>
                <script src="https://code.angularjs.org/1.2.15/angular-route.min.js" data-semver="1.2.15"></script>
                <script src="https://code.angularjs.org/1.2.15/angular-animate.min.js"></script>-->

                <script src="js/angular.min.js" data-semver="1.2.15"></script>
                <script src="js/angular-route.min.js" data-semver="1.2.15"></script>
                <script src="js/angular-animate.min.js"></script>
                <script src="app.js"></script>

                <!--jQuery-->
                <script src="js/jquery.js" type="text/javascript">
                <!--Bootstrap-->
                <script src="js/bootstrap.min.js"></script>
                <script src="js/bootstrap.js"></script>
                <link rel="stylesheet" href="css/bootstrap.min.css" />
                <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
                <script>
                    $( document ).ready(function() {
                        $(".burger").click(function(){
                             $(this).toggleClass("active");
                        });
                    });
                </script>
              </head>

              <body>

                  <!-- Navigation -->
                <nav class="navbar navbar-fixed-top" role="navigation">
                    <div class="container mynavigation">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>-->
                            <button type="button" class="burger navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span></span>
                            </button>

                            <a class="pull-left" href="#">
                                <img class="logodimensions" src="images/svg/logo.svg" alt="">
                            </a>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li>
                                   <a class="animlinks" href="#">WORK</a>
                                </li>
                                <li>
                                   <a class="animlinks" href="#">CONTACT / ABOUT</a>
                                </li>
                            </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container -->
                </nav>

                <div class="grids">
                <div ng-controller="MainCtrl">
                <ng-view></ng-view>
             </div>
             </div>

              </body>

            </html>

下面是在项目之间进行路由的地方。

            <div class="container">

              <div class="row">
                <div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
                  <div class="thumbnail zeromarginpadding">
                     <a href="#/example1">
                         <div class="caption">
                            <p class="thumbnail-text-title">Cards</p>
                            <p class="thumbnail-text-descr">Project subtitle</p>
                        </div>  
                    </a>
                    <img class="imagethumb" src="" alt="...">
                  </div>
                </div>

                 <div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
                  <div class="thumbnail zeromarginpadding">
                     <a href="#/example2">
                         <div class="caption">
                            <p class="thumbnail-text-title">Cards</p>
                            <p class="thumbnail-text-descr">Project subtitle</p>
                        </div>  
                    </a>
                    <img class="imagethumb" src="" alt="...">
                  </div>
                </div>

                 <div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
                  <div class="thumbnail zeromarginpadding">
                     <a href="#/example3">
                         <div class="caption">
                            <p class="thumbnail-text-title">Cards</p>
                            <p class="thumbnail-text-descr">Project subtitle</p>
                        </div>  
                    </a>
                    <img class="imagethumb" src="" alt="...">
                  </div>
                </div>

                <div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
                  <div class="thumbnail zeromarginpadding">
                     <a href="#/example4">
                         <div class="caption">
                            <p class="thumbnail-text-title">Cards</p>
                            <p class="thumbnail-text-descr">Project subtitle</p>
                        </div>  
                    </a>
                    <img class="imagethumb" src="" alt="...">
                  </div>
                </div>


              </div>



            </div>

【问题讨论】：

发布完整的错误。
嗨 matmo，控制台中的错误如下： angular.min.js:32 Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.2.15/$injector/……0at%20Uc%20(http%3A% 2F%2Flocalhost%2Fr255%2Fjs%2Fangular.min.js%3A17%3A215)
无法实例化模块 r255，原因是：ReferenceError: when is not defined at localhost/r255/app.js:29:5 at Object.d [as invoke] (localhost/r255/js/angular.min.js:33:335) at localhost/r255/js/angular.min.js:32:196 at Array.forEach (native)在 r (localhost/r255/js/angular.min.js:7:280) 在 e (localhost/r255/js/angular.min.js:32:9) 在 Zb (localhost/r255/js/angular.min.js:35:98) 在 c (localhost/r255/js/angular.min.js:17:431) 在 Yb (localhost/r255/js/angular.min.js:18:140) 在 Uc (localhost/r255/js/angular.min.js:17:215
你能在反引号 (`) 中发布第一个错误，例如 this 吗？这样就不会破坏网址。您应该能够访问该网址，它基本上会告诉您问题所在。 injector:modulerr 通常意味着加载模块时出现问题。看起来原因是“ReferenceError”，但由于您发布的网址已损坏，我无法查看完整的错误。
http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=r255&p1=TypeError%…0at%20Uc%20(http%3A%2F%2Flocalhost%2Fr255%2Fjs%2Fangular.min.js%3A17%3A215)

标签： angularjs ngroute angularjs-ng-route

【解决方案1】：

根据发布的错误，对 $routeProvider 的最后引用是未定义的。似乎发生了一些奇怪的事情，因为那不应该是可能的。不过，为了回避这个问题，您可以删除对 $routeProvider 的最后一个引用，并将 .otherwise() 调用链接到前一个 .when() 调用上，如下所示：

.when('/example4', { templateUrl: 'example4.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/route' });

【讨论】：