AngularJS SPA: Creating The SPA Project Folder Structure

Now that we have express installed let's do a little clean up and organization by creating some folders that we need.  First of all create the models and controllers folder inside the app folder your folder should look like the following





Now go to the folder where you installed express, the folder should look like the following

What you want to do is copy the routes and views folders into the app folder.  Your app folder should now look like the following.   As the tutorial continue we will delete when we are sure we don't need it.  It looks a little messy right now but when it's completed the folders will look a lot cleaner.  Just igmore the .sln file.  I use Visual Studio as my IDE for websites, because it's awesome.


We now have to tell express that we moved the routes and views folders, we do this by changing the configuration in the app.js file.  Open the app.js file in the express root folder with a text editor and look for the line app.set('views', path.join(__dirname, 'views')); and change it to

app.set('views', path.join(__dirname, 'app', 'views'));

now look for the routes configuration with the lines

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

change it to

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

The completed code should look like the following:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

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

var app = express();

// view engine setup
app.set('views', path.join(__dirname,'app', 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Now run express by typing npm start and you will see that it still works!













Type http://localhost:3000 into your browser


















Posts In The AngularJS SPA Application Series:

1. Setting Up Angular-Seed
2. Preparing Angular-Seed For The Shopping List Application
3. Refactor Code to Not Use Global Variables (Shopping List App)
4. Installing MongoDB
5. Create a MongoDB Configuration FIle
6. Install mongoDB as a Windows Service
7. Installing Express generator
8. Installing ExpressJS Application Server
9. Creating The SPA Project Folder Structure
10. Setup Express To Serve Static Files
11. Setup The Shopping Application For Heroku And Testing It Locally
12. Deploy Shopping List Application To Heroku
13. Install RoboMongo GUI for MongoDB