So I am almost done with creating a bookstore app using the MEAN stack, but my books are not rendering in the browser when I created the front end. The books are definitely in the Mongo database:
所以我几乎完成了使用MEAN堆栈创建书店应用程序,但是当我创建前端时,我的书籍不会在浏览器中呈现。这些书肯定在Mongo数据库中:
/Users/ldco2016/Projects/bookstore/client/index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>MEAN Books</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MEAN Bookstore</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#/books/add">Add Book</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/app.js"></script>
<script src="/controllers/books.js"></script>
<script src="/controllers/genres.js"></script>
</body>
</html>
/Users/ldco2016/Projects/bookstore/client/views/books.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="row">
<div ng-repeat="book in books">
<div class="col-md-6">
<div class="col-md-6">
{{book.title}}
<p>{{book.description}}</p>
</div>
<div class="col-md-6">
<img ng-src="{{book.image_url}}" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
The Javascript console in the Chrome Browser is saying this:
Chrome浏览器中的Javascript控制台是这样说的:
BooksController loaded...
angular.js:13920 TypeError: Cannot set property 'getBooks' of undefined
at new <anonymous> (http://localhost:3000/controllers/books.js:6:18)
at Object.instantiate (http://localhost:3000/bower_components/angular/angular.js:4733:14)
at $controller (http://localhost:3000/bower_components/angular/angular.js:10369:28)
at Object.link (http://localhost:3000/bower_components/angular-route/angular-route.js:1054:26)
at http://localhost:3000/bower_components/angular/angular.js:1247:18
at invokeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9934:9)
at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9335:11)
at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8620:13)
at publicLinkFn (http://localhost:3000/bower_components/angular/angular.js:8500:30)
at lazyCompilation (http://localhost:3000/bower_components/angular/angular.js:8844:25) <div ng-view="" class="ng-scope">
/Users/ldco2016/Projects/bookstore/app.js:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
app.use(express.static(__dirname+'/client'));
app.use(bodyParser.json());
Genre = require('./models/genre.js');
Book = require('./models/book.js');
// Connect to Mongoose
mongoose.connect('mongodb://localhost/bookstore');
var db = mongoose.connection;
app.get('/', function(req, res){
res.send('Please use /api/books or /api/genres');
});
app.get('/api/genres', function(req, res){
Genre.getGenres(function(err, genres){
if(err){
throw err;
}
res.json(genres);
});
});
app.post('/api/genres', function(req, res){
var genre = req.body;
Genre.addGenres(genre, function(err, genre){
if(err){
throw err;
}
res.json(genre);
});
});
app.put('/api/genres/:_id', function(req, res){
var id = req.params._id
var genre = req.body;
Genre.updateGenres(id, genre, {}, function(err, genre){
if(err){
throw err;
}
res.json(genre);
});
});
app.get('/api/books', function(req, res){
Book.getBooks(function(err, books){
if(err){
throw err;
}
res.json(books);
});
});
app.get('/api/books/:_id', function(req, res){
Book.getBookById(req.params._id, function(err, book){
if(err){
throw err;
}
res.json(book);
});
});
// This is not production level code, it is not safe to allow whatever a user posts to go into your database! You do have mongoose which uses models
// which makes it more secure, then there is authentication and a lot of other security measures to take. If this were to go into production.
app.post('/api/books', function(req, res){
var book = req.body;
Book.addBooks(book, function(err, book){
if(err){
throw err;
}
res.json(book);
});
});
app.put('/api/books/:_id', function(req, res){
var id = req.params._id
var book = req.body;
Book.updateBooks(id, book, {}, function(err, book){
if(err){
throw err;
}
res.json(book);
});
});
app.delete('/api/books/:_id', function(req, res){
var id = req.params._id
Book.removeBooks(id, function(err, book){
if(err){
throw err;
}
res.json(book);
});
});
app.listen(3000);
console.log('Running on port 3000...');
/Users/ldco2016/Projects/bookstore/client/app.js:
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($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.html'
})
.otherwise({
redirectTo: '/'
});
});
/Users/ldco2016/Projects/bookstore/client/controllers/books.js:
var myApp = angular.module('myApp');
myApp.controller('BooksController', [function($scope, $http, $location, $routeParams){
console.log('BooksController loaded...');
$scope.getBooks = function(){
$http.get('/api/books').success(function(response){
$scope.books = response;
});
}
}]);
Need assistance with why my books and their images are not rendering on the page. Any suggestions?
需要帮助解释我的书籍及其图像未在页面上呈现的原因。有什么建议么?
1 个解决方案
#1
1
Try declaring the dependencies like so:
尝试声明依赖关系,如下所示:
myApp.controller('BooksController', ["$scope", "$http", "$location", "$routeParams", function($scope, $http, $location, $routeParams){
...
}]);
#1
1
Try declaring the dependencies like so:
尝试声明依赖关系,如下所示:
myApp.controller('BooksController', ["$scope", "$http", "$location", "$routeParams", function($scope, $http, $location, $routeParams){
...
}]);