Question

早上好！我试图用弹簧靴进行角度应用。我用弹簧靴做了后端但是当我开始用Angular做前端时我得到了一些误解。我的浏览器出现了一些错误，我无法理解错误和含义。我正在搜索整个stackoverflow，并没有找到任何相关的东西。

我的book.html和book.js是：

＆＃13;

var myApp = angular.module('myApps',['ngRoute']).

config(['$routeProvider',function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider.when('/books/',
        { templateUrl:'/book/list'}

    )}]);

＆＃13;

<!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>

＆＃13;

当我使用routeProvider访问url时，

list.html应该在book.html中：

＆＃13;

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

＆＃13;

在此之后，我尝试运行并得到了这个：

请注意，我在html5Mode（true）中的book.js $ locationProvider中定义了，但是无论如何我必须在URL中添加＃来渲染页面，我尝试没有它但我从后面获得了json值端。

我尽力而为，但无论如何都没找到。我希望你能找出发生了什么。

＆lt; - 更新 - ＆gt;

从所有脚本中删除.min后，我得到了更新的更严格的控制台错误。

Answer 1

首先，在开发角色时不要使用缩小版的角度应用程序，以查看浏览器控制台中描述的错误：

<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'}

    )}]);

Answer 2

在$locationProvider.html5Mode(true);中，您需要在文档的<base>中设置<head>，使用相对链接链接您的应用程序。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <base href="/">
</head>

您还需要管理服务器配置以进行路由重定向。这是一个很好的链接，我用来解决我的问题。 Deep Linking AngularJS

快乐编码..

Angular，ngRoute，routeProvider

2 个答案: