AngularJS路由问题：主页不显示答案

【问题标题】：AngularJS routing issue: Home page is not displayedAngularJS路由问题：主页不显示
【发布时间】：2017-08-14 18:42:07
【问题描述】：

我正在使用 AngularJS 练习非常简单的网站。我已经让控制器工作了，现在我正在实现路由。应该很简单，我在 Codecademy.com 中做过很多次，但是这次 home.html 代码没有出现在屏幕上。文件夹结构和完整代码可以在here 找到。也许有人知道问题出在哪里？

我的 index.html 是；

<!DOCTYPE html>
<html>
<head>
<title>EventsApp</title>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"></script>
</head>


<body ng-app="EventsApp" ng-controller="HomeController" >
  <header class="container">
    <div class="row">
      <h1 class="col-sm-8">EventsApp</h1>
    </div>
  </header>

<section class="jumbotron">
</section>


<h1>  {{test}}  </h1>
<div ng-view></div>


<!-- Modules -->
<script type="text/javascript"  src="js/app.js"></script>

<!-- Controllers -->
<script type="text/javascript"  src="js/controllers/HomeController.js"></script>

<!-- Services -->

</body>
</html>

app.js 文件：

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

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

HomeController.js：

app.controller('HomeController', ['$scope',
 function($scope) {
    $scope.test="Success";
}]);

还有home.html：

<h1>  {{test}}  </h1>
<section class="container">
  <h1>  {{test}}  </h1>
<div class="col-sm-4">
      <div class="card">

          <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" />
        <div class="block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="..." >
        <div class="block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
  </div>
</section>

【问题讨论】：

标签： javascript angularjs routing ngroute

【解决方案1】：

我必须为这个问题道歉。问题是这应该是最终的 Codecademy 项目。以前的项目是在他们的系统中完成的，这是第一个在我自己的计算机上完成的项目。作为一个新手，我不知道要测试 AngularJS 项目，必须创建本地服务器。 Codecademy 项目描述和分步指南也没有说明这一点。它说只在浏览器上启动 html。目前，他们应该在逐步指南中解决这个问题。感谢您的耐心等待。

【讨论】：

【解决方案2】：

记住始终必须在 head 标签中导入脚本。在您的情况下，您需要在 index.html 页面中的 head 标签下添加这些内容，如图所示

<head>
...
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/HomeController.js">    </script>

其次，需要添加

<a href="#/">Home</a>

在 index.html 文件中。这定义了 home.html 页面的链接。然后您需要将 home.html 页面中的 section 标签更新为：

<section class="container" ng-controller="HomeController">

这将告诉您的 home.html 页面使用“HomeController”。 index.html 页面的标签中不需要写 HomeController。

希望这会有所帮助！

【讨论】：

对此我不确定。我没有按下任何我需要“href”的按钮，并且 app.js 应该在整个 home.html 页面上使用 HomeController

【解决方案3】：

您的脚本应该在 index.html 上的 <head> 标记中导入，而不是在内容之后：

<head>
    ...
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controllers/HomeController.js"></script>
</head>

另外，您不需要在<body> 标记中设置ng-controller="HomeController"，因为它只会为ngRoute 的视图设置：

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

【讨论】：

有趣，这不是我被教导导入模块和控制器的方式，但它仍然看起来不起作用......（我有 ng-controller="HomeController"，只是为了确认控制器正在工作并且没有问题）