Can't get comments to work, view is blank


#1

I’m on the angular final project. Everything worked fine, until I had to add the comments part.
The view remains blank now. Can someone have a look at my code and see what’s wrong, please? I think there’s something wrong inside the SuggestionController or suggestion.html, or both. I’m not sure.

index.html

<!DOCTYPE html>
<html>

<head>
	<title>Suggestion Box</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<script type="text/javascript" src="js/vendor/angular.min.js"></script>
	<script type="text/javascript" src="js/vendor/angular-route.min.js"></script> <!-- I downloaded version 1.6.4 to local files -->
</head>

<body ng-app="SuggestionBox" ng-controller="HomeController">

<div ng-view></div>
 
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
 
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<script type="text/javascript" src="js/controllers/SuggestionController.js"></script>
 
<!-- Services -->
<script type="text/javascript" src="js/services/suggestions.js"></script>

</body>
</html>

app.js

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

app.config(function($routeProvider) {
  $routeProvider
  	.when('/home', {
    	controller: 'HomeController',
    	templateUrl: 'views/home.html'
  	})
  	.when('/suggestion/:id', {
  		controller: 'SuggestionController',
  		templateUrl: 'views/suggestion.html'
  	})
  	.otherwise({
    	redirectTo: '/home'
  	});

});

HomeController.js

app.controller('HomeController', ['$scope', 'suggestions', function($scope, suggestions) {
	$scope.posts = suggestions.posts;

	$scope.addSuggestion = function() {
 
	//if input empty, don't submit
	if(!$scope.title || $scope.title === "") { 
		return;
	}
	 
	//push suggestion posts in suggestions.js
	$scope.posts.push({
		title: $scope.title,
		upvotes: 0,
		comments: []
	});
	 
	//after submit, clear input
	$scope.title = '';
	};

	$scope.upVote = function(post) {
		post.upvotes += 1;
	};

}]);

SuggestionController.js

app.controller('SuggestionController', ['$scope', '$routeParams', 'suggestions', function($scope, $routeParams, suggestions) {
	$scope.post = suggestions.posts[$routeParams.id];
    
	$scope.addComment = function() {

	//if input empty, don't submit
	if(!$scope.comment || $scope.comment === "") {
		return;
	}
	 
	//push suggestion posts in suggestions.js
	$scope.comments.push({ 
		body: $scope.comment,
		upvotes: 0,
	});
	 
	//after submit, clear input
	$scope.comment = '';
	};

	$scope.upVote = function(comment) {
		comment.upvotes += 1;
	}; 

}]);

home.html

<div class="main" ng-repeat="post in posts | orderBy: '-upvotes'">
	<p> {{ post.title }} </p>
	<p><span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)"></span> Upvotes: {{post.upvotes}} </p>
	<a href="#/suggestion/{{$index}}">Comments</a> <!-- somehow, this doesn't work for me. Only when I type in the entire path without $index does it show the page, except without the comments or css layout -->
</div>

<form ng-submit="addSuggestion()" style="margin-top: 50px">
	<h3> Submit Your Suggestion </h3>
		<div class="form-group">
			<input type="text" class="form-control" placeholder="Great ideas here" ng-model="title"></input>
		</div>
	<button type="submit" class="btn btn-primary">Suggest</button>
</form>

suggestion.html

<div class="main" ng-repeat="comment in comments | orderBy: '-upvotes'">
	<p> {{ comment.body }} </p>
	<p><span class="glyphicon glyphicon-plus-sign" ng-click="upVote(comment, $index)"></span> Upvotes: {{comment.upvotes}} </p>
</div>

<form ng-submit="addComment()" style="margin-top: 50px">
	<h3> Submit Your Comment </h3>
		<div class="form-group">
			<input type="text" class="form-control" placeholder="Write a comment" ng-model="comment"></input>
		</div>
	<button type="submit" class="btn btn-primary">Comment</button>
</form>

suggestions.js

app.factory('suggestions', [function() {
	var demoSuggestions = {
		posts: [
		  {
			title: 'Free pizza at club meetings',
			upvotes: 15,
			comments: [
					{ 
						body: 'Sounds great!',
						upvotes: 5
					}
				]
		  },
		  {
			title: 'End all club emails with Laffy Taffy jokes',
			upvotes: 9,
			comments: [
					{ 
						body: 'But they are funny XD',
						upvotes: 1
					}
				]
		  },
		  {
			title: 'Recycle bins in the hallway',
			upvotes: 7,
			comments: [
					{ 
						body: 'Couldn\'t hurt to go green',
						upvotes: 5
					}
				]
		  },
		  {
			title: 'Sing Bon Jovi\'s "Living on a Prayer" halfway through meetings',
			upvotes: 3,
			comments: [
					{ 
						body: 'Oooooooooh! I\'m halfway there!',
						upvotes: 5
					}
				]
		  }
		]
	};
	return demoSuggestions;
}]);

#2

Together with a mentor we found the problem. Just in case anyone has a problem with it in the future, this was the solution:

Apparently the Angular version I use (1.6.4) is using ‘#!’ to route instead of only ‘#’. After adding that to the link in the home view, the route worked.