Thinkster 平均堆栈教程显示空白页答案

【问题标题】：Thinkster Mean stack tutorial displaying blank pageThinkster 平均堆栈教程显示空白页
【发布时间】：2016-09-12 14:51:37
【问题描述】：

我正在尝试做这个教程，起初一切都很好，但是在我运行服务器时使用了 angular ui-router 之后，我得到的只是一个空白页面。我可以通过终端插入 db 并且 jason 数据都工作正常，但页面正在加载到空白页面...

public/javascripts/angularApp

    var app = angular.module('flapperNews', [require('angular-ui-router')]);

   app.factory('posts', ['$http',function($http){
   var o = {
  posts: []
       };
   return o;

   o.getAll = function() {
    return $http.get('/posts').success(function(data){
    angular.copy(data, o.posts);
  });
  };


 }]);


 app.controller('MainCtrl', [
  '$scope',
   'posts',
   function($scope, posts){
   $scope.posts = posts.posts[$stateParams.id];
   $scope.addPost = function(){
   if(!$scope.title || $scope.title === '') { return; }
   $scope.posts.push({title: $scope.title, link: $scope.link, upvotes: 0});
     $scope.title = '';
    $scope.link = '';
                      };
   $scope.incrementUpvotes = function(post) {
    post.upvotes += 1;
                                       };
  }]);


 app.config([
 '$stateProvider',
 '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('home', {
  url: '/home',
  templateUrl: '/home.html',
  controller: 'MainCtrl'
  resolve: {
    postPromise: ['posts', function(posts){
  return posts.getAll();
  }]
 }
   });

 .state('posts', {
 url: '/posts/{id}',
  templateUrl: '/posts.html',
 controller: 'PostsCtrl'
   });

  $urlRouterProvider.otherwise('home');
 }]);


 app.controller('PostsCtrl', [
'$scope',
 '$stateParams',
 'posts',
  function($scope, $stateParams, posts){

 $scope.addComment = function(){
 if($scope.body === '') { return; }
 $scope.post.comments.push({
  body: $scope.body,
  author: 'user',
 upvotes: 0
 });
 $scope.body = '';
};

}]);

routes/index.js`

var mongoose = require('mongoose'); 
var express = require('express');
var router = express.Router();
var Post = mongoose.model('Post');
var Comment = mongoose.model('Comment')

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
 });

 router.get('/posts', function(req, res, next) {
 Post.find(function(err, posts){
  if(err){ return next(err); }

  res.json(posts);
 });
});

/* for saving post into db */
router.post('/posts', function(req, res, next) {
var post = new Post(req.body);

 post.save(function(err, post){
   if(err){ return next(err); }

  res.json(post);
 });
});

 /* for retriving one post from db */
router.param('post', function(req, res, next, id) {
var query = Post.findById(id);

 query.exec(function (err, post){
if (err) { return next(err); }
if (!post) { return next(new Error('can\'t find post')); }

req.post = post;
return next();
 });
});


 /* for retriving one comment from db */
router.param('comment', function(req, res, next, id) {
 var query = Post.findById(id);

   query.exec(function (err, comment){
  if (err) { return next(err); }
  if (!comment) { return next(new Error('can\'t find comment')); }

req.comment = comment;
return next();
 });
});

/*for displaying the retrieved post*/
router.get('/posts/:post', function(req, res) {
res.json(req.post);
});

/*for displaying the post upvote*/
router.put('/posts/:post/upvote', function(req,res,next){
req.post.populate('comment',function(err,post){
 if(err){return next(err);}

   res.json(post);
  });
  });

 /*saving comment*/
 router.post('/posts/:post/comments',function(req, res, next){
 var comment = new Comment(req.body);
  comment.post = req.post;

  comment.save(function(err,comment){
  if(err){return next(err);}

 req.post.comments.push(comment);
 req.post.save(function(err,post){
  if(err){return next(err);}

   res.json(comment);
 });
 });
});

/*display comment upvote*/
 router.put('/posts/:post/comments/:comment/upvote',                     function(req,res,next){
  req.comment.upvote(function(err,comment){
  if(err){return next(err);}

   res.json(comment);
   });
  });

 module.exports = router;

views/index.ejs

   <html>
  <head>
  <title>My Angular App!</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
 <script src="/javascripts/angularApp.js"></script>

  <style> .glyphicon-thumbs-up { cursor:pointer } </style>
 </head>
 <div class="row">
 <div class="col-md-6 col-md-offset-3">
  <ui-view></ui-view>
</div>
</div>

<script type="text/ng-template" id="/home.html">
   <div class="page-header">
  <h1>Flapper News</h1>
  </div>

<div ng-repeat="post in posts | orderBy: '-upvotes'">
  <span class="glyphicon glyphicon-thumbs-up" ng-click="upvote(post)">        </span>
    {{post.upvotes}}
   <span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)"></span>
  <span style="font-size:20px;margin-left:10px">
    <a ng-show="post.link" href="{{post.link}}">
      {{post.title}}
    </a>
    <span ng-hide="post.link">
      {{post.title}}
    </span>
    <span ng-show="post.author">
      posted by <a>{{post.author}}</a> |
    </span>      
 </span>
  <span>
    <a href="#/posts/{{post._id}}">Comments</a>
      ({{post.comments.length}})
  </span>
  </div>

<form ng-submit="addPost()" ng-show="isLoggedIn()" style="margin-top:30px">
  <h3>Add a new post:</h3>

  <div class="form-group">
    <input type="text" class="form-control" placeholder="Title"  ng-model="title">
  </div>

  <div class="form-group">
    <input type="text" class="form-control" placeholder="Link" ng-model="link">
  </div>

  <button type="submit" class="btn btn-primary">Post</button>
 </form>
 <div ng-hide="isLoggedIn()">
  <h3>You need to <a href="/#/login">Log In</a> or <a href="/#/register">Register</a> before you can add a post.</h3>
</div>
</script>

<script type="text/ng-template" id="/posts.html">
 <div class="page-header">
  <h3>
    <a ng-show="post.link" href="{{post.link}}">
      {{post.title}}
    </a>
    <span ng-hide="post.link">
      {{post.title}}
    </span>
  </h3>
 </div>

 <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
  <span class="glyphicon glyphicon-thumbs-up" ng-click="upvote(comment)"></span>
    {{comment.upvotes}} 
  <span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(comment)"></span>
    - by {{comment.author}}
  <span style="font-size:20px; margin-left:10px;">
    {{comment.body}}
  </span>
  </div>
 <form ng-submit="addComment()"
style="margin-top:30px;">
<h3>Add a new comment</h3>

 <div class="form-group">
  <input type="text"
  class="form-control"
  placeholder="Comment"
  ng-model="body"></input>
 </div>
 <button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>

app.js

  var mongoose = require('mongoose');
   require('./models/Posts');
   require('./models/Comments');

     mongoose.connect('mongodb://localhost/news');



     var express = require('express');
      var path = require('path');
     var favicon = require('serve-favicon');
     var logger = require('morgan');
     var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');

    var routes = require('./routes/index');
    var users = require('./routes/users');

     var app = express();

  // view engine setup
   app.set('port', process.env.PORT || 3000);
   app.set('views', path.join(__dirname, 'views'));
   app.set('view engine', 'ejs');

   // uncomment after placing your favicon in /public
   //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
   app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', routes);
    app.use('/users', users);

    // catch 404 and forward to error handler
    app.use(function(req, res, next) {
    var err = new Error('Not Found');
     err.status = 404;
     next(err);
    });

     // error handlers

     // development error handler
      // will print stacktrace
      if (app.get('env') === 'development') {
       app.use(function(err, req, res, next) {
     res.status(err.status || 500);
   res.render('error', {
  message: err.message,
  error: err
    });
 });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});

module.exports = app;

【问题讨论】：

标签： mean-stack

【解决方案1】：

我也遇到了同样的问题。他们需要在教程中修复它，但在你的 angularApp.js 文件中你有这个：

var app = angular.module('flapperNews', [require('angular-ui-router')]);

对于 ui-router，你实际上必须像这样注入它：

var app = angular.module('flapperNews', ['ui.router']);

希望有帮助！

就我个人而言，我还只是为我的视图创建了单独的文件，以便我以后可以更整洁地添加它，因为我不喜欢在我的索引页面上拥有所有这些。

【讨论】：

【解决方案2】：

在您的 Angularapp 文件中，尝试将您的 return o 语句移到 o.getAll() 函数下方，以便在返回之前实际将帖子加载到数组中。这对我有用。

app.factory('posts', ['$http', function($http){
var o = {
posts: []
};
o.getAll = function() {
    return $http.get('/posts').success(function(data){
        angular.copy(data, o.posts);
    });
};
return o; 
}]);

【讨论】：