Question

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

文件夹结构：

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>

首先我收到了这个错误：

未捕获的SyntaxError：意外的标记＆lt;

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

"Library App using Angular and Node"

Answer 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 之上，因为控制器利用服务。

节点/角度：模板未从角度路由器

1 个答案: