MEAN (MongoDB + Express + Angular + NodeJS) stack tutorial

What are we go to build?


Above example will make use of MongoDB as database, Express as Node.js based web server, AngularJS for front end java script framework.  For some styling, we will simply use Bootstrap.

Here are the links to each of the above -


You can learn about each framework and installation instructions on their respective websites.
Aim of this tutorial is to get you started building simple application.

The source code this app is available at -

So, lets get started.

$ mkdir MeanExample
$ cd MeanExample
$ express

Open package.json and add mongoose in the dependency section. Mongoose is a node
module that makes connecting to MongoDB really easy.

Our Package.json looks liks this -

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.0",
    "jade": "*",
    "mongoose" : "*"
  }
}

Now, to install dependencies, 
$ npm install

Express uses Jade as default templating system. However, to keep it simple, 
we will use standard HTML for presentation.

Now, you can start your server by running -
$ node app.js

Express by default uses port 3000. So just hit http://localhost:3000 to see
the express default page.
===================================================================

Now, lets define define a database and collection.
Open a new tab in terminal and define a database named "school" with
some sample data in collection - "students". Please refer

===================================================================
Now, create a new file named Mongo.js with following content -

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/school');

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback () {
  console.log('Connection Open to MongoDB');
});

var StudentSchema = mongoose.Schema({
   firstname: String,
   lastname: String,
   rollnumber: Number
});

var Student = mongoose.model('Students', StudentSchema);

function onStudentSave (err, student) {
  if (err){
     console.log("Saving Failed" + student.firstname);
  }else{
  console.log("Saving Successful" + student.firstname);
  }
} 

module.exports.mongoose = mongoose
module.exports.Student = Student;
module.exports.onStudentSave = onStudentSave;

This code is basically first defining a connection with MongoDB on localhost 
and then defining a schema for a Student Model. 

Also modify app.js to include Mongo.js at the very beginning.
var School = require('./Mongo');

========================================================================

Adding AngularJS and Bootstrap in the application 

All the files inside the public folder are accessible over http. Hence, we will define a js and css folder inside the public directory.

$ mkdir public/css
$ mkdir public/js

Now, download Bootstrap and Angular for their respective websites and copy the CSS and JS inside
respective folders.

Now, create a new file - index.html,  insert basic HTML and include JS/CSS


 
  MEAN Stack Example
 
 
 
 



We are including Jquery just to make Bootstrap work. (Though we will not be making use of any such bootstrap components in this example) 

========================================================================




To be continued...