ngRoute-直接 url 不显示模板答案

【问题标题】：ngRoute- direct url not displaying templatengRoute-直接 url 不显示模板
【发布时间】：2015-06-11 21:30:03
【问题描述】：

我是 Angular 的新手，所以如果这真的很明显，我很抱歉！我正在制作一个超级基本的应用程序，现在我想要的是当用户直接进入一个页面时，它应该始终显示布局和内容。我正在使用角度的ng-route。

到目前为止，如果我转到 localhost:8080/，它会显示布局（index.html）和内容（view/home.html）。如果我单击“关于”链接，它会转到 localhost:8080/about 并显示布局（index.html）和正确的内容（view/about.html）。现在，如果我在地址栏中键入 localhost:8080/about，按回车键，我会从服务器日志中收到 404 错误。我不确定我错过了什么。任何意见表示赞赏！

app.js

  angular
  .module('TestProject', ['ngRoute']);

routes.js

angular.module('TestProject')
  .config(function($routeProvider, $locationProvider) {

    $routeProvider
      .when('/', {
        templateUrl : 'views/home.html'
      })
      .when('/about', {
        templateUrl: 'views/about.html'
      })
      .when('/contact', {
        templateUrl: 'views/contact.html'
      })
      .otherwise({
        redirectTo: "/"
      });

      $locationProvider.html5Mode(true);

  });

index.html

<!DOCTYPE html>
<html lang="en" ng-app="TestProject">
  <head>
    <meta charset="utf-8">
    <title>Test!</title>

    <base href="/">
    <link rel="stylesheet" href="assets/styles/app.css">
  </head>
  <body>
    <header><h1>Logo</h1></header>
    <nav>
      <ul class="main">
        <li>
          <div class="navBorder">
            <a href="about">About</a>
          </div>
        </li>
        <li>
          <div class="navBorder">
            <a href="contact">Contact</a>
          </div>
        </li>
    </ul>
  </nav>

    <div ng-view></div>

    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-route/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="routes.js"></script>
  </body>
</html>

我知道我还没有任何控制器，我刚开始这个项目，还没有任何东西。

以下是我的文件的组织方式：

我的文件结构如下：

/index.html
/app.js
/routes.js

/views/home.html
/views/about.html
/views/contact.html

【问题讨论】：

index.html 来自哪里？
index.html 在主目录中，我将用我的文件所在的目录更新我的问题
您使用的是什么后端技术？

标签： javascript html angularjs ngroute

【解决方案1】：

如果使用 AngularJS 1.3+，您需要包含 <base href="" /> 的概念。您可以在 <head> 标签中执行此操作

<head>
    <base href="/">
...

来自docs

在 Angular 1.3 之前，我们没有这个硬性要求，它是易于编写在根上下文中部署时可以工作的应用程序，但移动到子上下文时被破坏，因为在子上下文中所有绝对 url 将解析为应用程序的根上下文。阻止在整个应用中使用相对 URL：

此外，如果没有这个<base /> 标签，您可以这样声明.html5Mode()...您需要采用这两种方法之一。

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

【讨论】：

我的 index.html 文件中已经有了这个。我将更新我的问题以包括来源。

【解决方案2】：

啊，我想通了，这是我的服务器的问题。我没有设置mod_rewrite 让它正常工作。暂时我关闭了html5Mode()，一切正常。

【讨论】：