我的 AngularJS 路由有什么问题？答案

【问题标题】：What is wrong with my AngularJS routes?我的 AngularJS 路由有什么问题？
【发布时间】：2018-03-06 21:31:46
【问题描述】：

可以这么说，我已经创建了一个 AngularJS 沙箱。我使用 Bootstrap 提供的模板 html 来提高设置速度，并且我计划使用 Bootstrap 来加快速度。在设置所有内容时，我注意到我的路线无法正常工作。在我的index.html 文件中，我尝试将我的角度文件放在几个地方，但我认为这不是问题所在。我也尝试过使用<ng-view></ng-view>，而不是使用div。在app.js 中，我尝试将到templateUrl 的路由从根目录重命名为结束文件app/home/home.html，以及许多其他配置。当我在浏览器中加载时，我得到的只是我的导航菜单。我什至没有从 templateUrl 获得 html。我可能对所有这些都错了，但我无法弄清楚。我在我的index.html 文件中放置了一个通用的引导导航，用于我的初始设置。我的问题可能是什么？

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="home.html">Angular</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="#">Home</a>
          <a class="nav-item nav-link" href="#">About</a>
          <a class="nav-item nav-link" href="#">Contact</a>
        </div>
      </div>
    </nav>



    <ng-view>
    </ng-view>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="app/app.js"></script>
    <script src="app/home/HomeController.js"></script>
  </body>
</html>

app.js

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

app.config(function($routeProvider){
  $routeProvider
    .when("/home", {
      templateURL: "home.html",
      controller: "HomeController"
    })
    .when("/about", {
      templateURL: "about.html",
      controller: "AboutController"
    })
    .otherwise({redirectTo: "/home"});
});

HomeController.js

var app = angular.module('myApp');

app.controller('HomeController', function($scope){

  $scope.noun = {
    person: "Maximus Aurelius",
    place: "World",
    thing: "sword"
  };

});

home.html

<div>
  <h1>Hello {{noun.person}}</h1>
</div>

我的目录

开发工具网络

【问题讨论】：

我会尝试调整您的模板 url 文件引用。如果您的模板存储在子目录中，那么您需要指定该目录是什么
我认为@andrewdleach 是正确的，请检查您的目录。顺便说一句，我不知道 <ng-view> 存在，但我可能错了。如果没有，那就是<div ng-view>
我刚刚上传了我的目录。看看并提出一些建议。我已经尝试了几条路线，但我一无所获。我的控制台甚至没有抛出错误，但我至少知道 app.js 文件正在加载，因为 url 在索引之后标记在 /home 上，因为路由声明它应该这样做。
您是否尝试将$locationProvider 注入您的config 块并设置$locationProvider.html5Mode(true);？您可能还需要在 index.html 文件的 <head> 部分中使用 <base href="/index.html" />。
这是 99% 的模板问题，ui 路由器无法知道您的模板在哪里，除非您将它们打包在某个模板缓存中，以该名称为关键字，否则该路径将永远无法使用。添加 /home/home.html 作为模板和 /about/about.html

标签： javascript angularjs twitter-bootstrap ngroute

【解决方案1】：

模板的路径是相对于主页的。您正在页面文件所在的根目录中查找模板，但它们位于子目录中：

试试：

 $routeProvider
    .when("/home", {
      templateURL: "home/home.html",
      controller: "HomeController"
    })
    .when("/about", {
      templateURL: "about/about.html",
      controller: "AboutController"
    })

【讨论】：

我也试过了。我什至复制并粘贴了您的代码。依然没有。在 plnkr.co 上使用路由时，我遇到了非常相似的问题。问题可能是路由以外的问题吗？
检查浏览器开发工具网络中的实际请求，看看是什么状态
网络显示它正在加载路由器、控制器和 index.html，但不是 home.html 文件。我将发布我拍摄的屏幕截图。这可能是最基本的 angularjs 模板/项目之一。我已经尝试了所有目录配置。我知道这可能是路由和目录问题，但我正在使用我们的技巧。我什至清除了我的文件缓存。

【解决方案2】：

看起来它只是您的 $routeProvider 中的一个错字。 templateURL 应该只是 templateUrl。

【讨论】：

我发现并改变了它。还是没有运气。
进行了一些其他更改并将它们放入 plnkr。看起来您的 app.js 中缺少一行。 plnkr.co/edit/yElXqJ9S3YYiZeORMpxS?p=preview
它也适用于我的 plunk。 plunker 网站上是否有在后台运行的东西？文件是否以某种方式提供？我问是因为它不适用于我的桌面编辑器。我的文件现在与 plunk 中的文件相同。我已经清除了文件缓存。我现在有一个非常基本的目录。虽然，我现在在我的开发工具中抛出了一个错误。
XMLHttpRequest 无法加载文件：///Users/ashtonl/Desktop/WestmanDocs/angularSandbox/home.html。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。
我什至省略了您添加的额外行，它仍然可以在 plunker 中使用。这告诉我 plunker 正在运行我的计算机没有的东西。我的机器表单开发人员在我之前使用过其他 AngulrJS 应用程序。我可以从其他人那里运行一个角度应用程序，但他们安装了节点模块。根据我的理解，如果您正在制作一个非常简单的 Angular 应用程序，我认为您所需要的只是 Angular 文件或 CDN。