Question

我是棱角分明的，所以如果这真的很明显我很抱歉！我正在制作一个超级基本的应用程序，现在我想要的是当用户直接进入页面时应该始终显示布局和内容。我正在使用棱角分明的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

Answer 1

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

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

来自docs

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

此外，如果没有此<base />标记，您可以声明.html5Mode() ......您需要采取以下两种方法之一。

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

Answer 2

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

ngRoute-直接url不显示模板

2 个答案: