I've recently started learning AngularJS and have been following CodeSchool's video series. However, I've encountered an error when trying to route through a click on an image. Can someone please assist me with this?
Below 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>The current errors I am encountering include:
Error: [$injector:nomod] http://errors.angularjs.org/1.5.5/$injector/nomod?p0=myModule angular.min.js:6:411
The other issue is too lengthy to paste here.