Help with displaying Day Data in Calendar


#1



Hi there, I have gone through the forums to check my code but despite this my code isn't displaying any Day Data in the Calendar exercise. If someone is able to provide some assistance it would be appreciated....

app.js

var app = angular.module('CalendarApp', ['ngRoute']);

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      controller: 'DayController',
      templateUrl: 'views/day.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});

event.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(data) {
              return data;
            });
}]);

DayController.js

app.controller('DayController', ['$scope', 'events', function($scope, events) {
  events.success(function(data) {
    $scope.day = data[$routeParams.id];
  });
}]);

day.html

<!-- Format a date so it displays in the format "Friday 1/16" -->
<h2 class="date">{{day.date | date:'fullDate'}</h2>

<!--
TODO: Loop through events and display each one with this HTML
-->
<div class="event" ng-repeat="event in day.events">
  <a href="#/{{$index}}">
    <h3 class="name">{{day.name}}</h3>
    <p><span class="from">{{day.from}} </span> - <span class="to">{{day.to}} </span></p>
  </a>
</div>

index.html

<!doctype html>
<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 class="container">
				<div ng-view></div>
        

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

#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.