节点/角度：模板未从角度路由器加载答案

【问题标题】：Node / Angular : Template is not loading from angular router节点/角度：模板未从角度路由器加载
【发布时间】：2018-05-08 12:57:41
【问题描述】：

请帮助我知道我错过了什么？这是我的代码：

文件夹结构：

app
  public
    views
      books.html
    controllers
  index.html
  main.js
  server.js

index.html

<!doctype html>
<html ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>ANGULARJS App</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
        <script src="/main.js"></script>
        <!-- <script src="/views/books.html"></script> -->
        <script src="/controllers/bookController.js"></script>
        <script src="/services/service.js"></script>
        <link rel="stylesheet" href="/style/style.css">

        <!-- load angular -->
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <h2>Library App using Angular and Node</h2>
            </div>
        </div>

        <div ng-view></div>

    </body>
</html>

main.js

var app = angular.module('app', ['ngRoute'])
.config(function($routeProvider,  $locationProvider) {
    $routeProvider
    .when("/", {
        templateUrl : '/books.html',
        controller  : 'bookController'
    })
    .when("add", {
        templateUrl : "/add.html",
        controller  : 'addController'
    })
    .when("edit", {
        templateUrl : "/edit.html",
        controller  : 'editController'
    })
    .when("top-rated", {
        templateUrl : "/topRated.html",
        controller  : 'topRatedController'
    });
});

server.js

app.use(express.static(__dirname + '/public'));               

app.get('*', function(req, res) {
  res.sendfile('./public/index.html'); 
});

books.html

<div ng-init="loadIntialdata()">

    <div class="container well mtp75">
        <!-- <span ng-click="emptyInput()" data-toggle="modal" data-target="#bookModal" class="btn btn-success pull-right">Add New Book</span> -->
        <a class="btn btn-success pull-right btn-space" href="#!book/add">Add New Book</a>
        <a class="btn btn-success pull-right btn-space" href="#!book/top-rated">Top Rated Books</a>
        <input type="text" ng-model="search" placeholder="Search">
        <div class="row"></div>
        <br>

        <table cellpadding=10 cellspacing=10 border=0 class="table">
            <tr>
                <th>No.</th>
                <th>Favourite</th>
                <th>Name</th>
                <th>Author</th>
                <th>Genre</th>
                <th>Rating</th>
                <th>UPDATE</th>
                <th>DELETE</th>
            </tr>

            <tr ng-repeat="book in books | filter:search">
                <td>{{$index+1}}</td>
                <td>
                    <div class="star-rating"><span id="favourite_{{ book.id }}" class="glyphicon glyphicon-heart"
                                                   ng-class="{'fa-heart': book.favourite}"
                                                   ng-click="markAsFavourite(book.id, $index)"></span></div>
                </td>
                <td>{{ book.name }}</td>
                <td>{{ book.author }}</td>
                <td>{{ book.genre_s }}</td>
                <td>
                    <div class="star-rating">
                        <span class="glyphicon glyphicon-star-empty" ng-repeat="v in [1, 2, 3, 4, 5]"
                              ng-class="{'fa-star': v <= book.rating}" id="rating_{{ book.id }}_{{ v }}"
                              ng-click="rateBook(v, book.id, $parent.$index)" value="{{ v }}"></span>
                    </div>
                </td>
                <td><a ng-click="enableUpdateForm($index)" class="btn btn-primary btn-sm glyphicon glyphicon-pencil"
                       href="#!book/edit"></a></td>
                <td>
                    <div ng-click="deleteBook($index)" class="btn btn-danger btn-sm glyphicon glyphicon-remove"></div>
                </td>
            </tr>
        </table>

    </div> <!-- End OF Row -->

</div>

首先我得到了这个错误：

Uncaught SyntaxError: Unexpected token

现在模板没有加载，没有控制台错误我所能看到的只是加载我的 index.html 并显示这个

"Library App using Angular and Node"

【问题讨论】：

不应该是templateUrl : 'views/books.html',吗？（假设 index.html 在公共文件夹中，否则它将是 templateUrl : 'public/views/books.html',）
它甚至可能是templateUrl : 'public/views/books.html'，因为他的 index.html 和 main.js 在外面
我在控制台上没有收到任何错误，例如无法找到 books.html，我还是更改了它。我认为 server.js 有问题
您在这个问题stackoverflow.com/questions/31495743/… 中发表了评论，指出“它对您不起作用”，但您的问题在这里显示的代码类似于问题中的损坏代码，而不是建议的修复答案。即使用app.get('/*',...) 而不是app.get('*',...)。 / 帮助服务器意识到您只需要来自根目录的通配符，而不是来自 everything 的通配符。

标签： angularjs node.js

【解决方案1】：

使用ngRoute

需要注意以下几点

由于您具有模块化结构，并且您的路由、控制器和服务有不同的文件，因此您必须声明一次 app 变量，并在声明服务和控制器时使用此变量

你的 main.js 应该看起来像

// declare app variable
var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider,  $locationProvider) {
    $routeProvider.when("/", {
        templateUrl : '/books.html',
        controller  : 'bookController'
    })
    ...
});

在声明控制器时，使用 main.js

中声明的相同变量

app.controller('bookController', ['$scope', '$rootScope', 'sharedProperties', function($scope, $rootScope, sharedProperties) {
  ....
})

现在按以下顺序加载脚本文件index.html

<script src="/main.js"></script>
<script src="/services/service.js"></script>
<script src="/controllers/bookController.js"></script>

注意： service.js 应该在 controller.js 之上，因为控制器使用服务。

【讨论】：