路由在 AngularJS 中不起作用答案

【问题标题】：Routing doesn't work in AngularJS路由在 AngularJS 中不起作用
【发布时间】：2016-09-05 06:41:11
【问题描述】：

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

另一个太长了，这里贴不出来。

【问题讨论】：

你面临的错误是什么？
您能否编辑您的问题以包含错误的详细信息？
@RichardEverett：另一个错误很长。这就是为什么我刚刚发布了第一个错误
您使用的是什么版本的 Angular？在新版本的 AngularJs 中，angular-route 在一个单独的库中。
@SagiLevi：是的，这就是为什么我已经在不同的脚本标签中添加了 angular-route

标签： javascript html css angularjs web

【解决方案1】：

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

希望能解决您的问题。

【讨论】：

角度路线未加载。很棒的观察

【解决方案2】：

您在 app.js 页面之前加载 route.js。当您加载route.js 时，angular 不知道模块“MyModule”。尝试改变这两个文件的顺序。

【讨论】：

@Bujutsu 在 route.js 之前包含 ap.js，这就是他的意思