Angular、ngRoute、routeProvider
早上好!我正在试着用弹簧靴做angular应用程序。我在后端使用了spring boot，但当我开始使用Angular做前端时，我得到了一些误解。我在浏览器中遇到了一些错误，我无法理解错误的含义和含义。我搜索了整个堆栈溢出，但没有找到任何关于它的东西。
我的book.html和book.js是：
var myApp = angular.module('myApps',['ngRoute']).
config(['$routeProvider',function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/books/',
{ templateUrl:'/book/list'}
)}]);<!DOCTYPE html>
<html >
<head>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-resource.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>-->
</head>
<body>
<div data-ng-app="myApps">
<h1>Hello</h1>
<data-ng-view>
</data-ng-view>
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//code.angularjs.org/1.4.4/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.4/angular-route.js"></script>
<script src="//code.angularjs.org/1.4.4/angular-resource.min.js"></script>
<script type="text/javascript" src="apelo/book.js"></script>
</body>
</html>
当我使用routeProvider访问url时，应该在book.html中的list.html是：
<table >
<thead>
<tr>
<td>#</td>
<td>Name Book</td>
<td>Author</td>
<td>Count</td>
<td><i class="icon-plus-sign"></i></td>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="book in book">
<td>{book.id{}}</td>
<td>{{book.name}}<td>
<td>{{book.author}}</td>
<td>{{book.count}}</td>
<td><i class="icon-edit"></i></td>
</tr>
</tbody>
</table>
在这一切之后，我试着跑，得到了这个：
请注意，我在book.js $locationProvider中定义了html5Mode(true);，但无论如何我必须在url中放入#以呈现页面，我正在尝试不使用它，但我从后端获得了json值。
我试了所有我能找到的东西，但还是找不到。我希望你能找出发生了什么事。
<--更新-->
从所有脚本中删除.min后，我得到了新的浏览器控制台错误。
回答 2
Stack Overflow用户
发布于 2016-04-10 21:02:19
首先，在开发应用程序时，不要使用angular的缩小版本来查看浏览器控制台中描述的错误：
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//code.angularjs.org/1.4.4/angular.js"></script>
<script src="//code.angularjs.org/1.4.4/angular-route.js"></script>
<script src="//code.angularjs.org/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="apelo/book.js"></script>更新：
为了安全起见，当你在函数前添加服务的字符串时，你应该编写所有注入的服务：
var myApp = angular.module('myApps',['ngRoute']).
config(['$routeProvider', '$locationProvider',function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/books/',
{ templateUrl:'/book/list'}
)}]);Stack Overflow用户
发布于 2016-04-11 03:09:23
在$locationProvider.html5Mode(true);中，您需要在文档的<head>中设置一个<base>，它使用相对链接围绕应用程序进行链接。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>您还需要管理路由重定向的服务器配置。这是一个很棒的链接，我用它来解决我的问题。Deep Linking AngularJS。
快乐的编码..
https://stackoverflow.com/questions/36529663
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号