添加或删除到 routeProvider 的新路由,它不会在 AngularJS 中加载任何内容

Adding or removing a new route to the routeProvider, it doesn't load anything in AngularJS

我让这个网站使用 4 个 html 文件路由我的页面,它工作正常,但是当我尝试添加或删除一个新文件时,它只显示空白屏幕和我的导航栏。 我发现的错误是: 错误:$注入器: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>

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

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