Can't get routing to work


#1




I'm trying to add routing to my voting application, but it simply doesn't work :(. I've tried the following things:

  1. Use CDN to call Angular Routing
  2. Download angular routing files and include them in the project.
  3. Copy the code from the lessons, but put in the relevant names for this application.

I've got my code up in this github repo: https://github.com/willvelida/Voting-App

Here are the relevant files:

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Voting App</title>

		<!-- Bootstrap-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" >
		<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/styles.css">

		<script type="text/javascript" src="js/vendor/angular.min.js"></script>
		<script type="text/javascript" src="js/vendor/angular-route.min.js"></script>
	</head>
	<body ng-app="VotingApp">
		<div class="container-fluid">
			<!-- Body header -->
			<div class="header">
				<div class="container-fluid">
					<h1 class="text-center">Voting App</h1>
					<p class="text-center">Unleash your ideas onto the world.</p>
				</div>
			</div>

			<!-- Body main -->
			<div class="main" ng-controller="HomeController">
				<div class="container-fluid">
					<div ng-view></div>
				</div>
			</div>

			<!-- Body footer -->
			<div class="footer">
				<div class="container-fluid">
					<p class="text-center" id="footer-text">Developed by <a href="https://www.github.com/willvelida">Will Velida</a></p>
				</div>
			</div>
		</div>
		
		<!-- JQuery -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

		<!-- Bootstrap JS -->
		<script type="text/javascript" src="js/bootstrap.js"></script>

		<!-- Modules -->
		<script type="text/javascript" src="js/app.js"></script>

		<!-- Controllers -->
		<script type="text/javascript" src="js/controllers/HomeController.js"></script>

		<!-- Services -->
		<script type="text/javascript" src="js/services/suggestions.js"></script>
	</body>
</html>

app.js

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

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

HomeController.js

app.controller('HomeController', ['$scope','suggestions', function($scope, suggestions){
	$scope.helloworld = "Hello AngularJS";
	$scope.posts = suggestions.posts;
	$scope.addVote = function() {
		// if the input is empty, then don't submit it!
		if (!$scope.title || $scope.title === "") {
			return;
		};

		// push our ideas into suggestion.js
		$scope.posts.push({
			title: $scope.title,
			upvotes: 0,
		});

		// after we submit, clear the box
		$scope.title = '';
	};
	// Implement upVote function here
	$scope.upVote = function(index) {
		$scope.posts[index].upvotes += 1;
	};
}])

home.html

<div class="container-fluid">
						<div id="formdiv">
						<form ng-submit="addVote()">
								<h3>Submit an idea!</h3>
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Type idea here" ng-model="title"></input>
								</div>
							<button type="submit" class="btn btn-primary" id="submitbutton">Submit</button>
						</form>
						</div>
					</div>
					<div ng-repeat="post in posts | orderBy:'-upvotes'" class="col-md-12" id="showidea">
						<p class="post-title">{{ post.title}}</p>
						<p class="likes"><span ng-click="upVote($index)">+ {{ post.upvotes }}</span></p>
						<p>{{ post.comments }}</p>
					</div>

Sorry for the long post, But I'm really struggling with this and it's annoying me. Can anyone see something that I can't or has anyone tried anything that works?


#2

Hi,
had somewhat the same problem, change the code for angular-route.min.js:

before:

<script type="text/javascript" src="js/vendor/angular-route.min.js"></script>

After:

<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>

ive downloaded and tested it on your project.