Currently, I am working on the Codecademy task - CalendarApp utilizing AngularJS which involves services and routing. Unfortunately, it seems to have some issues as the data is not displaying correctly and the expression: {{ day.date | date }} appears as is without any processing.
Is there anyone who can identify where the mistake might be? I have reviewed examples from others but haven't been able to pinpoint the error.
Here are the snippets of code that might help in identifying the issue:
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="CalendarApp">
<div class="header">
<div class="container">
<img src= "img/logo.svg" width="51" height="54">
</div>
</div>
<div class="main">
<div ng-view></div>
<div class="container">
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/DayController.js"></script>
<script src="js/controllers/EventController.js"></script>
<!-- Services -->
<script src="js/services/events.js"></script>
</body>
</html>
app.js:
var app = angular.module('CalendarApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
controller: 'DayController',
templateUrl: 'views/day.html'
})
.when("/:id", {
controller: 'EventController',
templateUrl: 'views/event.html'
})
.otherwise({
redirectTo: "/"
});
});
events.js
app.factory('events', ['$http', function($http) {
return
$http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/events-api/events.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
DayController.js
app.controller('DayController', ['$scope', 'events', function($scope, events) {
events.success(function(data) {
$scope.day = data;
});
}]);
EventController.js
app.controller('EventController', ['$scope', 'events', '$routeParams', function($scope, events, $routeParams) {
events.success(function(data) {
$scope.event = data.events[$routeParams.id];
});
}]);
day.html:
<h2 class="date"> {{ day.date | date }} </h2>
<div class="event" ng-repeat="event in day.events">
<a href="#/{{$index}}">
<h3 class="name">{{ event.name }} </h3>
<p><span class="from">{{ event.from }} </span> - <span class="to">{{ event.to }} </span></p>
</a>
</div>
event.html:
<div class="event-detail">
<h2 class="event-name">{{ event.name }}</h2>
<p class="time"><span class="from">{{ event.from }} </span> - <span class="to">{{ event.to }} </span></p>
<p class="where">{{ event.where }} </p>
</div>