Javascript AngularJS路线未按预期运行_Javascript_Angularjs

Javascript AngularJS路线未按预期运行

javascript angularjs

Javascript AngularJS路线未按预期运行,javascript,angularjs,Javascript,Angularjs,我使用AnguluarJS路由在我的应用程序页面之间导航。我遇到的问题是，直接访问web地址并让Angular将您重定向到您应该去的地方可以按预期的方式工作，但是当您直接转到路由时，它不起作用，而是加载模板，而不是在索引页中加载模板这是我的密码： index.html： <!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title

我使用AnguluarJS路由在我的应用程序页面之间导航。我遇到的问题是，直接访问web地址并让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>

最后，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视图

区域。

就像Jeffryhouse说的，这在angularJS中是不可能的，至少以一种非常简单的方式。因为angularJS用于SPA，所以foobar.com/home应该是foobar.com/#/home。您的应用程序只是一个页面，即index.html

如果您想使用HTML5模式，那么您必须为服务器编写所有重写规则，以便它将所有请求指向index.html。但是这必须在angularJS之外完成，但是在服务器端，不管您的服务器是什么。（例如apache、nginx或node）

如果我理解的话，foobar.com/home是一个与foobar.com不同的实际web位置。通常，Angular用于单页应用程序，这意味着所有应用程序代码必须位于单个URL位置。尝试使用锚点而不是实际目录。比如：foobar.com/#home。使用“foobar.com/home”没有什么错。。。只要HTML5模式被启用，服务器就会有一个全面的路由。。。（请注意，对于较旧的浏览器，HTML5模式将回退到Hashbang模式）如何为index.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>