应用程式错误显示空白 [英] App error displaying blank

问题描述

我的应用程序的想法很简单.用户输入文本，然后将其显示出来并保存到数据库中.问题是它显示空白.我有很多代码，所以我们将最低限度的内容放进去.

my app's idea is simple. a user inputs text and then it gets diplayed and saved into the db. The problem am having is that it displays blank. I have a lot of code so am going to put the bare minimum.

我的服务器:

// dependencies
var express = require('express');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var expressSession = require('express-session');
var mongoose = require('mongoose');
var hash = require('bcrypt-nodejs');
var path = require('path');
var passport = require('passport');
var localStrategy = require('passport-local' ).Strategy;
var meetupsController = require('./meetups-controller');
// mongoose
mongoose.Promise = require('bluebird');
mongoose.connect('mongodb://localhost/mean-auth');

// user schema/model
var User = require('./models/user.js');

// create instance of express
var app = express();

// require routes
var routes = require('./routes/api.js');
app.get('/api/meetups', meetupsController.list);
app.post('/api/meetups', meetupsController.create);
// define middleware
app.use(express.static(path.join(__dirname, '../client')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('express-session')({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(path.join(__dirname, 'public')));

// configure passport
passport.use(new localStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

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

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '../client', 'index.html'));
});

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

app.use(function(err, req, res) {
  res.status(err.status || 500);
  res.end(JSON.stringify({
    message: err.message,
    error: {}
  }));
});




app.use(bodyParser());
app.use('/js', express.static(__dirname + '/client/js'));

//REST API

module.exports = app;

我的主要角度控制器

var myApp = angular.module('myApp', ['ngRoute','ngResource']);

myApp.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'partials/main.html',
      access: {restricted: true}
    })
    .when('/api/meetups', {
      templateUrl: 'partials/main.html',
      access: {restricted: true}
    })
    .when('/login', {
      templateUrl: 'partials/login.html',
      controller: 'loginController',
      access: {restricted: false}
    })
    .when('/logout', {
      controller: 'logoutController',
      access: {restricted: true}
    })
    .when('/register', {
      templateUrl: 'partials/register.html',
      controller: 'registerController',
      access: {restricted: false}
    })
    .when('/one', {
      template: '<h1>This is page one!</h1>',
      access: {restricted: true}
    })
    .when('/two', {
      template: '<h1>This is page two!</h1>',
      access: {restricted: false}
    })
    .otherwise({
      redirectTo: '/'
    });
});

myApp.run(function ($rootScope, $location, $route, AuthService) {
  $rootScope.$on('$routeChangeStart',
    function (event, next, current) {
      AuthService.getUserStatus()
      .then(function(){
        if (next.access.restricted && !AuthService.isLoggedIn()){
          $location.path('/login');
          $route.reload();
        }
      });
  });
});

myApp.controller('meetupsController', ['$scope', '$resource', function ($scope, $resource) {
  var Meetup = $resource('/api/meetups');

  Meetup.query(function (results) {
    $scope.meetups = results;
  });

  $scope.meetups = []

  $scope.createMeetup = function () {
    var meetup = new Meetup();
    meetup.name = $scope.meetupName;
    meetup.$save(function (result) {
      $scope.meetups.push(result);
      $scope.meetupName = '';
    });
  }
}]);

我的html部分

<body>
  <div id='main' ng-controller="loginController">
      <form ng-Submit="post()">
         <input required type="text" placeholder="Your name" ng-model="newPost.created_by" /> 
         <textarea required maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
         <input class="button" type="submit" value="Chirp!" />
      </form>
      <div id="post-stream">
         <h4>Chirp Feed</h4>
         <div class='post' ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'">
             <p>{{post.created_by}} says {{post.text}} at {{post.created_at}}</p>
         </div>
         <div ng-controller="logoutController">
           <a ng-click='logout()' class="btn btn-default">Logout</a>
         </div>
          <div ng-controller="logoutController">
           <a ng-click='gotoregister()' class="btn btn-default">register</a>
         </div>
      </div>
  </div>
  <div ng-controller="meetupsController">
     <h1>There are {{meetups.length}} meetups</h1>
     <ul>
     <li ng-repeat="meetup in meetups">
       {{meetup.name}}
     </li>
     </ul>
    <form ng-submit="createMeetup()">
       <input type="text" placeholder="Meetup name" ng-model="meetupName"></input>
       <button type="submit">Add</button>
    </form> 
  </div>
</body>

请帮助

推荐答案

我不确定显示空白"是什么意思，但是这些行可能存在问题:

I'm not sure what you mean by "displays blank", but there is likely an issue with these lines:

Meetup.query(function (results) {
  $scope.meetups = results;
});

$scope.meetups = []

如果为$scope.meetups分配了results，则可能会用$scope.meetups = []覆盖该值.请记住，$ resource将异步解析，因此分配不会完全按照其写入顺序进行.尝试删除$scope.meetups = []行.

If $scope.meetups is assigned results, you may be overwriting that value with $scope.meetups = []. Remember that the $resource will resolve asynchronously, so assignments won't exactly happen in the order they are written. Try removing the $scope.meetups = [] line.

这篇关于应用程式错误显示空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！