How to use Servlet as a rest end point with Angulerjs (Basic CRUD) part 2

First part we will see how to create server site coding. Now we will see how to write client site code.
client site we will use anguler js and twitter bootstrap.

1. Create following structure in WebContent folder.
    Controller : This folder we create angulerjs controller.
    lib : This folder we insert angulerjs and bootstarp source code.
    service :This folder we create angulerjs service.

2. Create js -> application.js and write following code .

'use strict';
angular.module('ridApp',
        [ 'ngRoute', 'ridApp.services', 'ridApp.controllers', 'ui.bootstrap'

        ]).config(function($routeProvider, $httpProvider) {
    $routeProvider.when('/', {
        controller : 'userController',
        templateUrl : 'jsp/template/userTemplate.jsp'
    }).when('/user/:id', {
        controller : 'userController',
        templateUrl : 'jsp/template/userTemplate.jsp'
    }).when('/users', {
        controller : 'usersController',
        templateUrl : 'jsp/template/userListTemplate.jsp'
    }).when('/about', {
        templateUrl : 'jsp/template/aboutTemplate.jsp'
    }).otherwise({
        redirectTo : '/'
    });
});  

This js we will create ridApp module and include 'ngRoute', 'ridApp.services', 'ridApp.controllers', 'ui.bootstrap' dependency.This file we create following anguler js route.
"/" : Home route
"/users/:id" : Route for create new user and update user .
"/users"       : Route for list user .
"/about"      : Route for about information.
3. create services.js file in  js->service folder .write following code in this file

'use strict';
var services = angular.module('ridApp.services', [ 'ngResource' ]);

services.factory('UserFactory', function($resource) {
    return  $resource('users/:id', {id:'@id'});
});

This js we use angulerjs resource module this will used interact with RESTful server-side data sources.its create following default action.

    { 

    'get':    {method:'GET'},
    'save':   {method:'POST'},
    'query':  {method:'GET', isArray:true},
    'remove': {method:'DELETE'},
    'delete': {method:'DELETE'}  

    };

$resource('users/:id', {id:'@id'}) this is create restful action.

4. create controller.js file in  js->controller folder .write following code in this file

'use strict';

var myAppModule = angular.module('ridApp.controllers', [ 'ui.bootstrap' ]);

myAppModule.controller('homeController', [ '$rootScope', '$scope',
        function($rootScope, $scope) {
            console.log('Home Controller');
        } ]);

myAppModule.controller('userController', [
        '$route',
        '$rootScope',
        '$scope',
        '$routeParams',
        '$location',
        'UserFactory',
        function($route, $rootScope, $scope, $routeParams, $location,
                UserFactory) {
            console.log('userController');
            $scope.user = {};
            $scope.AddUser = function() {
                UserFactory.save($scope.user).$promise.then(function(response) {
                    $scope.message = "Data Save";
                    if (response.success) {
                        $scope.user.id = response.data.id;
                        $scope.msgClass = 'alert alert-success';
                    } else {
                        $scope.msgClass = 'alert alert-danger';
                    }
                });
            };

            $scope.deleteUser = function() {
                UserFactory.remove($scope.user).$promise
                        .then(function(response) {
                            $scope.message = response.message;
                            if (response.success) {
                                $scope.user = {};
                                $scope.msgClass = 'alert alert-success';
                            } else {
                                $scope.msgClass = 'alert alert-danger';
                            }
                        });
            };
            $scope.GetUser = function() {
                UserFactory.get($scope.user).$promise.then(function(response) {
                    if (response.success) {
                        $scope.user = response.data;
                    }
                });
            };
            $scope.viewUserlist = function() {
                $location.path('/users');
            };
            $scope.newUser = function() {
                if ($routeParams.id) {
                    $location.path('/user');
                } else {
                    $route.reload();
                }
            };
            var id = $routeParams.id;
            if (id) {
                UserFactory.get({
                    id : id
                }).$promise.then(function(response) {

                    $scope.user = response;

                });
                ;
            }

        } ]);

myAppModule.controller('usersController', [
        '$route',
        '$rootScope',
        '$scope',
        '$location',
        '$routeParams',
        '$modal',
        '$log',
        'UserFactory',
        function($route, $rootScope, $scope, $location, $routeParams, $modal,
                $log, UserFactory) {
            console.log('usersController');
            $log.debug($routeParams);
            var i = 0;
            $scope.currentPage = 1;
            $scope.users = [];
            $scope.searchmodel = {};
            $scope.getUsers = function() {
                UserFactory.query().$promise.then(function(response) {
                    $scope.users = response;
                });
            };

            $scope.deleteUser = function(id) {
                UserFactory.remove({
                    id : id
                }).$promise.then(function(response) {
                    $scope.getUsers();
                });
            };

            $scope.updateUser = function(id) {
                $location.path('/user/' + id);
            };
            $scope.addNewUser = function() {
                $location.path('/user');
            };
            $scope.getUsers();

        } ]);

this js create three controller

 homeController : controller for home route.

 userController : controller for user view/add/update user interface. this controller see i created AddUser, deleteUser, GetUser, newUser ,viewUserlist methods.this method you see how i will 

use UserFactory service action methods. 

 usersController  : This controller use for user list view. this class we create getUsers, deleteUser ,updateUser, addNewUser methods.

5.Create lib.jsp in jsp->common folder and write following code . This file include angulerjs and bootstrap common library.

<!-- lib css file -->
<link href="js/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="js/lib/bootstrap/css/application.css" rel="stylesheet">
<link href="js/lib/bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- lib js file -->
<script src="js/lib/angulerjs/angular.min.js"></script>
<script src="js/lib/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="js/lib/angulerjs/angular-route.min.js"></script>
<script src="js/lib/angulerjs/angular-resource.min.js"></script>
<script src="js/lib/angulerjs/angular-sanitize.min.js"></script>

6.create userTemplate.jsp in jsp-> template folder and write below code.

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                User <small>Add/Update user!</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active">User</li>
            </ol>
        </div>

    </div>
    <div class="row">
        <div class="col-md-6">

            <div ng-class="msgClass">{{ message }}</div>

            <form role="form" name="userform" novalidate>

                <div class="form-group">
                    <label for="exampleInputEmail1">First Name:</label> <input
                        class="form-control" id="firstName" name="firstName"
                        ng-model="user.firstName" placeholder="Enter First Name" required>

                    <div class="alert alert-danger"
                        ng-show="userform.firstName.$dirty && userform.firstName.$invalid">
                        <span class="text-error"
                            ng-show="userform.firstName.$error.required">Required!</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname">Last Name:</label> <input type="text"
                        class="form-control" type="text" id="lastname" name="lastname"
                        ng-model="user.lastName" placeholder="Enter Last Name" required>

                    <div class="alert alert-danger"
                        ng-show="userform.lastname.$dirty && userform.lastname.$invalid">
                        <span class="text-error"
                            ng-show="userform.lastname.$error.required">Required!</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="emailid">Email:</label> <input type="email"
                class="form-control" id="emailId" name="emailId" ng-model="user.emailId"  placeholder="Enter email" required>
         
                    <div class="alert alert-danger"
                        ng-show="userform.emailId.$dirty && userform.emailId.$invalid">
                        <span ng-show="userform.emailId.$error.required">Enter your
                            email.</span> <span ng-show="userform.emailId.$error.email">This is
                            not a valid email.</span>
                    </div>
                </div>


                <div class="form-group">
                    <label for="username">Login Id:</label> <input type="text"
                        name="username" class="form-control" type="text" id="username"
                        ng-model="user.userName" placeholder="Enter Login Id" required>

                    <div class="alert alert-danger"
                        ng-show="userform.username.$dirty && userform.username.$invalid">
                        <span class="text-error"
                            ng-show="userform.username.$error.required">Required!</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="password">Password:</label> <input type="password"
                        class="form-control" type="password" id="password" name="password"
                        ng-model="user.password" ng-minlength="5" ng-maxlength="10" placeholder="Enter Password " required>

                        <div class="alert alert-danger"
                            ng-show="userform.password.$dirty && userform.password.$invalid">
                            <span class="text-error"
                                ng-show="userform.password.$error.required">Required!</span>
                            <span class="text-error" ng-show="userform.password.$error.minlength">
                                The password must be minimum length 5! </span>
                             <span class="text-error" ng-show="userform.password.$error.maxlength">
                                 The password must be maximum length 10!</span>
                           </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-medium btn-primary"
                        ng-disabled="userform.$invalid" name="operation" value="Add"
                        ng-click='AddUser()'>Save</button>
                    <button type="submit" class="btn btn-medium btn-danger"
                        ng-disabled="userform.$invalid" name="operation" value="Delete"
                        ng-click='deleteUser()'>Delete</button>
                    <button type="submit" class="btn btn-medium btn-primary"
                        name="operation" value="Delete" ng-click='GetUser()'>Get</button>
                    <button type="submit" class="btn btn-medium  btn-primary"
                        name="operation" value="List" ng-click='viewUserlist()'>List</button>
                    <button type="submit" class="btn btn-medium  btn-primary"
                    name="operation" value="List" ng-click='newUser()'>New</button>
                </div>

            </form>
        </div>
    </div>
</div>

7. create userListTemplate.jsp in jsp-> template folder and write below code.

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                User List <small></small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active">User List</li>
            </ol>
        </div>
        <button type="submit" class="btn btn-medium btn-primary"
        name="operation" value="Delete" ng-click='addNewUser()'>New User</button>
           
          <form class="navbar-form navbar-right" role="searchString">
         <div class="form-group">
        <label class="control-label">Filter:</label>
        <input type="text" class="form-control" ng-model="searchString" placeholder="Search">
      </div>
    </form>
    </div>

    <div class="row">
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr class="warning">
                        <th>#</th>
                        <th>Email Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>User Name</th>
                        <th>Operation</th>
                    </tr>
                </thead>

                <tbody ng-repeat="user in users | filter:searchString">
                    <tr>
                        <td>{{((10*(currentPage-1))+ ($index +1))}}</td>
                        <td>{{user.emailId}}</td>
                        <td>{{user.firstName}}</td>
                        <td>{{user.lastName}}</td>
                        <td>{{user.userName}}</td>
                        <td><button type="button" class="btn btn-danger btn-xs"
                                ng-click="deleteUser(user.id)">delete</button> |
                            <button type="button" class="btn btn-primary btn-xs"
                                ng-click="updateUser(user.id)">edit</button></td>
                    </tr>
                </tbody>

            </table>
        </div>
   
    </div>
</div>

8 . create index.jsp in WebContent folder and write following code

<!DOCTYPE html>
<html ng-app='ridApp' ng-controller='homeController'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Rid Sample</title>
<jsp:include page="jsp/common/lib.jsp"></jsp:include>
</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Home</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav navbar-right">
                   
                    <li class="dropdown" ><a href="#"
                        class="dropdown-toggle" data-toggle="dropdown">User<b
                            class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#user">User</a></li>
                            <li><a href="#users">List</a></li>
                        </ul></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <div class="container">
        <div ng-view></div>
    </div>
    <!-- /.container -->
    <div class="container">
        <hr>
        <footer>
            <div class="row">
                <div class="col-lg-9">
                    <p>Copyright © 2014, - Riddhima blog
                        </p>
                </div>
                <div class="col-lg-3">
                    <ul class="list-unstyled list-inline list-social-icons">
                        <li class="tooltip-social facebook-link"><a
                            href="https://www.facebook.com" data-toggle="tooltip"
                            data-placement="top" title="Facebook"><i
                                class="fa fa-facebook-square fa-2x"></i></a></li>
                        <li class="tooltip-social linkedin-link"><a
                            href="#linkedin-company-page" data-toggle="tooltip"
                            data-placement="top" title="LinkedIn"><i
                                class="fa fa-linkedin-square fa-2x"></i></a></li>
                        <li class="tooltip-social twitter-link"><a
                            href="https://twitter.com/" data-toggle="tooltip"
                            data-placement="top" title="Twitter"><i
                                class="fa fa-twitter-square fa-2x"></i></a></li>
                        <li class="tooltip-social google-plus-link"><a
                            href="https://plus.google.com/"
                            data-toggle="tooltip" data-placement="top" title="Google+"><i
                                class="fa fa-google-plus-square fa-2x"></i></a></li>

                    </ul>
                </div>
            </div>
        </footer>
    </div>
    <script src="js/controller/controllers.js"></script>
    <script src="js/service/services.js"></script>
    <script src="js/application.js"></script>
</body>
</html>

9. Now right click in CRUD ->Run As->run on server .select tomcat and run application.

10 . Github link  https://github.com/riddhimablog/CRUD

Part 1