Routing doesn't work in AngularJS

Question

I am new to the AngularJS and I was learning it through CodeSchool's video series. But now I am facing an error when I try to route through a click on an image. Kindly help me.

Here are my HTML and JavaScript files

//app.js
/**
*  Module
*
* Description
*/
angular.module('myModule', ['ngRoute'])
	.controller('myCtrl', ['$scope', function($scope){
		$scope.clicked="";
		$scope.numberofClicks=0;
		$scope.clickMe=function()
		{
				
			$scope.clicked="Image Clicked";	
			$scope.numberofClicks+=1;
			alert("Image has been clicked");
		};
	}]);

	

//route.js

angular.module('myModule')
.config(['$routeProvider',function($routeProvider) {

	$routeProvider.
                when('/firstQuiz', {
                    templateUrl: 'templates/firstpage.html'
                }).
                when('/secondQuiz', {
                    templateUrl: 'templates/secondpage.html'
                }).
                otherwise({
                    redirectTo: '/'
                });

}]);

<!DOCTYPE html>
<html ng-app="myModule">
<head>
	<meta charset="utf-8"/>
	<title>Testing For Image Click</title>
	<!--Order Matters-->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
	<script type="text/javascript" src="https//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script type="text/javascript" src="js/route.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
	<link rel="stylesheet" type="text/css" href="css/app.css">
	
</head>
<body ng-controller="myCtrl">
	<div class="row">
		<div class="col-xs-6">
			<img class="img-rounded background-image" alt="Bootstrap Image Preview" src="img/gameoft.jpg">
			<a href="#/firstQuiz"><img class="img-rounded play-image" src="img/something.svg"/></a>
		</div>


		<div class="col-xs-6">
			<img class="img-rounded background-image" alt="Bootstrap Image Preview" src="img/gameoft.jpg">
			<a href="#/secondQuiz"><img class="img-rounded play-image" alt="Bootstrap Image Preview" src="img/something.svg"></a>
		</div>
	</div>
	<br/>
	<div class="row">
		<div class="col-xs-6">
			<img class="img-rounded background-image" alt="Bootstrap Image Preview" src="img/gameoft.jpg">
			<img class="img-rounded play-image" alt="Bootstrap Image Preview" src="img/something.svg">

		</div>
		<div class="col-xs-6">
			<img class="img-rounded background-image" alt="Bootstrap Image Preview" src="img/gameoft.jpg">
			<img class="img-rounded play-image" alt="Bootstrap Image Preview" src="img/something.svg">

		</div>
	</div>


	<div ng-view>
		

	</div>
</body>
</html>

These are the two errors that I am facing:

Error: [$injector:nomod] http://errors.angularjs.org/1.5.5/$injector/nomod?p0=myModule angular.min.js:6:411

The other one is too long to paste it here.

Could you edit your question to include details of the error? — Richard Ev
– Richard Ev, Commented May 10, 2016 at 10:34
@RichardEverett:the other error is quite long.that's why I Just posted the first error — NitSher01
– NitSher01, Commented May 10, 2016 at 10:39
What version of angular are you using? in the new versions of AngularJs angular-route is in a separate library. — Sagi Levi
– Sagi Levi, Commented May 10, 2016 at 10:43
@SagiLevi:yes that's why I already added angular-route in a different script tag — NitSher01
– NitSher01, Commented May 10, 2016 at 10:45

Khalid Hussain · Accepted Answer · 2016-05-10 11:21:34Z

2

You are missing : after https

<script type="text/javascript" src="https//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>

It should be like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>

Working Demo

Hope that solve your problem.

answered May 10, 2016 at 11:21

Khalid Hussain

1,69417 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atul Sharma Over a year ago

Angular route is not loading up. Great observation

Priya · Accepted Answer · 2016-05-10 11:28:39Z

1

You load the route.js before the app.js page. and when you load the route.js, the module "MyModule" isn't known to angular. try to change the order of these 2 files.

edited May 10, 2016 at 11:28

Priya

1,3516 gold badges21 silver badges41 bronze badges

answered May 10, 2016 at 11:06

user6001402

1063 bronze badges

1 Comment

Walfrat Over a year ago

@Bujutsu include ap.js before route.js, that is what he's saying

Collectives™ on Stack Overflow

Routing doesn't work in AngularJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related