gpt4 book ai didi

javascript - 路由在 AngularJS 中不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 16:07:20 25 4
gpt4 key购买 nike

我是 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>

这是我面临的两个错误:

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

另一个太长了,贴在这里

最佳答案

您在 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

希望能解决您的问题。

关于javascript - 路由在 AngularJS 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37135934/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com