Wednesday 10 February 2016

Creating a restful web service and Invocation using angular

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.



4 comments:

  1. Plz provide a war file so that one can export in eclipse and test

    ReplyDelete
  2. super simple example. Found useful. please add "]);" in the controller last line

    ReplyDelete
  3. Controller last line will be })}]);

    ReplyDelete