Single Page Application with Angular.js, Node.js and MongoDB (MongoJS Module) – (Updated for Express 4) – Part 2

We had posted article for Single Page Application with Angular.js, Node.js and MongoDB (MongoJS Module) – (Updated for Express 4) – Part 1 where we mainly discussed the node.js server side section of the article.

In this post we will describe about the Angularjs client part of the application.

As this article is a continuation of the above post, we will discuss the codes in Angular first.

Below is the code for

Angular.js controller

 
'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:8080/insertuser';// 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:8080/getusers';// 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();
}

Angular Template and HTML

Below is Angualrjs App Initiation for application which will be responsible for the behavior of DOM Elements in this web page.

 <html lang="en" ng-app="myApp"> 
.....
 <body ng-controller="UserListCtrl">
.....

We have referred the Angular Controller in above code – it will broadly control the behavior of the html fragments and components within the controller. We had shown the controller code previously.

Search: <input ng-model="user">
<div class="span10">
    <!--Body content-->
    <ul class="users">
        <li ng-repeat="user in users | filter:user ">
            {{user.name}}
        </li>
    </ul>
</div>

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

 
<form name="myform" id="myform1" ng-submit="save()">
    <fieldset>
        <legend>New User</legend>
            <div class="control-group">
                <center><input type="text" placeholder="User…" ng-model="username" size=50 required/></center>
                <center><input type="text" placeholder="Password…" ng-model="password" size=50 required/></center>
                <center><input type="text" placeholder="Email…" ng-model="email" size=50 required/></center>
            </div>
    </fieldset>
    <p>
         <div><center><button type="submit" >Save now...</button></center></div>
    </p>
</form>

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.

A little note –

We will attach the Testing for node.js modules and angular.js modules in our next articles. So watch the site for next articles within next few days.

Also,

When we wrote these series, we assumed that user have a knowledge over angular.js, node.js, express.js and mongodb. So explanation of each of the line of code are out of scope of the series. May be we will deal with those in later articles.

Reader can download the complete source-code in GitHub.

Also if you find this article helpful, you can connect us in Google+ and Twitter.

2 thoughts on “Single Page Application with Angular.js, Node.js and MongoDB (MongoJS Module) – (Updated for Express 4) – Part 2

Leave a Reply

Your email address will not be published. Required fields are marked *