Hello everyone,
Please help me understand why my code ain’t working, i believe somehow my code doesn’t tell angular from where to get the .html directive file, and i don’t really know where i went full ■■■■■■ on this.
Here’s a link to the project :
.https://www.codecademy.com/courses/learn-angularjs/projects/angularjs_bolt-network-2
https://www.codecademy.com/courses/learn-angularjs/projects/angularjs_bolt-network-2
Here’s a link to what it should look like:
.https://s3.amazonaws.com/codecademy-content/projects/4/bolt-network-2/index.html
https://s3.amazonaws.com/codecademy-content/projects/4/bolt-network-2/index.html
And here are the objectives with the code:
Objectives:
Make a new folder js/directives/. Inside this folder, create a file js/directives/programListing.js. In this file,create a new directive named programListing:
Use app.directive to create the new directive
Use restrict to create a new Element
Use scope to specify that we’ll pass information into this directive through an attribute named listing
Use templateUrl to tell this directive to use the js/directives/programListing.html file
2.
Include this new JavaScript file in the view as a script> element.
3.
Next, write the directive’s template. Make a new file js/directives/programListing.html. Move the HTML from index.html inside the .content div into the directive’s template file.
4.
The programListing directive takes in information through the listing attribute. The data in listing becomes available to use in the directive’s template. Update the expressions in the directive’s template so that it uses listing to display each item.
5.
In the view, use the directive to display the details of program.
6.
Add another object to the controller. Feel free to use your favorite TV show.
7.
Use another directive to display the details of the new object.
Index.html
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Oxygen:300,400,700' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
<link href="css/main.css" rel="stylesheet"/>
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app="BoltNetworkApp">
<div class="header">
<div class="container">
<img src="img/logo.svg" width="180" height="34">
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<program-listing listing="program" ng-repeat="program in programs"></program-listing>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Bolt</h3>
<ul>
<li>Careers</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-3">
<h3>More Bolt</h3>
<ul>
<li>Gift Cards</li>
<li>Trailers</li>
</ul>
</div>
<div class="col-md-3">
<h3>News</h3>
<ul>
<li>Blog</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Google+</li>
<li>Facebook</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!-- Directives -->
<script src="js/directives/programListing.js"></script>
</body>
</html>
js/app.js
var app = angular.module("BoltNetworkApp",[]);
js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.programs = [
{
series: "Sherlock",
series_img: "img/sherlock.jpg",
genre: "Crime drama",
season: 3,
episode: "The Empty Hearse",
description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
},
{
series: "Arrested Development",
series_img: "img/arrested_development.jpg",
genre: "Sitcom",
season: 2,
episode: "RIGHTEOUS BROTHERS",
description: "The model home collapses. Tobias and Kitty head to Las Vegas together.",
datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
}
];
}]);
js/directives/programListing.js
app.directive('programListing',function() {
return {
restrict: 'E',
scope: {listing: '='},
templateUrl: 'js/directives/programListing.html'
};
});
js/directives/programListing.html
<div class="row">
<div class="col-md-3" class="series_img"><img ng-src="{{ listing.series_img }}">
</div>
<div class="col-md-6">
<h1 class="series"> {{listing.series }}</h1>
<h2 class="episode">{{listing.episode}}</h2>
<p class="description">{{listing.description}}</p>
</div>
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item"> <span>Date:{{listing.datetime | date:'mediumDate'}} </span>
</li>
<li class="list-group-item"><span>On air: {{listing.datetime | date:'EEEE'}}</span>
</li>
<li class="list-group-item"><span>Time: {{ listing.datetime | date:'shortTime' }}</span>
</li>
<li class="list-group-item"><span>Season: {{listing.season}}</span>
</li>
<li class="list-group-item"><span>Genre: {{listing.genre}}</span>
</li>
</ul>
</div>
</div>
Hope you find what the problem is and give a feedback, your time is much appreciated.
Thank you,
Lazar D.