Saturday, June 20, 2015

Developing MEAN Application Part 2

In the part 1 of making MEAN application, we have done the server side coding. Now in this second part we will do the front-end coding in AngularJS.

 So lets start

 We are using AngularJS, so we have to install AngularJS through bower. but first we need to add bower.json file in our project. So add bower.json file by typing following command in terminal.

 bower init

This will add bower.json file in our project.


Now we can install AngularJS in our project by below command.

bower install angularjs --save

This will add a bower_component directory in our project which has AngularJS library and bower.json file is updated with AngularJS dependency.



Now we will create a index.html file in our project. So the directory structure of our MEAN application become


Now write following lines of code in index.html file.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>MEAN App</h1>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
Our server is running at 3000 port so when we hit the URL http://localhost:3000/ then index.html page should be rendered on the browser. But this is not happening right now. For rendering index.html page on browser, we have to write the following code in app.js.

path = require('path');
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, "/index.html"));
});
view raw gistfile1.js hosted with ❤ by GitHub
Here Above lines of code redirect our server to index.html page and Now when you hit the URL http://localhost:3000/ then this will render index.html in your browser.
We also have to include AngularJS library in index.html page and for that we have to write below code in app.js

app.use('/js', express.static(__dirname));
view raw gistfile1.js hosted with ❤ by GitHub
Now we can include AngularJS library in index.html page.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>MEAN App</h1>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub

Now we code AngularJS simple program which display application name in browser. Thus our index.html page modified as follows.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
Now we create a angular controller file userController.js. So the structure of our application become.


And write following lines of code in userController.js

var app = angular.module('myApp', []);
app.controller('userController', ['$scope', function($scope) {
$scope.appName = 'MEAN App';
}]);
view raw gistfile1.js hosted with ❤ by GitHub
and include userController.js in index.html page

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
<script src="/js/userController.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
Now hit the URL http://localhost:3000/ in browser and you will see the output as follows


Now we will write AJAX calls for GET Request to get all users, DELETE Request to delete a user, PUT Request to edit a user and POST Request to add a user. We are using $resource service for making AJAX calls. Here is a very good video link of using $resource service https://www.youtube.com/watch?v=X_NZr_-RaLw

Install angular-resource by following command.

bower install angular-resource --save

This will install angular-resource in your project. Now include angular-resource in index.html page.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
<script src="/js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/userController.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub


Now we should create a service for handling AJAX Request because this is not the responsibility of controller. So create a service file userService.js. Now final structure of our MEAN application become.


Write following lines of code in userService.js file

app.factory('userService', function($resource) {
var data = $resource('/users/:userId', {userId : '@_id'}, {
update : {
method : 'PUT'
}
});
return data;
});
view raw gistfile1.js hosted with ❤ by GitHub
Now include userService.js in index.html page
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
<script src="/js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/userController.js"></script>
<script src="/js/userService.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
Now we will write a GET Request to get all users and display all users in table. for getting all users in controller our userController.js file modifies as follows.

var app = angular.module('myApp', ['ngResource']);
app.controller('userController', ['$scope', '$resource', 'userService', function($scope, $resource, userService) {
$scope.appName = 'MEAN App';
$scope.getUsers = function () {
userService.query(function(users) {
$scope.users = users;
});
};
$scope.getUsers();
}]);
view raw gistfile1.js hosted with ❤ by GitHub
Now we have all users in $scope.users variable and we will use $scope.users variable to display all users in table. So the index.html file become.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<table>
<tr>
<th>Count</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ $index + 1 }}</td>
<td>{{ user.name }}</td>
<td><button>Edit</button></td>
<td><button>Delete</button></td>
</tr>
</table>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
<script src="/js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/userController.js"></script>
<script src="/js/userService.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
Now if you hit the URL http://localhost:3000/ then you will see the all users in table.


There is only one user in my database that is why it is showing only one user in table. Now we will add some css so that this table look better. so add following lines of css in index.html page

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
view raw gistfile1.css hosted with ❤ by GitHub

so the index.html page become

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<table>
<tr>
<th>Count</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ $index + 1 }}</td>
<td>{{ user.name }}</td>
<td><button>Edit</button></td>
<td><button>Delete</button></td>
</tr>
</table>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
<script src="/js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/userController.js"></script>
<script src="/js/userService.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub

Now when you hit the http://localhost:3000/ URL then you will see the below output in table.


Now we will implement the functionality of adding a user. So first we will write a html code for adding a user. Now our index.html page modifies as below.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<div>
<input type="text" ng-model="newUserName" placeholder="Enter User Name">
<button ng-click="addUser()">Add User</button>
</div><br>
<table>
<tr>
<th>Count</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ $index + 1 }}</td>
<td>{{ user.name }}</td>
<td><button>Edit</button></td>
<td><button>Delete</button></td>
</tr>
</table>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
<script src="/js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/userController.js"></script>
<script src="/js/userService.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
And now we will write the controller code. So the controller code modifies as below.

var app = angular.module('myApp', ['ngResource']);
app.controller('userController', ['$scope', '$resource', 'userService', function($scope, $resource, userService) {
$scope.appName = 'MEAN App';
$scope.getUsers = function () {
userService.query(function(users) {
$scope.users = users;
});
};
$scope.getUsers();
$scope.addUser = function() {
var user = new userService();
user.name = $scope.newUserName;
user.$save(function (user) {
$scope.getUsers();
$scope.newUserName = '';
});
};
}]);
view raw gistfile1.js hosted with ❤ by GitHub

Now when you refresh the http://localhost:3000/ then you will see the below output


When you enter the user name in the input box and click on the add user button then a user is created. for example if you write the user name deepak and click on the add user button then the output would be


Now we will implement the edit functionality of user. So the index.html page modifies as below.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<div>
<input type="text" ng-model="newUserName" placeholder="Enter User Name">
<button ng-click="addUser()">Add User</button>
</div><br>
<div>
<input type="text" ng-model="editUserName">
<button ng-click="changeUserName(editUserName)">Edit User</button>
</div><br>
<table>
<tr>
<th>Count</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ $index + 1 }}</td>
<td>{{ user.name }}</td>
<td><button ng-click="editUser(user)">Edit</button></td>
<td><button>Delete</button></td>
</tr>
</table>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
<script src="/js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/userController.js"></script>
<script src="/js/userService.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
And the userController.js modifies as below.

var app = angular.module('myApp', ['ngResource']);
app.controller('userController', ['$scope', '$resource', 'userService', function($scope, $resource, userService) {
$scope.appName = 'MEAN App';
$scope.getUsers = function () {
userService.query(function(users) {
$scope.users = users;
});
};
$scope.getUsers();
$scope.addUser = function() {
var user = new userService();
user.name = $scope.newUserName;
user.$save(function (user) {
$scope.getUsers();
$scope.newUserName = '';
});
};
$scope.editUser = function (user) {
$scope.user = user;
$scope.editUserName = user.name;
};
$scope.changeUserName = function (editUserName) {
userService.update({userId : $scope.user._id}, {name : editUserName}, function (res) {
$scope.getUsers();
$scope.editUserName = '';
});
};
}]);
view raw gistfile1.js hosted with ❤ by GitHub

Now when you refresh the http://localhost:3000/ then you will see the below output


When you click on the edit button of respective user then that user name will be display in the edit user name input box. Now you need to change the name of user and click on the edit user button. If the PUT Request is successful then it will reflect in the user table. Now we will implement the delete user functionality. So the index.html page modify as below.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="userController">
<h1>{{ appName }}</h1>
<div>
<input type="text" ng-model="newUserName" placeholder="Enter User Name">
<button ng-click="addUser()">Add User</button>
</div><br>
<div>
<input type="text" ng-model="editUserName">
<button ng-click="changeUserName(editUserName)">Edit User</button>
</div><br>
<table>
<tr>
<th>Count</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ $index + 1 }}</td>
<td>{{ user.name }}</td>
<td><button ng-click="editUser(user)">Edit</button></td>
<td><button ng-click="deleteUser(user)">Delete</button></td>
</tr>
</table>
<script src="/js/bower_components/angularjs/angular.min.js"></script>
<script src="/js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/userController.js"></script>
<script src="/js/userService.js"></script>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
And the userController.js modify as below.

var app = angular.module('myApp', ['ngResource']);
app.controller('userController', ['$scope', '$resource', 'userService', function($scope, $resource, userService) {
$scope.appName = 'MEAN App';
$scope.getUsers = function () {
userService.query(function(users) {
$scope.users = users;
});
};
$scope.getUsers();
$scope.addUser = function() {
var user = new userService();
user.name = $scope.newUserName;
user.$save(function (user) {
$scope.getUsers();
$scope.newUserName = '';
});
};
$scope.editUser = function (user) {
$scope.user = user;
$scope.editUserName = user.name;
};
$scope.changeUserName = function (editUserName) {
userService.update({userId : $scope.user._id}, {name : editUserName}, function (res) {
$scope.getUsers();
$scope.editUserName = '';
});
};
$scope.deleteUser = function (user) {
var user = userService.delete({userId : user._id}, function(res) {
$scope.getUsers();
});
};
}]);
view raw gistfile1.js hosted with ❤ by GitHub

Now when you refresh the http://localhost:3000/ then you will see the below output


Now if you click on the delete button of respective user then that user is deleted and our user table changes accordingly.
We are done with our MEAN Application. You can also find code of this MEAN application on my Github account. Here is the link
https://github.com/deepaksisodiya/MEAN-Application

Resources
For ngResource : https://www.youtube.com/watch?v=X_NZr_-RaLw
For MEAN stack : https://www.youtube.com/watch?v=AEE7DY2AYvI
Posted by at
Labels:

3 comments:

  1. AnonymousJune 28, 2015 at 2:56 AM

    Very very good efforts
    few points
    1) there is no js folder visible in images
    2) put all the code on github or one can view final version
    3) in every blog, always use url to previous or next blog like, you are reading part 2, click here to read part1, or now part 2 is finished, now jump to part 3 here..

    ReplyDelete
    Replies
    1. Deepak SisodiyaJune 28, 2015 at 12:48 PM

      @Narendra Sisodiya
      I already put the final version on Github and include the link of Github page once it is finished. And the JS folder is not visible because here i am not focusing, how to structure your MEAN application. I am just want a starting tutorial to get start on MEAN.

      Delete
    2. Deepak SisodiyaJune 28, 2015 at 12:51 PM

      @Narendra Sisodiya
      And also add a link of part 2 in the part 1 of this tutorial once it is finished.
      Thanks for commenting, this will improve my writing skills....:)

      Delete

Subscribe to: Post Comments (Atom)