2016-05-10 10 views
2

私はAngularJSには新しく、CodeSchoolのビデオシリーズで学習しました。しかし、私は画像上をクリックして移動しようとするとエラーに直面しています。親切に私を助けてください。AngularJSでのルーティングは機能しません

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

他方がそれを貼り付けるには長すぎる:ここ

は私のHTMLとJavaScriptファイルは、これらは私が直面しています2つのエラーです

//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>

ですここに。

+0

あなたの直面しているエラーは何ですか? –

+0

質問を編集してエラーの詳細を含めることができますか? –

+0

@リチャードエベレット:他のエラーはかなり長いです。その理由は、私は最初のエラーを投稿しました – Pranjal

答えて

1

route.jsをapp.jsページの前に読み込みます。 route.jsをロードすると、モジュール「MyModule」はangularに認識されません。これらの2つのファイルの順序を変更しようとします。

+0

@Bujutsuはroute.jsの前にap.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

@Khalid Hussain:お世話になりました... – Pranjal

関連する問題