我正在构建一个简单的 Angular 前端页面来显示一些简单的 html 页面，并尝试让 Angular 路由正常工作。我的顶部有一个导航栏，我希望在其下方显示一个 View ，我可以在其中更改该 View 中的 html 页面。我有一个 routing.js 文件，其中包含从 html 主页面引用的 Controller 和路由信息。我的问题是我的观点没有被显示。当我检查网页控制台以查看为什么未显示 View 时，它返回 404 Not Found。我不知道为什么考虑到我的 root 中有 routing.js 文件。这是我的 index.html 页面，其中包含导航栏以及应显示 View 的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Register License Plate</title>
<!-- Libraries -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<!-- to get routing information and controllers -->
<script src="routing.js"></script>
</head>
<body>
<div ng-app = "plateApp" ng-controller = "defaultController">
<!-- NAV BAR -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" a href = "/">LPR</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#register">Register License Plate <span class="sr-only">(current)</span></a></li>
<li><a href="#payticket">Pay Ticket</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Lot Number">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form class="navbar-form navbar-right" role="search">
<button type="submit" class="btn btn-default">Submit</button>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Plate Number">
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Show views here -->
<div id="main">
<div ng-view></div>
</div>
<!-- Test words to show something is being displayed after the view is displayed -->
After View is Displayed
</body>
</html>
考虑到我引用了routing.js 脚本，我感到不知所措。我是 Angular js 的新手，所以我显然做错了什么。下面也是我的routing.js 脚本。
var plateApp = angular.module('plateApp', ['ngRoute']);
plateApp.config(function($routeProvider) {
$routeProvider
// route for default/welcome page
.when('/', {
templateUrl : 'default.html',
controller : 'defaultController'
})
// route for Register LP Page
.when('/register', {
templateUrl : 'register.html',
controller : 'registerController'
})
// router for Paying Tickets page
.when('/payticket', {
templateUrl : 'payticket.html',
controller : 'payticketController'
})
// route for getting plates and Lot page
.when('/getplates', {
templateUrl : 'getplates.html',
controller : 'getPlatesController'
});
});
//Controllers
plateApp.controller('defaultController', function($scope){
//Keeps scopes and other Vars here
$scope.testMessage = 'Welcome to this website';
});
plateApp.controller('registerController', function($scope){
//Keeps scopes and other Vars here
$scope.testMessage = 'Register your plates';
});
plateApp.controller('payticketController', function($scope){
//Keeps scopes and other Vars here
$scope.testMessage = 'Pay Tickets';
});
plateApp.controller('getPlatesController', function($scope){
//Keeps scopes and other Vars here
$scope.testMessage = 'Get Plates from SQLdb';
});
还有一些有关服务器如何运行的背景信息。我有一个在端口 1337 上运行 Node 和 Express 的 Linux 盒子
当我输入服务器地址 192.168.239.130:1337/时，它会发回 index.html 页面。这加载得很好，我可以看到导航栏/网页，但我看不到正在加载的其他 html 页面的 View ，因为显然没有找到routing.js 文件。
如有任何帮助，我们将不胜感激。
谢谢。
最佳答案
模板 URL 似乎有问题。确保您提供的模板 URL 路径是相对 URL。
例如，如果您的 View 模板 (HTML) 位于名为“Views”的文件夹中，那么您的模板 URL 应为“/views/default.html”，前提是“Views”文件夹位于根目录级别。
关于javascript - 使用 Angular-route 找不到路由 javascript 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38385399/