Erreur d'application affichée en blanc

L'idée de mon application est simple. Un utilisateur saisit du texte et ensuite il est affiché et enregistré dans le db. Le problème, c'est qu'il est vide. J'ai beaucoup de code, donc je vais mettre au minimum.

Mon serveur:

// 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; 

Mon contrôleur angulaire principal

 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 = ''; }); } }]); 

Mon html partiel

 <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> 

Aidez-vous

Je ne suis pas sûr de ce que vous entendez par "affiche vide", mais il existe probablement un problème avec ces lignes:

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

Si $scope.meetups est affecté à des results , vous pouvez écraser cette valeur avec $scope.meetups = [] . Rappelez-vous que la ressource $ se résoudra de manière asynchrone, de sorte que les affectations ne se produiront pas exactement dans l'ordre dans lequel elles sont écrites. Essayez d'enlever la ligne $scope.meetups = [] .