Tech Junkie Blog: AngularJS SPA: Creating The SPA Project Folder Structure

Tuesday, April 4, 2017

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.  We are leaving the angular-seed folders intact because we done some work with it.  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.

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 index = require('./routes/index');
var users = require('./routes/users');

change it to

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

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

Type http://localhost:3000 into your browser

  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

No comments:

Post a Comment