Einfache AngularJS App zur Anzeige des aktuellen Datums

Ich nehme einen edX Kurs auf AngularJS. Ich bin auf ein Problem mit einem der Labors gestoßen, und sie veröffentlichen keine Lösungen, und ihr Forum scheint ziemlich schwach zu sein, also bin ich hier.Einfache AngularJS App zur Anzeige des aktuellen Datums

Dies ist das erste Labor im Kurs. Die ganze App soll ist tun zeigen folgende:

Modul 2 HFG

Das aktuelle Datum ist: „2016-05-26T16: 53: 22.313Z“

natürlich und diese Zeit durch die aktuelle Zeit ersetzen. Alles, was ich von meinem Programm zu erhalten ist:

Modul 2 HFG

Das aktuelle Datum ist: {{DateAndTime}}

wie folgt Mein Code ist:

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

Ich habe auch folgendes versucht:

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

Ich bin ein bisschen hier verloren. Kann jemand helfen? Beachten Sie, dass dies in der Nähe des Kurses liegt, daher sollte die Antwort sehr einfach sein.

Übrigens, mit dem h2 Tag, nicht sicher, wie Sie Angular Bit dort zwischen Anführungszeichen setzen.

Quelle

2017-07-21 David Tarvin

Sie müssen das Skript schließen, ist es besser, in eine separate Datei setzen und die Referenz zu laden,

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>

Quelle

2017-07-21 02:15:28 Sajeetharan

Ihre Skripte nicht gut geschlossen ist.

sollte es mögen

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

Quelle

2017-07-21 02:26:28

In den Worten eines berühmten gelben, etwas beleibtes, kahl, Donut-Essen Vater: D'OH !!! Ich habe diesen Tag eingefügt und es hat funktioniert! Ich kann es nicht glauben, ich habe das nicht verstanden. Es sind immer die kleinen Dinge, die mich erreichen. –

@DavidTarvin :-) so vielleicht können Sie dies als die Antwort nehmen. haha ~~~~ –

Go für den zusätzlichen Kredit;)

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>

Quelle

2017-07-21 03:38:54 flyer

Einfache AngularJS App zur Anzeige des aktuellen Datums

Antwort

Verwandte Themen