1. create sample rest web service. get an employee with id
http://cgenit.blogspot.com/2015/06/creating-webservice.html
2. let's create a simple web application calling this rest service
we call this rest service with
http://localhost:8080/Rest/rest/employeeservices/getemployeedetail?employeeId=1
3. We use the same "index.jsp" for this application
4. we create "hello.js" to put the angular based scripts
5. These script is called inside the "index.jsp"
the two files should be inside "webapp" folder . For this application path would be "Rest\src\main\webapp"
6. build the project with maven and deploy the Rest.war file inside the tomcat and access the application using the url http://localhost:8080/Rest/
you will simply get an output as below.
 |
| Rest Application code structure |
Below are the code snipets
hello.js
===========================================================
angular.module('demo', []).controller(
'Hello',
function($scope, $http) {
$http.get('http://localhost:8080/Rest/rest/employeeservices/getemployeedetail?employeeId=1').then(
function(response) {
$scope.employee = response.data;
});
});
=========================================================
index.jsp
============================================================
<!doctype html>
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is = {{employee.employeeId}}</p>
<p>First name = {{employee.firstName}}</p>
<p>Last name = {{employee.lastName}}</p>
<p>Date of join = {{employee.dateOfJoining}}</p>
<p>Department = {{employee.department}}</p>
<p>Email{{employee.email}}</p>
</div>
</body>
</html
============================================================
No comments:
Post a Comment