Question

我正在使用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>

Answer 1

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

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

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

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

Answer 2

记住始终必须在头标记中导入脚本。在您的情况下，您需要在head标签下的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页面使用＆＃34; HomeController＆＃34;。无需在index.html页面的标记中编写HomeController。

希望这有帮助！

Answer 3

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

AngularJS路由问题：未显示主页

3 个答案: