Question

我正在使用AnguluarJS Routes在我的应用程序页面之间导航。我遇到的问题是直接进入网址并让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或节点）

AngularJS路由无法按预期运行

1 个答案: