Looking to create a website that loads all necessary templates upon the initial visit. Currently, I only have one partial template but plan to add more in the future. Despite having just this one template, I'm struggling with binding the data from my API into the HTML.
HTML
<!DOCTYPE html>
<html lang="en" ng-app="tophueApp">
<body>
<div ng-view></div>
<script type="text/ng-template" id="two_column.html">
<div id="two_column_container">
<div id="left_pane">
<div class="material_background">
<div ng-repeat="post in posts" class="post_block">
<a href="/post/{{post.pk}}/{{post.url_safe_title}}" class="title_text" onclick="return show_inline(this,'{{post.source_site}}')">
<span ng-if="post.is_NSFW" class="is_NSFW">
NSFW
</span>
{{post.title}}
</a>
<span class="post_info">
</span>
</span>
</div>
</div>
</div>
</div>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="base.js"></script>
<link rel="stylesheet" href="base.css" />
</body>
</html>
base.js
var tophueApp = angular.module('tophueApp', ['ngRoute']);
tophueApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/topic/:topicName/', {
templateUrl: 'two_column.html',
controller: 'TopicController'
}).
when('/', {
templateUrl: 'two_column.html',
controller: 'HomeController'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
tophueApp.controller('TopicController', ['$scope', '$http', '$routeParams',
function($scope, $http, $routeParams) {
$http.get('/api/topic/'+$routeParams.topicName+'/').success(function(data) {
$scope.posts = data;
});
}]);
tophueApp.controller('HomeController', ['$scope', '$http',
function($scope, $http) {
$http.get('/api/home.json').success(function(data) {
$scope.posts = data;
});
}]);
When accessing a page like /topic/topicname, I receive the correct JSON response from my API, but the data doesn't bind to the partial template.
EDIT: (json response)
[{
"user" : "jack",
"source_id" : "rX5n0oP",
"topic" : "swag",
"title" : "http://i.imgur.com/rX5n0oP.jpg",
"url_safe_title" : "httpiimgurcomrx5n0opjpg",
"is_NSFW" : false,
"source_url" : "http://i.imgur.com/rX5n0oP.jpg",
"pk" : 8,
"source_site" : "imgur-img"
}, {
"user" : "jack",
"source_id" : "QW8Sp1O",
"topic" : "swag",
"title" : "http://imgur.com/QW8Sp1O",
"url_safe_title" : "httpimgurcomqw8sp1o",
"is_NSFW" : false,
"source_url" : "http://imgur.com/QW8Sp1O",
"pk" : 1,
"source_site" : "imgur-img"
}]