AngularJS路由未按预期运行

Question

I am using AnguluarJS Routes to navigate between the page of my application. 我正在使用AnguluarJS路线在我的应用程序页面之间导航。 The issue that I am having is that going straight to the web address and having Angular redirect you to where you are supposed to go works as intended, but when you go straight to the route, it doesn't function and instead just loads the template rather than loading it within the index page. 我遇到的问题是直接转到网址并让Angular将您重定向到您应该去的地方可以正常工作，但是当您直接转到路线时，它不起作用，而只是加载模板而不是将其加载到索引页面中。

Here's my code: 这是我的代码：

index.html: 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: 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();
  };
});

and lastly, home.html: 最后是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: Going to foobar.com directs to foobar.com/home and displays home.html's content within index.html like it us supposed to, but going straight to foobar.com/home just displays home.html's content, and I'd rather have it displayed within the ng-view area of index.html. TL; DR：转到foobar.com会直接指向foobar.com/home，并按照我们的预期在index.html中显示home.html的内容，但是直接进入foobar.com/home只会显示home.html的内容，而我宁愿将其显示在index.html的ng-view区域内。

Answer 1

Like JeffryHouser said, that is not possible with angularJS, at least in a very simple way. 就像JeffryHouser所说的那样，至少以非常简单的方式，使用angularJS是不可能的。 Since angularJS is used for SPA, foobar.com/home should be foobar.com/#/home. 由于angularJS用于SPA，因此foobar.com/home应该是foobar.com/#/home。 Your application is just one page, which is your index.html. 您的应用程序只有一页，即index.html。

If you want to use html5mode, then you have to write all rewrite rules for your server so that it points all requests to index.html. 如果要使用html5mode，则必须为服务器编写所有重写规则，以便它将所有请求都指向index.html。 But this has to be done outside of angularJS, but on the server-side, whatever your server is. 但这必须在angularJS之外进行，但无论在服务器端是在服务器端。 (ex. apache, nginx, or node) （例如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