Javascript AngularJS路由问题：未显示主页_Javascript_Angularjs_Routing_Ngroute

Javascript AngularJS路由问题：未显示主页

javascript angularjs routing

Javascript AngularJS路由问题：未显示主页,javascript,angularjs,routing,ngroute,Javascript,Angularjs,Routing,Ngroute,我正在使用AngularJS使用非常简单的网站进行练习。我已经使控制器工作，现在我正在实现路由。它应该很简单，我在Codecademy.com上已经做过很多次了，但是这次home.html代码不会出现在屏幕上。可以找到文件夹结构和完整代码。也许有人知道问题出在哪里我的index.html是 <!DOCTYPE html> <html> <head> <title>EventsApp</title> <link href="ht

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

我的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>

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>

{{test}
{{test}}
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分

您的脚本应该在index.html上的

标记中导入，而不是在以下内容之后导入：

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

请记住，脚本必须导入到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 class="container" ng-controller="HomeController">

这将告诉home.html页面使用“HomeController”。无需在index.html页面的标记中写入HomeController

希望这有帮助

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

有趣的是，这不是我学习导入模块和控制器的方式，但它看起来仍然不起作用…（我使用了ng controller=“HomeController”，只是为了确认控制器正在工作，并且没有问题）我对此不确定。我没有按下任何需要“href”的按钮，app.js应该在整个home.html页面上使用HomeController

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

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