路由在AngularJS中不起作用
[英]Routing doesn't work in AngularJS
问题描述
I am new to the AngularJS and I was learning it through CodeSchool's video series. 
我是AngularJS的新手，正在通过CodeSchool的视频系列学习它。 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 这是我的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>
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. 另一个太长了，无法粘贴到这里。
2 个解决方案
解决方案1
2 2016-05-10 11:21:34
You are missing : after https 您不见了: 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>
Hope that solve your problem. 希望能解决您的问题。
解决方案2
1 已采纳 2016-05-10 11:06:47
You load the route.js before the app.js page. 您在app.js页面之前加载route.js 。 and when you load the route.js , the module "MyModule" isn't known to angular . 并且当您加载route.js ，模块“ MyModule”不知道为angular 。 try to change the order of these 2 files. 尝试更改这2个文件的顺序。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.