CodeSnips

Sunday, July 13, 2014

MEAN Stack CRUD Example

I thought it would be useful to create a full example using the MEAN stack. I wanted to include most of the bells and whistles in this particular example so that it would serve as a useful reference for other more complex applications.

MEAN is an acronym which stands for "Mongo Express Angular Node", and I must say this stack lets you create some very mean (and lean) code. 

The source for the full example is angularExample on GitHub - the README.md tells you how to run it.

Points of interest

  • The 'seeddb' script shows how to run Mongo command and run a Javascript setup script which creates the database and seeds the Account and AccountType collections. It creates a unique index on the Accounts collection.
  • The app.js file in the project root folder has the setup for Express, it passes the configured express handler as a "module.exports = app" - which is used by the (bin/www) script to setup the server listener.
  • Client-side setup of Socket.IO can be found in (/public/views/layout.jade) last two lines. This creates a global "socket" variable for client-side javascript to use for sending/receiving events. 
  • The application uses Socket.IO to broadcast account update notifications to the client browsers using the application.  See the bin/www file on how server-side Socket.IO is plugged in - along with the event send/receive.
  • The AngularJS controller (/public/javascripts/app/accountController.js) has the Socket.IO client code which sends notifications after saving/deleting items, and listens for the broadcast event in order to refresh the account list.
  • The (/routes/index.js) file has all the route handlers for the REST "/api" routes and home page load.




No comments:

Post a Comment