Моя основная проблема в том, что я не могу получить доступ к странице запроса. На самом деле, пока я не сталкивался с HTML-кодами в этом разделе, я хочу отобразить информацию о книге, используя ID
когда я нажимаю на кнопку View Details, приложение переходит в "book_details.html" и получает нужный идентификатор ...
код 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: '/'
});
});