General : CRUD application using AngularJs, NodeJs, MongoDB - Part 1 : introduction

Plan

• Part 1 : introduction
• Part 2 : Implementation of server side
• Part 3 : implementation of client side

Introduction

The purpose of these series of articles is to explain how we can create a CRUD web application using  angularjs  framework, nodeJs and the SGBD MongoDB.
At the beginning of this article, we will talk about the overall architecture of this application, then we will define what will be the prerequisite for better comprehension of different steps.

Using the code

I) Web Application Architecture

The following diagram gives an overall view of our application and illustrates the various exchange between modules.

II) Prerequist

To better understand the next chapters, we will do a brief reminder about thinks that you should know :

1) AngularJs 

AngularJS is a structural framework for dynamic web apps.
You can see more documentation about it on the previous article Create a web site using AngularJS, ASP.net MVC, web api - PART 1 : Introduction.

2) NodeJs

NodeJs is very powerful javascript-based framework/plateform built on Google Chrome's Javascript V8 Engine. It is used to develop I/O intensive web applications like video streaming sites, single-page applications, and other web applications.
NodeJs is a server application, is was developed by Ryan Dahl in 2009.
In what follows, I relied on this api documentation

Environnement setup

to install NodeJs in your machine, you should download it first from nodeJs Web Site.
to make sure every think that run succeffully :
a) open your nodejs command prompt :




b) write some code :

Examples

the below examples, will help you to good understand the  next chapter in wich we talk about the implementation of the server side using nodejs.
 
a) Create Hello world

• create a helloworld.js file on your machine and write this code :

 console.log("Hello wordl !");  

• run it using node.js command prompt

b) Create Server

• create a js file named server.js

  //Import required module   
  var http = require("http");  
  //create local server that listen on 8081 port   
  http.createServer(function (request, response) {  
   // Send the HTTP header   
   // HTTP Status: 200 : OK  
   // Content Type: text/plain  
   response.writeHead(200, {'Content-Type': 'text/plain'});  
   // Send the response body as "Hello World"  
   response.end('Hello World\n');  
 }).listen(8081);  
 // Console will print the message  
 console.log('Server running at http://127.0.0.1:8081/');  

• run it using node command prompt

• Make a request to nodejs server

open http://127.0.0.1:8081/ on any browser and you will get the bellow result :


c) Installing modules using npm :

• What is NPM (Node Package Manager)?

npm is bundled with Node.js installables. and its a very useful tool to provides command line utility to install nodejs modules.

• command line

 npm install <Module Name>  

d) Create a restfull  web services :

• What is REST architecture ?

REST is web standards based architecture and uses HTTP Protocol. that allow client to access to resource in server side for modification and reading via HTTP protocol. each ressources is identified by url and global ID.
the representation of a resource returned it can be text, XML or JSON (the popular one).

• Coding 

1) installaing express module  using npm

npm install express

this command install the famous nodejs web framework module called express.
for more knowledge about the express framework you can visit this link : Express.js official site

2) create a restfull server

 //import required module  
 var express = require('express');  
 //instantiate  
 var app = express();  
 //build our restful service  
 app.get('/getHWMsg', function (req, res) {  
   res.end('Hello World');  
 });  
 //start server  
 var server = app.listen(8081, function () {  
  console.log("Server is listening at http://127.0.0.1:8081/")  
 });   

3) testing request

open the following url :http://127.0.0.1:8081/getHWMsg  in your browser and you will see the bellow result :



     

3) MongoDB

 

MongoDB is an sgbd oriented documents,  and it does not require a predefined data schema.
MongoDB stores all documents into collections.
the representation of the stored documents is on BSON (Binary json data).
the following diagram defines how data are stored into MongoDB :


      1) Environnement setup :

• download MongoDb from this link : MongoDB download
• Create target MongoDB folder, I created : C:\nodejsExample\mongoDb
• Create target MongoDB Data folder, I created : C:\nodejsExample\mongoDb\data
• Add MongoDB bin folder (you can find it in MongoDB installation folder) to the path environment variable
• create MongoDB configuration file, i created : C:\mongoDb\nodejsExample\mongod.cfg that contains the following lines :

systemLog:
    destination: file
    path: C:\nodejsExample\mongoDb\data\log\mongod.log
storage:
    dbPath: C:\nodejsExample\mongoDb\data\db

• install the mongodb service :

    the precedent command create a service with a default name : MongoDB.  

• run mongodb service by tapping on command line the following command:

 <span class="n">net</span> <span class="n">start</span> <span class="n">MongoDB</span>  

• check the log file to view the url of your service, in my case i found : mongodb://localhost:27017/db
• Think about what development language you plan to use :

in our example we will use nodejs, so we should install mongo driver for nodejs using npm command :

npm install mongodb

To see more about MongoDB, you can follow this link.

Points of Interest

Once we finish defining the overall architecture and we did a reminder about technologies used such as angularJs, nodeJs and the SGBD MongoDb, the next chapter will start the implementation of server side using nodeJs.