AngularJS路由未按预期运行

Question

我正在使用AnguluarJS路线在我的应用程序页面之间导航。 我遇到的问题是直接转到网址并让Angular将您重定向到您应该去的地方可以正常工作，但是当您直接转到路线时，它不起作用，而只是加载模板而不是将其加载到索引页面中。

这是我的代码：

index.html的：

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Kita 2 -- Alpha</title>
  <link rel="stylesheet" href="vendor/css/normalize.css">
  <link rel="stylesheet" href="vendor/css/foundation.min.css">
  <link rel="stylesheet" href="vendor/css/bootstrap.min.css">
  <link rel="stylesheet" href="app/css/style.css">
  <script src="vendor/js/angular.js"></script>
  <script src="app/js/app.js"></script>

  <base href="/">
</head>
<body style="background-image:url('app/img/bg.png')">
  <div>
      <nav class="navbar navbar-default navbar-inverse" role="navigation">
          <div class="container-fluid">
              <!-- 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>
                  <a class="navbar-brand" href="#">Course Catalog Demo</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 class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Subjects <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                          <li><a href="#">English</a></li>
                          <li><a href="#">Mathematics</a></li>
                          <li><a href="#">Science</a></li>
                          <li><a href="#">Social Studies</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Heathful Living Education</a></li>
                      </ul>
                  </li>
              </ul>
          </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
  </nav>
  <div id="view" ng-view></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="vendor/js/bootstrap.min.js"></script>
</body>
</html>

app.js：

var app = angular.module("app", []);

app.config(function($routeProvider, $locationProvider) {

  $routeProvider.when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeController'
  });
  $routeProvider.otherwise({ redirectTo: '/home' });

  $locationProvider.html5Mode(true);

});

app.controller("HomeController", function($scope, AuthenticationService) {
  $scope.title = "Awesome Home";
  $scope.message = "Mouse Over these images to see a directive at work!";

  $scope.logout = function() {
    AuthenticationService.logout();
  };
});

最后是home.html：

<div id="home">
<div class="col-md-2"></div>
<div class="col-md-4">
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
        <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
    </div>
</div>
<div class="col-md-4">
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
        <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
    </div>
</div>
<div class="col-md-2"></div>
</div>

TL; DR：转到foobar.com会直接指向foobar.com/home，并按照我们的预期在index.html中显示home.html的内容，但是直接进入foobar.com/home只会显示home.html的内容，而我宁愿将其显示在index.html的ng-view区域内。

Answer 1

就像JeffryHouser所说的那样，至少以非常简单的方式，使用angularJS是不可能的。 由于angularJS用于SPA，因此foobar.com/home应该是foobar.com/#/home。 您的应用程序只有一页，即index.html。

如果要使用html5mode，则必须为服务器编写所有重写规则，以便它将所有请求都指向index.html。 但这必须在angularJS之外进行，但无论在服务器端是在服务器端。 （例如apache，nginx或node）

AngularJS路由未按预期运行

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-03-23 22:25:32

AngularJS路由未按预期运行

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-03-23 22:25:32

解决方案1
1 已采纳 2014-03-23 22:25:32