Single Page Application with Angular.js, Node.js and MongoDB (MongoJS Module) – PhloxBlog

Single Page Application with #AngularJS , #nodejs .and #MongoDB #JavaScript #coding

  • Previously we have posted the communication for Developing Web Application with Node.js, Express.js and MongoDB (MongoJS module).
  • Current post is a proof of concept towards make a web application with Javascript based Web Server.
  • To make this possible, we have selected –

    We have created a Proof of Concept with Javascript based web server, where we have focused on dealing with NoSql (MongoDB) with javascript based framework Node.js and angular.js on client side.

  • B> To Develop the application we need to install mongojs module for Node.js

    C> We need to install express.js for node.js

    Now, we will try to describe the code portion –

    Here we have initialised the express.js within javascript variables in respect of Node.js concept.

  • Below is the code in Angular Controller –

    We have referred the Angular Application in above code

    We have referred the Angular Controller in above code

    We have used the ng-repeat tag to take the users data model from REST communication and shown in HTML

    We have used the ng-submit tag to send the user data model from REST communication and sent to node server to save in MongoDB.

//
@techjunkiejh: Single Page Application with #AngularJS , #nodejs .and #MongoDB #JavaScript #coding

Previously we have posted the communication for Developing Web Application with Node.js, Express.js and MongoDB (MongoJS module). Current post is a proof of concept towards make a web application with Javascript based Web Server. This technological stack is popularly known as MEAN  Stack. To make this possible, we have selected – We have created a Proof of Concept with Javascript based web server, where we have focused on dealing with NoSql (MongoDB) with javascript based framework Node.js and angular.js on client side. Our initial code can be downloaded here. So here are the steps – A> Download and install Node.js from here. B> To Develop the application we need to install mongojs module for Node.js Command – npm install mongojs (should be connected to internet) C> We need to install express.js for node.js Command – npm install express  (should be connected to internet) Now, we will try to describe the code portion – Here we have initialised the express.js within javascript variables in respect of Node.js concept. Here we have initialised the express web server in app variable. Here we have made the connection to the mongodb database using the Node.js mongojs module extension library. Here we have made the configuration related to express.js Here we have made our first REST based web service and tested whether the express.js is up. Here we have created another REST api to get all username from user collection and so have done the mongojs query. Here we have made a POST request to create an user via REST calling. We have made the server to listen at 1212 port. Now run node appmongodbangular.js from command shell. ‘use strict’; var myApp = angular.module(‘myApp’, []); // Taking Angular Application in Javascript Variable // Below is the code to allow cross domain request from web server through angular.js myApp.config([‘$httpProvider’, function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common[‘X-Requested-With’]; } ]); /* Controllers */ function UserListCtrl($scope, $http, $templateCache) { var method = ‘POST’; var inserturl = ‘http://localhost:1212/insertangularmongouser’;// URL where the Node.js server is running $scope.codeStatus = “”; $scope.save = function() { // Preparing the Json Data from the Angular Model to send in the Server. var formData = { ‘username’ : this.username, ‘password’ : this.password, ’email’ : this.email }; this.username = ”; this.password = ”; this.email = ”; var jdata = ‘mydata=’+JSON.stringify(formData); // The data is to be string. $http({ // Accessing the Angular $http Service to send data via REST Communication to Node Server. method: method, url: inserturl, data: jdata , headers: {‘Content-Type’: ‘application/x-www-form-urlencoded’}, cache: $templateCache }). success(function(response) { console.log(“success”); // Getting Success Response in Callback $scope.codeStatus = response.data; console.log($scope.codeStatus); }). error(function(response) { console.log(“error”); // Getting Error Response in Callback $scope.codeStatus = response || “Request failed”; console.log($scope.codeStatus); }); $scope.list();// Calling the list function in Angular Controller to show all current data in HTML return false; }; $scope.list = function() { var url = ‘http://localhost:1212/getangularusers’;// URL where the Node.js server is running $http.get(url).success(function(data) { $scope.users = data; }); // Accessing the Angular $http Service to get data via REST Communication from Node Server }; $scope.list(); }   ….. We have referred the Angular Application in above code   ….. We have referred the Angular Controller in above code Search:
  • {{user.name}}
We have used the ng-repeat tag to take the users data model from REST communication and shown in HTML We have used the ng-submit tag to send the user data model from REST communication and sent to node server to save in MongoDB. Reader can download the complete source-code in GitHub. Also if you find this article helpful, you can connect us in Google+ and Twitter.
Single Page Application with Angular.js, Node.js and MongoDB (MongoJS Module) – PhloxBlog

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.