Step 1: Create a restful-webservice as mentioned in
Step 2:
To access this rest api from angular, we need to create an angular web-app
Follow the below steps to create web-app in eclipse.
a) Create a Dynamic Web project in eclipse
File->New->Dynamic web Project
Give the project name as "angularjs-rest service".
b) Create the first page index.html
Right click on WebContent folder ->New ->HTML File.
Change the name to index.html.
Open index.html and change the <title> as “Angular Rest Service Demo".
c) Import AngularJs libraries
We can include AngularJS library to our application using 'script' tag.
Download following js files and copy them to Webcontent/js/lib folder.
If the folder doesn’t exist, please create the same.
- angular.js
- angular-resource.js
You can include them in the index.html as mentioned below
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-resource.js"></script>
d) Making angular app.
Now we have imported all the required angular libraries required for invocation of your rest api.
Now let’s define this app as angular app using ng-app directive from angular as mentioned below
<body ng-app="serviceDemoApp">
</body>
Here name serviceDemoApp defines module for your angular app
e) Adding controller for your index.html
Now let’s add a controller for your index.html file. In angular js controller controls the data flow to an html element using ng-controller directive. One can define the controller in a script file as mentioned below
For this we can create a new controller js inside Webcontent/js folder
Inside the controller we need to invoke the service, So before creating the controller.js file, let’s create a service js access your restful created.
We can use $resource from angular-resource for this purpose. This will help us to create a resource object that lets you interact with RESTful server-side data sources.
Include ng-Resource module to your service module script as below
var app=angular.module('serviceDemoApp',['ngResource']);
f) Defining service
You can define and register a service using a module.factory method. Here we are going to define
A DemoService to invoke your rest service created before
Save the file as service.js file, We will be invoking this service from controller js file
var app=angular.module('serviceDemoApp',['ngResource']);
app.factory('DemoService',function($resource){
return $resource('/RestWebApp/rest/data/get/msg',{},{
query:{
method:'GET',
params:{},
isArray:false
}
});
});
Here we have defined a query method to get for GET request
e) Invoking the service
Inside the controller we need to pass the service instance created, please refer the code
below to create a controller and access the service, we will be setting the response to a controller.
var app = angular.module('serviceDemoApp');
app.controller('serviceCtrl',['DemoService','$scope',function(DemoService, $scope){
//calling service
DemoService.query(function(DemoService){
$scope.response=DemoService;
})]);
Save the file as controller.js
f) Invoking from index.html
Add below scripts to your index.html
<script src="js/service.js"></script>
<script src="js/controller.js"></script>
Let’s add a div box with controller added to reflect the data from backend restful web service
<div ng-controller="serviceCtrl">
<table border="1">
<tr>
<td>Header</td>
<td ng-bind="response.msgHeader"></td>
</tr>
<tr>
<td>Data</td>
<td ng-bind="response.content"></td>
</tr>
</table>
</div>
e) That’s it.
Now you can run the app in a server and you can view the results as the message you set from API.
Plz provide a war file so that one can export in eclipse and test
ReplyDeletesuper simple example. Found useful. please add "]);" in the controller last line
ReplyDeleteThank you :-)
DeleteController last line will be })}]);
ReplyDelete