I have come up with a simple idea for my app. Users can input text, which will then be displayed and saved in the database. However, I am facing an issue where the display shows up blank. I will now share the essential parts of the code to give you a clear picture.
For my server :
// 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');
// Connect to MongoDB
mongoose.Promise = require('bluebird');
mongoose.connect('mongodb://localhost/mean-auth');
// User schema/model
var User = require('./models/user.js');
// Create an 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 handlers
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;
Main Angular Controller:
var myApp = angular.module('myApp', ['ngRoute','ngResource']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main.html',
access: {restricted: true}
})
// Other route configurations omitted for brevity
});
myApp.run(function ($rootScope, $location, $route, AuthService) {
// Run function logic
});
myApp.controller('meetupsController', ['$scope', '$resource', function ($scope, $resource) {
// Controller logic for managing meetups
}]);
HTML Partial Code:
<body>
<div id='main' ng-controller="loginController">
<!-- Main form and post stream -->
</div>
<div ng-controller="meetupsController">
<!-- Meetup information section -->
</div>
</body>
If anyone can offer assistance on resolving the blank display issue within the app, it would be greatly appreciated.