Simple AngularJS app to display current date

Question

I am taking an edX course on AngularJS. I have run into a problem with one of the labs, and they don't post solutions, plus their forum seems rather weak, so here I am.

This is the first lab in the course. All the app is supposed to do is display the following:

Module 2 Homework

The Current Date is: “2016-05-26T16:53:22.313Z”

of course, replacing that time with the actual current time. All I get from my program is:

Module 2 Homework

The Current Date is: {{dateAndTime}}

My code is as follows:

<!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>

I have also tried the following:

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

I'm a bit lost here. Can someone help? Keep in mind that this is near the beginning of the course, so the answer should be very basic.

By the way, with the h2tag, not sure how to put Angular bit up there between quote marks.

Liping Huang · Accepted Answer · 2017-07-21 02:26:28Z

1

Your scripts is not closed well.

it should like

<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.

answered Jul 21, 2017 at 2:26

Liping Huang

4,4844 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

apex2022 Over a year ago

In the words of a famous yellow, beer-bellied, bald, donut-eating father: D'OH!!! I put that tag in and it worked! I can't believe it I didn't catch that. It's always the little things that get me.

Liping Huang Over a year ago

@DavidTarvin :-) so maybe you can consider take this as the answer. haha~~~~

Sajeetharan · Accepted Answer · 2017-07-21 02:36:32Z

0

You need to close the script, its better to put to a separate file and load the reference,

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

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

edited Jul 21, 2017 at 2:36

answered Jul 21, 2017 at 2:15

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

flyer · Accepted Answer · 2017-07-21 03:38:54Z

0

Go for that extra credit ;)

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>

answered Jul 21, 2017 at 3:38

flyer

1,42412 silver badges13 bronze badges

Collectives™ on Stack Overflow

Simple AngularJS app to display current date

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related