Introduction
AngularJS
- is an open source web application framework
- extends HTML with ng-directives
- latest version is 1.3.14
- is the best candidate for data binding with browser
- is the cross browser compliant
- helps to write the client side code in a clean MVC way
The Objective of this blog is to call GET and POST RESTful webservice.
Required Software
- JDK 1.7
- Maven 2.2.x
- Eclipse for J2EE
Steps to write code
- Write GET and POST RESTful webservices from my another blog
- replace index.jsp with the following content. From this JSP file we are calling GET and POST RESTful webservice. In the below file <html ng-app=”empRecordApp”> indicates that this is the root element of angular JS application
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html ng-app="empRecordApp">
<head>
<meta charset="UTF-8">
<title>Integrate HTML5 and Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- <script src="<%=request.getContextPath()%>/angularjs/angular.min.js"></script> -->
<script src="<%=request.getContextPath()%>/angularjs/employee.js"></script>
</head>
<body>
<div>
GET restful Webservice call<br/>
============================
</div>
<div ng-controller="getEmployee">
<div>
<p>The Employee ID is </p>
<p>The Employee Name is </p>
</div>
<div>
EmpId: <input type="text" placeholder="Emp Id" ng-model="employeeData.empId">
Name: <input type="text" placeholder="Name" ng-model="employeeData.name">
</div>
</div>
<br/><br/>
<div>
POST restful Webservice call<br/>
===========================
</div>
<br>
<div ng-controller="getSalary">
<div>
EmpId: <input type="text" placeholder="Name" ng-model="employeeData.name">
Salary: <input type="text" placeholder="Salary" ng-model="employeeData.salary">
</div>
<div>
<p>The Employee Name is </p>
<p>The Employee Salary is </p>
</div>
</div>
</body>
</html>
- employee.js: GET and POST RESTful webservice call is here. Place this file under WebContent/angularjs folder
/*
* In this below example, the GET webservice got called
*/
var empRecordAppCtrl = angular.module('empRecordApp', []);
empRecordAppCtrl.controller('getEmployee', function($scope, $http) {
$http.get("http://localhost:8080/angularjs/rest/hello/getEmployee/123")
.success(function(response) {
$scope.employeeData = response;
});
});
/*
* In this below example, the POST webservice got called
*/
empRecordAppCtrl.controller('getSalary', function($scope, $http) {
$http.post("http://localhost:8080/angularjs/rest/hello/getSalary", {empId:'123'})
.success(function(response) {
$scope.employeeData = response;
});
});
- Below is the screenshot of the application
