路由在AngularJS中不起作用
[英]Routing doesn't work in AngularJS
問題描述
我是AngularJS的新手，正在通過CodeSchool的視頻系列學習它。 但是現在，當我嘗試通過點擊圖像進行路由時，我遇到了一個錯誤。 請幫助我。
這是我的HTML和JavaScript文件
//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>
這是我面臨的兩個錯誤：
錯誤：[$ injector：nomod] http://errors.angularjs.org/1.5.5/ $ injector / nomod？p0 = myModule angular.min.js：6：411
另一個太長了，無法粘貼到這里。
2 個解決方案
解決方案1
2 2016-05-10 11:21:34
您不見了: 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>
希望能解決您的問題。
解決方案2
1 已采納 2016-05-10 11:06:47
您在app.js頁面之前加載route.js 。 並且當您加載route.js ，模塊“ MyModule”不知道為angular 。 嘗試更改這2個文件的順序。
AngularJS路由無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.