MEAN Tutorial (Part 4) : Build Front-end in AngularJs

This is the final part of the MEAN series. Here we will design Front-end of our application using AngularJS. We have already learned how to setup mongodb (see here) to store data and created web apis using node js and express 4 (see here).

DEMO DOWNLOAD

See below folder structure for Book app.

 

Folder Structure

Main App view

Now we will further see how to build an app using angular js. So let’s start with an over all full page UI architecture see below image,

List of things covered in app

In above image you can see we have covered following functionality for book app.

1. List of all books with it’s details.
2. Add new book data.
3. Edit existing book data.
4. Delete existing book data.
5. Search for required books.
6. Pagination For ‘n’ numbers of books.
7. Loading Bar on the top.

 
Note : Before running this app make sure you have setup and started node server (see here) & MongoDB (See here).
 

Initial module & Route

First will initialize module.


var app = angular.module('bookapp', ['ui.router','angular-loading-bar','angularUtils.directives.dirPagination']);


In module you can see that we have define module name (i.e : bookapp). and then followed by angular libraries which is used in app (i.e: angular loading bar, UI router, pagination).
Now will make routes for add , edit & home page templates.


app.config(['$stateProvider','$urlRouterProvider',
function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/home.html"
})
.state('Newbook', {
url: "/addnew",
templateUrl: "templates/newbook.html"
})
.state('Editbook', {
url: "/editbook",
templateUrl: "templates/editbook.html"
})
}
]);


In above code config we have used UI router for loading templates based on action from UI. UI-router is a powerful third party library for routing in Angular applications.Using UI router we can easily change templates and pages, without reloading whole page.
First we need to define state name using .state('state Name', {'url':'Url which shown', 'templatesUrl':'template path'}).
Next in view side we need to add ui-view so that all templates load in that view div. See below code,

For more information about UI-Router : visit Here

 

List of all books with it’s details

First we will see html part how data should be displayed in table.

Book Name	Book Author	Price	Edit	Delete
{{item.bookname}}	{{item.authorname}}	${{item.price|number:2}}	Edit	Delete

and controller for that is,


app.controller('book-list',function($scope,$state,$http,sharedbook,$filter){
$scope.booklist = {};
$scope.pageSize = 5;
$scope.currentPage = 1;
$http.get("http://localhost:8080/book").success(function(response){
if(response.error === 0){
$scope.booklist = response.Books;
$scope.items2 = $scope.booklist;
$scope.$watch('searchBook', function(val){
$scope.booklist = $filter('searchFor')($scope.items2, val);
});
}else{
$scope.booklist = [];
}
});

$scope.editBook = function($index){
$scope.number = ($scope.pageSize * ($scope.currentPage - 1)) + $index;
sharedbook.setProperty($scope.booklist[$scope.number]);
$state.go('Editbook');
};

});


We have created controller for showing book list that is book-list in which we are calling GET api to fetch all the book data which is stored in database. We assigned the data to $scope.booklist and that will interact with UI side in table.
 

Add new book data

For adding new book data we have created separate template in which you can see controller name add-new-book with three text field for book name, author name & Price so by click on submit button it will call addBook() function.
 

Add new book

---

Book Name

Author Name

Price

$

Add Book


app.controller('add-new-book',function($scope,$http,$state){
$scope.bookdata = {};
$scope.addBook = function(){
var payload = {
"bookname":$scope.bookdata.bookname,
"authorname":$scope.bookdata.authorname,
"price":$scope.bookdata.price
}
$http.post("http://localhost:8080/book",payload).success(function(res){
if(res.error == 0){
$state.go("home");
}else{

}
});
};
});


So by calling addbook() function, we first fetch all required data and place the data in one payload object, which is passed while calling POST Api. Refer the code above.
 

Edit existing book data

For changing existing book data we have created a separate template in which you can see controller name edit-book with three text field for book name, author name & Price so by click on submit button it will call updateBook() function and on cancel button cancel() Function. see below code.

Edit book Data

---

Book Name

Author Name

Price

$

Cancel
Update Book


app.controller('edit-book',function($scope,$http,$state,sharedbook){
$scope.bookdata = sharedbook.getProperty();
$scope.updateBook = function(){
var payload = {
"id":$scope.bookdata._id,
"bookname":$scope.bookdata.bookname,
"authorname":$scope.bookdata.authorname,
"price":$scope.bookdata.price
}
$http.put("http://localhost:8080/book",payload).success(function(res){
if(res.error == 0){
$state.go("home");
}else{

}
});
};
$scope.cancel = function(){
$state.go("home");
};
});


So by calling updatebook() function, first we will fetch all required data and place the data in one payload object which is passed while calling PUT Api by passing that payload and on cancel function will redirect it to home page. See above code for better understand.
 

Delete existing book data

Below is the delete book function deletebook function which you can see in table, it will call DELETE Api in which we are passing bookname which we need to delete. See below code


$scope.deleteBook = function($index){
$scope.number = ($scope.pageSize * ($scope.currentPage - 1)) + $index;
$http.delete("http://localhost:8080/book/"+$scope.booklist[$scope.number].bookname).success(function(res){
if(res.error == 0){
$state.go($state.current, {}, {reload: true});
}else{

}
});
};

 

Search for required books

Here we have created filter for search. In table we have defined searchFor:searchBook in tr element. Based on that it will pass data to below filter function and then it will filter data based on book name and author name, and create one array name result[] then return that array to table with filtered data.


app.filter('searchFor', function(){
return function(arr, searchBook){
if(!searchBook){
return arr;
}
var result = [];
searchBook = searchBook.toLowerCase();
angular.forEach(arr, function(item){
if(item.bookname.toLowerCase().indexOf(searchBook) !== -1 || item.authorname.toLowerCase().indexOf(searchBook) !== -1){
result.push(item);
}
});
return result;
};
});

 

Pagination For ‘n’ numbers of books

For this we have angular library Dirpaginate directive.
In which we have to defined in module 'angularUtils.directives.dirPagination'.
and below code need to add in html file where you want to show pagination.





In table dir-paginate with array of data.

We have a tutorial on search sort and pagination which you can have a look at for a detailed explanation.

 

Loading Bar on top

For this also we have you another library name Angular loading bar which is mostly used in one page app for showing that data is still loading.
For adding this library to your project we need to add 'angular-loading-bar' while defining module.

For more detail you can checkout this cool angular library for loading bar – Here

 

Conclusion

This was the last chapter in building an app with MEAN series, I hope you found this tutorial useful and by now you should be able to kick-off your development with MEAN.