Angular Mongo Example

This is a revamping of the code examples from the phloxblog.in blog post "Single Page Application with Angular.js, Node.js and MongoDB (MongoJS Module)" by Piyas De.

This post is not meant to replace that post. It is only intended to complement it by showing updated code examples.

The examples have been updated to use Express 4.x, use a more RESTful API, pass JSHint (via grunt), install angular via Bower and work as a npm package. This repository also includes a configuration file for EditorConfig. You should check it out if you are not familiar with it.

This uses a MongoLab database. If this post leads to that database getting used for things other than this example, it will be deleted without notice.

How to setup and run

$ npm install
$ npm start

To see the application in action go to http://localhost:8080/ in your browser.

To see the API in action go to http://localhost:8080/api/user in your browser or do the following with curl.

$ curl http://localhost:8080/api/user

How to run JSHint against all the files

$ grunt test

Directory Structure

There is an enormous amount of reading[1] [2] for all of the opinions on how the AngularJS application directory should be structured.

|-- angular-mongo/                 <---- Root directory
|   |-- .bowerrc                   <---- Configuration file for Bower
|   |-- .editorconfig              <---- Configuration file for EditorConfig
|   |
|   |-- .git/                      <---- Configuration directory for Git
|   |   |-- ...
|   |
|   |-- .gitignore                 <---- Ignore file for Git
|   |-- .jsdoc-conf.json           <---- Configuration file for JSDoc
|   |-- .jshintrc                  <---- Configuration file for JSHint
|   |-- Gruntfile.js               <---- Configuration file for grunt
|   |-- README.md                  <---- Documentation
|   |
|   |-- app/                       <---- The AngularJS application directory
|   |   |-- app-controller.js      <---- Controller
|   |   |-- index.html             <---- HTML View
|   |
|   |-- bower.json                 <---- Configuration file for Bower
|   |-- node_modules/              <---- `npm install` dependencies directory
|   |   |-- ...
|   |
|   |-- package.json               <---- Configuration file for npm
|   |
|   |-- public/                    <---- Static files generated from `bower install`
|   |   |-- ...
|   |
|   |-- server.js                  <---- The ExpressJS server
|   |-- set-env.conf               <---- Configuration file for the runtime environment

References

• Single Page Application with Angular.js, Node.js and MongoDB (MongoJS Module) - The original blog post that inspired this body of work.

• Google JavaScript Style Guide

• An AngularJS Style Guide for Closure Users at Google

• Best Practice Recommendations for Angular App Structure

• Proposals to Make Components More Reusable #109