INDEX.HTML part
<!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=Source+Sans+Pro:300,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="FeedsterApp">
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-2">
<h1>feedster</h1>
</div>
</div>
</div>
</div>
<div class="posts" ng-controller="PostController">
<div class="container">
<div class="post" ng-repeat="post in posts">
<feedster-post post="post"></feedster-post>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/PostController.js"></script>
<!-- Directives -->
<scirpt src="js/directives/feedsterPost.js"></scirpt>
</body>
</html>
APP.JS part
var app = angular.module("FeedsterApp",[]);
DIRECTIVE part
app.directive('FeedsterPost', function(){
return {
restrict: 'E',
scope: {
post: '='
},
templateUrl: 'js/directives/feedsterPost.html'
};
});
HTML part
<img class="avatar" ng-src="{{ post.author.avatar }}">
<h3 class="author-name">{{ post.author.name }}</h3>
<p class="comment-text">{{ post.comment.text }}</p>
<img class="comment-img" ng-src="{{ post.comment.img }}">