CODEWITHSUNDEEP
javascripthtmlcssangularjsweb
NitSher01
NitSher01

Reputation: 117

Routing doesn't work in AngularJS

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.

Upvotes: 2

Views: 422

Answers (2)

user6001402
user6001402

Reputation: 106

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.

Upvotes: 1

Khalid Hussain
Khalid Hussain

Reputation: 1694

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.

Upvotes: 2

Related Questions