Hello Guys,
I have been working on this problem for almost 2 days and can't figure out whats wrong with my code.
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>APP.JS
var app = angular.module('CalendarApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
controller:"DayController",
templateUrl:"views/day.html"
})
.otherwise({
redirectTo:"/"
});
});DAYCONTROLLER
app.controller('DayController', ['$scope','events', function($scope, events) {
events.success(function(data){
$scope.day = data;
});
}]);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 | date}} </span> - <span class="to"> {{event.to | date}} </span></p>
</a>
</div>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;
});
}]);