Question

我的主要问题是我无法访问请求页面，实际上到目前为止，我没有在此部分遇到HTML代码，我想使用ID来显示图书信息

当我单击“查看详细信息”按钮时，该应用程序转到“ book_details.html”并获取想要的ID ...

book.html代码：

<div class="panel panel-default" ng-init="getBooks()">
    <div class="panel-heading">
        <h3 class="panel-title">Latest Books</h3>
    </div>
    <div class="panel-body">
        <div class="container">
            <div ng-repeat="book in books">
                <div class="col-md-6">
                    <div class="col-md-6">
                        {{ book.title }}
                        <p> {{ book.description }} </p>
                        <a class="btn btn-primary" href="#books/details/{{book._id}}">View Details</a>
                    </div>
                    <div class="col-md-6">
                        <img class="thumbnail" src="{{book.image_url}}">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

book_details.html代码：

<div class="panel panel-default" ng-init="getBook()">
    <div class="panel-heading">
        <h3 class="panel-title">{{book.title}}</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-mdd-4">
                <img src="{{book.image_url}}">
            </div>
            <div class="col-md-8">
                <p>{{book.description}}</p>
                <ul class="list-group">
                    <li class="list-group-item">Genre: {{book.genres}}</li>
                    <li class="list-group-item">Auther: {{book.auther}}</li>
                    <li class="list-group-item">Publisher: {{book.publisher}}</li>
                    <li class="list-group-item">Pages: {{book.pages}}</li>
                    <li class="list-group-item">Image_Url: {{book.image_url}}</li>
                    <li class="list-group-item">Buy_Url: {{book.buy_url}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

在book.js代码的末尾：

var myApp = angular.module('myApp');

myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams',
    function ($scope, $http, $location, $routeParams) {
        $scope.getBooks = function () {
            $http.get('/api/books').then(function (response) {
                $scope.books = response.data;
            });
        }

        $scope.getBook = function () {
            var id = $routeParams.id;
            $http.get('/api/books'+ id).then(function (response) {
                $scope.books = response.data;
                console.log('BookController is loaded...');
            });
        }
    }]);

路由逻辑：

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');


app.use(express.static(__dirname+'/client'));
app.use(bodyParser.json());

Genre = require('./models/genre');
Book = require('./models/book');


// Connect to mangoose
mongoose.connect('mongodb://localhost:27017/bookstore', { useNewUrlParser: true });
const db = mongoose.connection;

app.get('/api/books/:_id', (req, res) => {
    Book.getBookById(req.params._id ,(err, book) => {
        if(err) throw err;
        else res.json(book);
    });
});

角路由器逻辑：

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(($routeProvider) => {
    $routeProvider.when('/', {
        controller: 'BooksController',
        templateUrl: 'views/books.html'
    })
    .when('/books', {
        controller: 'BooksController',
        templateUrl: 'views/books.html'
    })
    .when('/books/details/:id', {
        controller: 'BooksController',
        templateUrl: 'views/book_details.html'
    })
    .when('/books/add', {
        controller: 'BooksController',
        templateUrl: 'views/add_book.html'
    })
    .when('/books/edit/:id', {
        controller: 'BooksController',
        templateUrl: 'views/edit_dook.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});

Answer 1

尝试在book.html中使用ui-sref

<div 
  class="panel panel-default" 
  ng-init="getBooks()">

  <div class="panel-heading">
    <h3 class="panel-title">Latest Books</h3>
  </div>

  <div class="panel-body">
    <div class="container">
      <div ng-repeat="book in books">
        <div class="col-md-6">
          <div class="col-md-6">
            {{ book.title }}
            <p> {{ book.description }} </p>
            <a 
              class="btn btn-primary" 
              href="books/details/{{book._id}}">
              View Details
            </a>
          </div>
          <div class="col-md-6">
            <img class="thumbnail" src="{{book.image_url}}">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

转移到带有HTML标签的请求的页面

1 个答案: