Struts 2 jasper report example

Apache Struts 2, another popular Java Model-View-Contraller (MVC) framework, combine of both successful WebWork and Struts 1.x web frameworks.

Jasper report is java based reporting tools. Struts2 provide jasper report plugins for ingratiation of report in your web application.Today we learn how to implement this in eclipse.

 1 . Create new Maven project in eclipse and select maven-archetype-webapp

 2. Fill Group Id, Artifact Id,package information then click finish.

 

3. after finish its show following structure.

4.open pom.xml and add struts2 and jasper report dependency.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>org.riddimablog</groupId>
    <artifactId>jasper_example</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>jasper_example Maven Webapp</name>
    <url>http://maven.apache.org</url>
   
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-core</artifactId>
            <version>2.3.16.3</version>
        </dependency>
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-jasperreports-plugin</artifactId>
            <version>2.3.16.3</version>
        </dependency>
        <dependency>
            <groupId>net.sf.jasperreports</groupId>
            <artifactId>jasperreports</artifactId>
            <version>5.5.0</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>

        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.7</version>
        </dependency>


    </dependencies>
    <build>
        <finalName>jasper_example</finalName>
    </build>
</project>

5.create new package  com.riddima.jasper in src/main/java folder.

6 . create User.java class in com.riddima.jasper package and write following code.
   package com.riddima.jasper;

public class User {
    private Long id;
    private String firstName = null;
    private String lastName = null;
    private String fatherName = null;
    private String address = null;

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getFatherName() {
        return fatherName;
    }

    public void setFatherName(String fatherName) {
        this.fatherName = fatherName;
    }

    public String getListDescription() {

        return lastName + "," + firstName;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public User(String firstName, String lastName, String fatherName,
            String address) {
        // TODO Auto-generated constructor stub
        this.firstName = firstName;
        this.lastName = lastName;
        this.address = address;
        this.fatherName = fatherName;
    }

    @Override
    public String toString() {
        StringBuffer sb = new StringBuffer("User Information \n");
        sb.append("First Name : " + firstName + "\n");
        sb.append("Last Name : " + lastName + "\n");
        sb.append("Father Name : " + fatherName + "\n");
        sb.append("Address : " + address + "\n");
        return sb.toString();
    }

}
7.Create JasperAction.java class in com.riddima.jasper folder and write following code.

package com.riddima.jasper;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import javax.servlet.ServletContext;

import org.apache.struts2.StrutsStatics;

import net.sf.jasperreports.engine.JasperCompileManager;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;


/**
 * @author :Riddima blog
 * @version $Id:
 */
public class JasperAction extends ActionSupport {
  
    private List<User> myList;
    private String format = "PDF";
    private String contentType = "application/pdf";
    private String fileName = "document.pdf";
    private String jasperfileName = "sample.jasper";
    private HashMap reportParams = new HashMap();
  
    public HashMap getReportParams() {
        return reportParams;
    }
    public void setReportParams(HashMap reportParams) {
        this.reportParams = reportParams;
    }
    public String getJasperfileName() {
        return jasperfileName;
    }
    public String getFormat() {
        return format;
    }
    public String execute() throws Exception {
        // dummy data create or feel free to change to data get in service class
        myList=new ArrayList<User>();
        User user1 =new User("Michael","Jackson","Joseph Jackson","Gary, Indiana, U.S.");
        User user2 =new User("Tom","Cruise","Thomas Cruise","Syracuse, New York, U.S.");
        myList.add(user1);
        myList.add(user2);
        /*//for service class
         *
        UserService service = new UserService();
        myList = service.getUsers();
        */
      
          // Normally we would provide a pre-compiled .jrxml file
        // or check to make sure we don't compile on every request.
        try {
            JasperCompileManager.compileReportToFile(
                    getApplicationPath()+"/jasper/sample.jrxml",
                    getApplicationPath()+"/jasper/sample.jasper");
        } catch (Exception e) {
            e.printStackTrace();
            return ERROR;
        }
      
      
      
        reportParams.put("userName", "admin");
        return SUCCESS;
    }
    public List<User> getMyList() {
        return myList;
    }
    public void setFormat(String format) {
        this.format = format;
        if ("XLS".equals(format)) {
            fileName = "document.html";
        }
    }
    public String getContentType() {
        if ("XLS".equals(format)) {
            contentType = "application/xls";
        } else if ("HTML".endsWith(format)) {
            contentType = "text/html";
        }
        return contentType;
    }
    public void setContentType(String contentType) {
        this.contentType = contentType;
    }
    public String getFileName() {
        if ("XLS".equals(format)) {
            fileName = "document.xls";
        } else if ("HTML".endsWith(format)) {
            fileName = "document.html";
        }
        return fileName;
    }
    public void setFileName(String fileName) {
        this.fileName = fileName;
    }
    public void setMyList(List<User> myList) {
        this.myList = myList;
    }
  
    public String getApplicationPath() {
        return ((ServletContext)ActionContext.getContext().get(StrutsStatics.SERVLET_CONTEXT)).getRealPath("/");
    }
}

8.  jasper Report HTML format need some image file to view correct report.so create ImageAction.java class in com.riddima.jasper package. write following code

package com.riddima.jasper;

import java.awt.Dimension;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.jasperreports.engine.JRException;
import net.sf.jasperreports.engine.JRImageRenderer;
import net.sf.jasperreports.engine.JRPrintImage;
import net.sf.jasperreports.engine.JRRenderable;
import net.sf.jasperreports.engine.JRWrappingSvgRenderer;
import net.sf.jasperreports.engine.export.JRHtmlExporter;
import net.sf.jasperreports.engine.util.JRTypeSniffer;
import net.sf.jasperreports.j2ee.servlets.BaseHttpServlet;

import org.apache.struts2.interceptor.ApplicationAware;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.apache.struts2.interceptor.SessionAware;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.Preparable;

public class ImageAction extends ActionSupport implements ServletRequestAware,
        ServletResponseAware, ApplicationAware, SessionAware, Preparable {
    private String contentType = "image/gif";
    private String imageName;

    private HttpServletRequest request;

    private InputStream fileInputStream;

    public void setServletRequest(HttpServletRequest arg0) {
        // TODO Auto-generated method stub
        this.request = arg0;

    }

    public void setServletResponse(HttpServletResponse arg0) {
        // TODO Auto-generated method stub

    }

    public void setSession(Map<String, Object> arg0) {
        // TODO Auto-generated method stub

    }

    public void prepare() throws Exception {
        // TODO Auto-generated method stub

    }

    public void setApplication(Map<String, Object> arg0) {
        // TODO Auto-generated method stub

    }

    public String getImageName() {
        return imageName;
    }

    public void setImageName(String imageName) {
        this.imageName = imageName;
    }

    @Override
    public String execute() throws Exception {
        // TODO Auto-generated method stub
        byte[] imageData = null;
        String imageMimeType = null;
        if ("px".equals(imageName)) {
            try {
                JRRenderable pxRenderer = JRImageRenderer
                        .getInstance("net/sf/jasperreports/engine/images/pixel.GIF");
                imageData = pxRenderer.getImageData();
            } catch (JRException e) {
                throw new ServletException(e);
            }
        } else {
            List jasperPrintList = BaseHttpServlet.getJasperPrintList(request);

            if (jasperPrintList == null) {
                throw new ServletException(
                        "No JasperPrint documents found on the HTTP session.");
            }

            JRPrintImage image = JRHtmlExporter.getImage(jasperPrintList,
                    imageName);

            JRRenderable renderer = image.getRenderer();
            if (renderer.getType() == JRRenderable.TYPE_SVG) {
                renderer = new JRWrappingSvgRenderer(renderer, new Dimension(
                        image.getWidth(), image.getHeight()),
                        image.getBackcolor());
            }

            imageMimeType = JRTypeSniffer.getImageMimeType(renderer
                    .getImageType());

            try {
                imageData = renderer.getImageData();
            } catch (JRException e) {
                throw new ServletException(e);
            }
        }

        fileInputStream = new ByteArrayInputStream(imageData);

        System.out.println();
        return SUCCESS;
    }

    public String getContentType() {
        return contentType;
    }

    public void setContentType(String contentType) {
        this.contentType = contentType;
    }

    public InputStream getFileInputStream() {
        return fileInputStream;
    }

}

9. src/main/resource folder create struts.xml file. write following mapping

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
      "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
      "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <constant name="struts.enable.DynamicMethodInvocation" value="true" />
    <constant name="struts.devMode" value="true" />

    <package name="riddima" namespace="/" extends="struts-default">
        <result-types>
            <result-type name="jasper"
                class="org.apache.struts2.views.jasperreports.JasperReportsResult"
                default="false" />
        </result-types>
        <action name="jasper" class="com.riddima.jasper.JasperAction">
            <result name="success" type="jasper">
                <param name="location">/jasper/${jasperfileName}</param>
                <param name="dataSource">myList</param>
                <param name="format">${format}</param>
                <param name="contentType">${contentType}</param>
                <param name="contentDisposition">filename=${fileName}</param>
                <param name="reportParameters">reportParams</param>
                <param name="exportParameters">exportParameters</param>
                <param name="imageServletUrl">/imageGet?imageName=</param>
            </result>
        </action>
        <action name="imageGet" class="com.riddima.jasper.ImageAction">
            <result name="success" type="stream">
                <param name="contentType">${format}</param>
                <param name="inputName">fileInputStream</param>
            </result>
        </action>

    </package>
</struts>

10. See jasper action have multiple param
           

• location=> /jasper/${jasperfileName}:   jasperfileName parameter set dynamic in action class.in our case this value is sample.jasper.
• dataSource=>myList  : jasper report datasource.
• format=>${format}:jasper report output format in our case its value is pdf/xls/html.
• contentType=>${contentType}:jasper  report content type
• contentDisposition=>filename=${fileName}:jasper report file name
• reportParameters=>reportParams: jasper report parameter value set in this map.
• exportParameters=>exportParameters:jasper report export parameters value set in this map.
• imageServletUrl=>/imageGet?imageName= :jasper report need some image for display report.

     
11 .src/main/webapps create jasper folder and create sample.jrxml file and write following code.

<?xml version="1.0" encoding="UTF-8"?>
<jasperReport xmlns="http://jasperreports.sourceforge.net/jasperreports" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports http://jasperreports.sourceforge.net/xsd/jasperreport.xsd" name="jasper_test" pageWidth="595" pageHeight="842" columnWidth="555" leftMargin="20" rightMargin="20" topMargin="30" bottomMargin="30" uuid="05cdb2bc-eb7b-4d18-b711-a07b69e8040b">
    <property name="ireport.zoom" value="1.0"/>
    <property name="ireport.x" value="0"/>
    <property name="ireport.y" value="0"/>
    <parameter name="userName" class="java.lang.String"/>
    <field name="firstName" class="java.lang.String"/>
    <field name="lastName" class="java.lang.String"/>
    <field name="fatherName" class="java.lang.String"/>
    <field name="address" class="java.lang.String"/>
    <title>
        <band height="50" splitType="Stretch">
            <staticText>
                <reportElement x="0" y="0" width="180" height="15" forecolor="#FF3333" uuid="2f591c42-1eac-4513-b005-d4e2b8ff115f"/>
                <text><![CDATA[Struts 2 JasperReports Sample]]></text>
            </staticText>
            <staticText>
                <reportElement x="0" y="15" width="555" height="25" forecolor="#0000CC" uuid="94478d08-1c46-4f65-af34-7f35e9ea0765"/>
                <textElement textAlignment="Center">
                    <font size="18"/>
                </textElement>
                <text><![CDATA[User Information]]></text>
            </staticText>
        </band>
    </title>
    <pageHeader>
        <band splitType="Stretch"/>
    </pageHeader>
    <columnHeader>
        <band height="20" splitType="Stretch">
            <staticText>
                <reportElement x="0" y="0" width="111" height="20" forecolor="#000000" uuid="c886fa02-f49f-45af-8d58-2f310528488c"/>
                <box>
                    <pen lineWidth="0.5"/>
                    <topPen lineWidth="0.5" lineColor="#000000"/>
                    <leftPen lineWidth="0.5" lineColor="#000000"/>
                    <bottomPen lineWidth="0.5" lineColor="#000000"/>
                    <rightPen lineWidth="0.5" lineColor="#000000"/>
                </box>
                <textElement textAlignment="Center" verticalAlignment="Middle">
                    <font size="12" isBold="true"/>
                </textElement>
                <text><![CDATA[First Name]]></text>
            </staticText>
            <staticText>
                <reportElement x="111" y="0" width="111" height="20" forecolor="#000000" uuid="c91b3870-fd06-4902-8680-3b43fd92fd0b"/>
                <box>
                    <pen lineWidth="0.5"/>
                    <topPen lineWidth="0.5" lineColor="#000000"/>
                    <leftPen lineWidth="0.5" lineColor="#000000"/>
                    <bottomPen lineWidth="0.5" lineColor="#000000"/>
                    <rightPen lineWidth="0.5" lineColor="#000000"/>
                </box>
                <textElement textAlignment="Center" verticalAlignment="Middle">
                    <font size="12" isBold="true"/>
                </textElement>
                <text><![CDATA[Last Name]]></text>
            </staticText>
            <staticText>
                <reportElement x="222" y="0" width="111" height="20" forecolor="#000000" uuid="55336bbc-39ed-4c46-ae27-c4b55388df97"/>
                <box>
                    <pen lineWidth="0.5"/>
                    <topPen lineWidth="0.5" lineColor="#000000"/>
                    <leftPen lineWidth="0.5" lineColor="#000000"/>
                    <bottomPen lineWidth="0.5" lineColor="#000000"/>
                    <rightPen lineWidth="0.5" lineColor="#000000"/>
                </box>
                <textElement textAlignment="Center" verticalAlignment="Middle">
                    <font size="12" isBold="true"/>
                </textElement>
                <text><![CDATA[Father Name]]></text>
            </staticText>
            <staticText>
                <reportElement x="333" y="0" width="222" height="20" forecolor="#000000" uuid="51e63565-6de8-470d-adc8-a9ca1422f84f"/>
                <box>
                    <pen lineWidth="0.5"/>
                    <topPen lineWidth="0.5" lineColor="#000000"/>
                    <leftPen lineWidth="0.5" lineColor="#000000"/>
                    <bottomPen lineWidth="0.5" lineColor="#000000"/>
                    <rightPen lineWidth="0.5" lineColor="#000000"/>
                </box>
                <textElement textAlignment="Center" verticalAlignment="Middle">
                    <font size="12" isBold="true"/>
                </textElement>
                <text><![CDATA[Address]]></text>
            </staticText>
        </band>
    </columnHeader>
    <detail>
        <band height="20" splitType="Stretch">
            <textField>
                <reportElement x="0" y="0" width="111" height="20" uuid="b9ecd8a2-1f68-4b84-93bc-debe4759dd98"/>
                <box>
                    <pen lineWidth="0.5"/>
                    <topPen lineWidth="0.5"/>
                    <leftPen lineWidth="0.5"/>
                    <bottomPen lineWidth="0.5"/>
                    <rightPen lineWidth="0.5"/>
                </box>
                <textElement textAlignment="Center" verticalAlignment="Middle"/>
                <textFieldExpression><![CDATA[$F{firstName}]]></textFieldExpression>
            </textField>
            <textField>
                <reportElement x="111" y="0" width="111" height="20" uuid="51cfd5bb-16bd-448c-aa16-b49d4e969cbc"/>
                <box>
                    <pen lineWidth="0.5"/>
                    <topPen lineWidth="0.5"/>
                    <leftPen lineWidth="0.5"/>
                    <bottomPen lineWidth="0.5"/>
                    <rightPen lineWidth="0.5"/>
                </box>
                <textElement textAlignment="Center" verticalAlignment="Middle"/>
                <textFieldExpression><![CDATA[$F{lastName}]]></textFieldExpression>
            </textField>
            <textField>
                <reportElement x="222" y="0" width="111" height="20" uuid="0314091a-0dae-4d98-bce7-2f6de313cadd"/>
                <box>
                    <pen lineWidth="0.5"/>
                    <topPen lineWidth="0.5"/>
                    <leftPen lineWidth="0.5"/>
                    <bottomPen lineWidth="0.5"/>
                    <rightPen lineWidth="0.5"/>
                </box>
                <textElement textAlignment="Center" verticalAlignment="Middle"/>
                <textFieldExpression><![CDATA[$F{fatherName}]]></textFieldExpression>
            </textField>
            <textField>
                <reportElement x="333" y="0" width="222" height="20" uuid="4313acfb-17b4-40c7-a816-df919f0e57bb"/>
                <box>
                    <pen lineWidth="0.5"/>
                    <topPen lineWidth="0.5"/>
                    <leftPen lineWidth="0.5"/>
                    <bottomPen lineWidth="0.5"/>
                    <rightPen lineWidth="0.5"/>
                </box>
                <textElement textAlignment="Center" verticalAlignment="Middle"/>
                <textFieldExpression><![CDATA[$F{address}]]></textFieldExpression>
            </textField>
        </band>
    </detail>
    <columnFooter>
        <band splitType="Stretch"/>
    </columnFooter>
    <pageFooter>
        <band height="23" splitType="Stretch">
            <staticText>
                <reportElement x="0" y="0" width="40" height="15" forecolor="#3333FF" uuid="56c63566-a73d-4111-bd94-1ada136abce6"/>
                <text><![CDATA[Page:]]></text>
            </staticText>
            <textField>
                <reportElement x="40" y="0" width="100" height="15" uuid="e0d09684-1b45-437a-87f1-54d685dcab79"/>
                <textFieldExpression><![CDATA[$V{PAGE_NUMBER}]]></textFieldExpression>
            </textField>
            <textField>
                <reportElement x="453" y="2" width="100" height="20" uuid="87785a25-993e-4072-85c0-16c8dca8f71f"/>
                <textElement verticalAlignment="Middle"/>
                <textFieldExpression><![CDATA[$P{userName}]]></textFieldExpression>
            </textField>
            <staticText>
                <reportElement x="344" y="2" width="107" height="20" forecolor="#3333FF" uuid="b74fc49d-45a1-4651-ac67-cf89f8a65660"/>
                <textElement textAlignment="Right" verticalAlignment="Middle">
                    <font size="12"/>
                </textElement>
                <text><![CDATA[Generated By :]]></text>
            </staticText>
        </band>
    </pageFooter>
    <summary>
        <band splitType="Stretch"/>
    </summary>
</jasperReport>

12. open web.xml and add following code

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <display-name>Struts2 Application</display-name>
     <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
     
    </filter>

    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

</web-app>

13. open index.jsp and add following code.

<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<body>
    <h2>
        <s:url action="jasper" var="pdfLink">

        </s:url>
        <s:url action="jasper" var="excelLink">
            <s:param name="format" value="'XLS'" />
        </s:url>
        <s:url action="jasper" var="htmlLink">
            <s:param name="format" value="'HTML'" />
        </s:url>

        <a href='<s:property value="#pdfLink" />'> PDF </a><br> <a
            href='<s:property value="#excelLink" />'> Excel </a><br> <a
            href='<s:property value="#htmlLink" />'> HTML </a>

    </h2>
</body>
</html>

14 . Run project and see output.

15. Github link

https://github.com/riddhimablog/jasper_example

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