2016-05-10 4 views
2

Я новичок в AngularJS, и я изучал его через серию видеороликов CodeSchool. Но теперь я сталкиваюсь с ошибкой, когда пытаюсь направить клик по изображению. Пожалуйста, помогите мне.Маршрутизация не работает в AngularJS

Вот мой HTML и JavaScript файлы

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

 
\t 
 

 
//route.js 
 

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

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

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

 

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

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

 
\t \t </div> 
 
\t </div> 
 

 

 
\t <div ng-view> 
 
\t \t 
 

 
\t </div> 
 
</body> 
 
</html>

Эти две ошибки, которые я облицовочные:

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

Другой слишком долго, чтобы вставить его Вот.

+0

Какова ошибка вашей облицовки ?. –

+0

Не могли бы вы отредактировать свой вопрос, чтобы включить подробные сведения об ошибке? –

+0

@RichardEverett: другая ошибка довольно длинная. Вот почему я только что опубликовал первую ошибку – Pranjal

ответ

1

Загружается route.js перед страницей app.js. , и когда вы загружаете route.js, модуль «MyModule» не известен angular. попробуйте изменить порядок этих двух файлов.

+0

@Bujutsu включает ap.js перед route.js, вот что он говорит – Walfrat

+0

@ chka, @ Priya: спасибо за вашу помощь. Теперь он работает – Pranjal

2

Вы пропали без вести после того, как :https

<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://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script> 

Working Demo

Надеется, что решить вашу проблему.

+0

Угловой маршрут не загружается. Замечательное наблюдение –

+0

@ Халид Хуссейн: Благодарю вас за помощь ... – Pranjal

Смежные вопросы