Month: June 2013

How to Insert dynamic data using Node.js, Express.js, Angular.js and MongoDB?

First, we have to install and configure NodeJS and mongoDB.
Installing NodeJs on windows:
Install it from : http://www.nodejs.org/
Confirm that Node is running correctly:
Here are some steps to make sure that Node is running correctly.
⦁    Create helloNode.js file
var http=require(‘htttp’);
http.createServer(function(req,res){
res.writeHead(200,{‘Content-Type’:’text/plain’});
res.end(“Hello world”);
}).listen(3000);
console.log(‘server is running on port:3000’);
⦁    Run it through command prompt.
 F:\sonika\config\node helloNode.js
        server is running on port:3000
⦁    Open browser and type URL: http://localhost:3000/
⦁    The output will be:
Hello world
⦁    Now,your node is running correctly.
Configuring  MongoDB :
⦁    Download zip file  from this link:  http://www.mongodb.org/downloads
⦁    Unzip it and Put it in particular directory.
⦁    Create ‘data\db’ folders in that directory to store our data(we can give any name to that folder).
⦁    Go to that directory’s lib folder and run it  for that go through following command.
⦁    F:\Sonika\All Data\software\mongodb\bin>mongod.exe  –dbpath  F:\Sonika\All     Data\software\mongodb\data\db    
⦁    Press ‘Enter’.

⦁ It will look like this,

runMongo

⦁    Now,your MongoDB is ready to store data.
Now, lets develop an Student Registration form sample application
For that, we have to follow some steps:-
⦁    Create directory structure.
DirectoryStructure

⦁    Create package.json file.
This text file contains all the information about the project,
like project path,dependencies, author name, tags, bug tracking info  etc..
To create a package.json run npm init command from the root folder.
It will ask series of questions and finally
it will create package.json file.
Our package.json file will look like this.

packageJson
⦁    Create ‘index.html’ file.
This html file will create UI that have two manus “HOME”  and “ADD DETAILS”.
⦁    Create ‘add.html’ file.
    Note: Don’t write <html> and <body> tag in ‘add.html’ and ‘Home.html’ files
because, these files are partialy render inside <ng-view> tag that defined

in index.html file.
⦁    Create’ Home.html’ file.
<form>
<h2>Welcome !</h2>
<h4>Exam Registration Site!</h4>
</form>
⦁    Create ‘styles.css’ file.
This file describe code to design UI.
    Create  ‘appModule.js’  file.
Angular follow MVC pattern that is Model,View,Controller.
This is a Model part of our application that will describe business logic.Our model           name is “myapp” that is already define in index.html file.
If we changed model part then View part will definatly reflect.
‘use strict’;
angular.module(‘myapp’, []).
config([‘$routeProvider’, ‘$locationProvider’,

function($routeProvider, $locationProvider) {
$routeProvider.when(‘/add’, {templateUrl: ‘partials/add.html’, controller: AppCtrl});
$routeProvider.when(‘/home’, {templateUrl: ‘partials/Home.html’});
$routeProvider.otherwise({redirectTo: ‘/’});
$locationProvider.html5Mode(true);
}]);

⦁    Create ‘controllers.js’ file 
This is our controller part that will manage flow of executation.
In this file, we described controller “AppCtrl” that is already define in  ‘index.html’ file.
‘use strict’;
function AppCtrl($scope,$http,$location) {
$scope.form = {};
$scope.submitPost=function(){
$http.post(‘/CRUDOper/addInfo’,$scope.form).
success(function(post){
$location.path(‘/’);
alert(‘Thank you…!’);

})
};
}
AppCtrl.$inject = [‘$scope’,’$http’,’$location’];  //here we inject dependancies

⦁    Create ‘CRUDOper.js’ file.
In this file we described all database configuration like server,database name,

collection name  as well as logic of insertion of data into mongoDB.
⦁    Create ‘app.js’ file.
This file described configuration of express server as well as create instance of

directories that we will use further in our Application and serve static file      i.e“index.html”.
⦁    Now,our Application is ready.
⦁    To run our Application.First we have to run “package.json” file.
⦁    when we will run this file through command prompt then all dependancies and packages  that are describe in “package.json” file will install and that all required to run our application.
⦁    Now,open command prompt and go in root directory of Application i.e  ‘AngularJsApp’.
⦁    Run F:\sonika\Data\AngularJsApp> npm install
⦁    Now, run  ‘app.js’ file to start our express server.
⦁    Run command ‘node app.js’
⦁    Open browser and type URL: http://localhost:3000/
If we click on  ‘Home’ then ‘Home.html’ will render.
If we click on ‘ADD DETAILS’ then ‘add.html’ file will render.
Fill out information in the form and submit to check if application is working fine.
To check our filled data  in MongoDB we have to follow some steps:
⦁    Open second command prompt.
⦁    Go in lib directory of MongoDB and run ‘mongo.exe’.
⦁    mongo.exe will open.
⦁    Type  ‘show databases’  then we will see our database name  ‘studb’.
⦁    Type  ‘use studb’  that is it will use our database to perform operations.
⦁    Type show collections then it will show  our collections name that is ‘students’.
⦁    To see our filled data type  ‘db.students.find()’ .
⦁    Note: Our database name ‘studb’ and collection name ‘students’  are already define in   ‘CRUDOper.js’  file.
⦁    It will look like this,
MongoD

“Download complete source code from”: https://github.com/uhbl92/StudentRegistrationAngularSampleApp.git
Have fun..!

Advertisements