In the last part of the series of articles on MEAN development, let’s talk about the A and N of MEAN.
The N of MEAN (Hello Server!)
Here we go with N of the MEAN stack, NodeJS. Let’s develop a server run on port 8080. This server will listen for requests to add the name of the team and the captain. Let’s create a server.js file in the root folder of our application with the following code:
//server.js
var express = require("express");
var app = express(); require("mongoose").connect("mongodb://localhost/Football"); require("./app/models");
require("./app/routes")(app);
var port = 8080;
app.listen(port);
console.log("We're all set");
The server.js connects to our MongoDB, loads the models and routes, and starts on port 8080. Let’s start our server as shown in the figure. Please remember, your MongoDB server has to be running before you start the Node server. In the figure below, you can notice MongoDB running in the other tab.
Let’s add a team and captain using a POSTMAN client in Chrome as shown here.
Now to the last step; let’s build the UI for the client using Angular JS.
The A of MEAN (Hello Client!)
Let’s build a simple UI in Angular JS. Angular JS is a MVC framework for building the client interface. Let’s build a view to enter the team details. This information will be taken to the AngularJS controller and passed on to ExpressJS. The public folder will host the AngularJS related files. In server.js, let’s add the following line to include the public folder:
app.use(express.static(__dirname + “/public”));
Let’s create a controller class TeamController in controllers.js file. The TeamController accepts the request from the user and sends an AJAX request to team/add/:name/:captain URL.
var teamApp = angular.module("Football",[]); teamApp.controller("TeamController",function($scope,$http){
$scope.output = "";
$scope.add = function() {
$http.post("/team/add/" + $scope.team+"/" + $scope.captain)
.success(function(data, status, headers, config) {
$scope.output = data["name"] +
" with id: " +
data["_id"] +
" created successfully";
})
.error(function(data, status, headers, config) {
$scope.output = "Error adding team " +
data["name"];
});
}
});
You have a TeamController that uses $http to send a POST request to /team/add by passing the team’s name and captain. We have the add() that will be invoked when the user hits a button from the HTML file that you’ll see in the next section.
Note: In AngularJS, ideally your Controller would talk to Services that will send AJAX requests to the server. But I have chosen to keep it simple for the sake of simplicity.
The last entity is the index.html file that has a form. Here comes the final piece:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="Football">
<h1>MEAN Football</h1>
<hr/>
<h4>Add your team</h4>
<div ng-controller="TeamController">
<input type="text" ng-model="team" placeholder="Team"/><br/>
<input type="text" ng-model="captain"
placeholder="Captain"><br/>
<button ng-click="add()">Add</button>
<h5>{{output}}</h5>
</div>
</body>
</html>
The form is bound to the TeamController. Clicking the button will invoke the add() method in the controller. ALRIGHT! Time to execute the application. Restart your NodeJS server and bring up the index.html in the browser. Enter the values and hit the Add button to see the output as shown here.
Here’s the application structure after writing all this code.
When you download the MEAN framework you would find more files like gruntfile.js for building, karma.conf.js for unit testing and some more configuration files. You can plugin any other JavaScript library into the MEAN application seamlessly.
Final words
I just used a simple text editor to implement this application. No heavyweight IDEs, no complex installation and configuration. Moreover, you just use one language for developing the entire application. You can push this application easily to AWS or Heroku cloud, and that itself is a nice topic for another article. MEAN is definitely changing the face of the development. I would strongly encourage you to take a serious look at it. You can download the complete code for the article from https://github.com/prabhu-durasoft/MEAN-Development.
