Question

我正在攻读AngularJS的 edX课程。我遇到了其中一个实验室的问题，他们没有发布解决方案，而且他们的论坛似乎相当薄弱，所以我在这里。

这是本课程的第一个实验室。所有应用程序应该显示以下内容：

第2单元作业

当前日期为：“2016-05-26T16：53：22.313Z”

当然，用实际当前时间替换该时间。我从我的程序中得到的只有：

第2单元作业

当前日期为：{{dateAndTime}}

我的代码如下：

<!DOCTYPE html>
<html ng-app="dateTimeApp">

<head>
  <title>Date Time App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
</head>

<body ng-controller="firstController">
  <div class="container">
    <h1>Module 2 Homework</h1>
    <h2>The Current Date is: {{dateAndTime}}</h2>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script type="text/javascript">
    var dateTimeApp = angular.module('dateTimeApp', []);
    dateTimeApp.constant('myConfig', {dateTimeReadout: new Date()});
    dateTimeApp.controller('firstController', [
        '$scope', 'myConfig',
        function($scope, myConfig){
            $scope.dateAndTime = myConfig.dateTimeReadout;
        }
    ]);
</body>
</html>

我也尝试了以下内容：

        dateTimeApp.controller('firstController', [
        '$scope',
        function($scope){
            $scope.dateAndTime = new Date();

我在这里有点失落。有人可以帮忙吗？请记住，这是在课程开始时，所以答案应该是非常基本的。

顺便说一下，使用h2标签，不确定如何在引号之间放置Angular位。

Answer 1

脚本未完全关闭。

它应该

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script type="text/javascript">
    var dateTimeApp = angular.module('dateTimeApp', []);
    dateTimeApp.constant('myConfig', {dateTimeReadout: new Date()});
    dateTimeApp.controller('firstController', [
        '$scope', 'myConfig',
        function($scope, myConfig){
            $scope.dateAndTime = myConfig.dateTimeReadout;
        }
    ]);
    </script> <--- here you forget to close it.

Answer 2

您需要关闭脚本，最好放入单独的文件并加载引用，

＆＃13;

 var dateTimeApp = angular.module('dateTimeApp', []);
 
dateTimeApp.controller('firstController', [
        '$scope',
        function($scope){          
            $scope.dateAndTime = new Date();
   }
]);

＆＃13;

<html ng-app="dateTimeApp">
<head>
  <title>Date Time App</title>
</head>

<body ng-controller="firstController">
  <div class="container">
    <h1>Module 2 Homework</h1>
    <h2>The Current Date is: {{dateAndTime  | date:'medium'}}</h2>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</body>
</html>

＆＃13;

Answer 3

寻求额外的功劳;）

var dateTimeApp = angular.module('dateTimeApp', []);

dateTimeApp.controller('firstController', [
  '$scope',
  '$interval',
  function($scope, $interval) {
    $interval(function() {
      $scope.dateAndTime = new Date();
    }, 10);

  }
]);

<html ng-app="dateTimeApp">

<head>
  <title>Date Time App</title>
</head>

<body ng-controller="firstController">
  <div class="container">
    <h1>Module 2 Homework</h1>
    <h2>The Current Date is: {{dateAndTime | date:'MMM d, yyyy h:mm:ss:sss a'}}</h2>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</body>

</html>

简单的AngularJS应用程序显示当前日期

3 个答案: