Question

我正在尝试将角度路由添加到我的网站。我的网站包含3页：

index.html（主页）
home.htm
contact.htm
about.htm中

我已经使用w3schools教程来设置所有内容并将所有内容上传到我的网络服务器，但是尽管控制台中没有错误，但当我更改链接时，我的内容不会显示。请查看下面的HTML和Angular脚本：

INDEX.HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <!-- ... Header data here ... -->
      <!--Angular-->
        <!--Base-->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <!--Roughter-->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    </head>
    <body ng-app="home" ng-controller="homeCtrl" data-ng-init="init()">

    <!--=== Navigation Bar ===-->
        <nav id="nav-bar" class="navbar navbar-default">
              <a id="navbar-brand" href="#/">
                Karly Solis
                <br>
                Multimedia Artist
              </a>
               <!-- ... -->
                <li><a id="option" href="#about">About</a></li>
                <li><a id="option" href="#contact">Contact</a></li>
        </nav>
    <!--=== /Navigation Bar ===-->

    <div ng-view></div>

    <!-- ======= Footer ======= -->
      <footer>
      </footer>
    <!-- ======= /Footer ======= -->

    <!-- scripts -->
      <script src="angular.js"></script>

    </body>
    </html>

角

    var home = angular.module('home', ["ngRoute"]);

      home.config(function($routeProvider) {
        $routeProvider
        .when("/", {
          templateUrl : "home.htm"
        })
        .when("/about", {
          templateUrl : "about.htm"
        })
        .when("/contact", {
          templateUrl : "contact.htm"
        })
      });

其余页面是正文html页面，没有标题信息等。我将在下面包含其中一个以供参考。

about.htm中

  <!--=== Form ===-->
    <div id="about" class="container-fluid">
      <div class="page-width">


        <!-- content ... -->


      </div>
    </div>
  <!--=== /Form ===-->

我已将文件上传到网络服务器：http://kiawahislandgetaways.com/codingFun/KarlyPortfolio/Website/index.html#/

截至目前，点击任何链接都没有显示任何内容。谢谢你的帮助！

Answer 1

我检查了你的源代码，将配置移到控制器外面，

home.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "home.htm"
  })
  .when("/about", {
    templateUrl : "about.htm"
  })
  .when("/contact", {
    templateUrl : "contact.htm"
  })
});

Answer 2

我认为您需要在href标签中删除前缀＃，如下所示

＆＃13;

<li><a id="option" href="about">About</a></li>
<li><a id="option" href="contact">Contact</a></li>

＆＃13;

为什么Angular Routing无法在我的网站上运行？

2 个答案: