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... 

MongoDB - Getting started

How to setup MongoDB on Mac?

This guide is to help you install latest MongoDB on mac and get started.

 

1. Where to Download From?

Please go to http://www.mongodb.org/downloads page and download the latest version suitable for mac.

 $ tar xzf mongodb-osx-x86_64-2.4.6.tgz
$ sudo mv mongodb-osx-x86_64-2.4.6.tgz /usr/local/mongodb

2. How to start the server?

$ mkdir ~/mongo_db
$ mongod --dbpath ~/mongo_db --rest --jsonp

You can also start server by simply executing
$ mongod

However, below are the most commonly used parameters for quick setup and use.

--dbpath determines the location where the database will be created.
--rest parameter is necessary for enabling RESTful API
--jsonp is needed enabling javascript callback when writing front end AJAX calls.

3. How to test your setup?

Open a new terminal and run below command to open mongodb CLI.

$ mongo

Here are simple and often used commands - 

To see the list of databases - 

> show dbs;
local    0.078125GB

To create/use a database named "school" (MongoDB creates an actual DB only when you start inserting data. There is no other separate step of database creation) -

> use school;
switched to db school

MongoDB has concept called collection, which is little analogues to standard RDBMS tables.
Now to insert data into a collection called "student", simply execute -

> db.students.save({"firstname": "nilesh","lastname": "mahajan","rollnumber": 101});

To view the content of a collection -

> db.students.find()
{ "_id" : ObjectId("52536af24e0b01d0863bc93d"), "firstname" : "nilesh", "lastname" : "mahajan", "rollnumber" : 101 }

MondoDB automatically inserts an _id attribute if the input object doesn't have it.

If you go to, http://localhost:28017/
you can see a control panel with additional information, list of commands etc.

Also, if you hit  http://localhost:28017/school/students/
you can see retrieve your collection information. Please note the trailing '/' at the end of above URL, otherwise mongodb will not show you any error. But it will return 0 objects always.

And finally, to clear the collection -

> db.students.remove()

This should be easy to get you started with mongodb setup and some basic CRUD operations.  
Subscribe to: Posts (Atom)