AngularJS Restful web service example using $http

This post is in continuation with AngularJS web services tutorial

In previous post, we have already seen Restful web services CRUD example. In this post, we will use AngularJS to call rest CRUD APIs. So we are going to create a view and then perform CRUD operations on the basis of button clicks.

Source code:

click to begin
20KB .zip

Here are steps to create a simple Restful web services(JAXWS)  using jersey which will provide CRUD opertion.

1) Create a dynamic web project using maven in eclipse named “JAXRSJsonCRUDExample”

Maven dependencies

2) We need to add jersey jars utility in the classpath.

Jersey internally uses Jackson for Json Handling, so it will be used to marshal pojo objects to JSON.

Now create pom.xml as follows:
pom.xml

Application configuration:

3) create web.xml as below:

Please change initParam “com.sun.jersey.config.property.package” property to provide correct controller package name if you are not using same package.

Create bean class

4) Create a bean name “Country.java” in org.arpit.java2blog.bean.

Create Controller

5) Create a controller named “CountryController.java” in package org.arpit.java2blog.controller

@Path(/your_path_at_class_level) : Sets the path to base URL + /your_path_at_class_level. The base URL is based on your application name, the servlet and the URL pattern from the web.xml” configuration file.

@Path(/your_path_at_method_level): Sets path to base URL + /your_path_at_class_level+ /your_path_at_method_level

@Produces(MediaType.APPLICATION_JSON[, more-types ]): @Produces defines which MIME type is delivered by a method annotated with @GET. In the example text (“text/json”) is produced.

Create Service class

6) Create a class CountryService.java in package org.arpit.java2blog.service
It is just a helper class which should be replaced by database implementation. It is not very well written class, it is just used for demonstration.

AngularJS view

7) create angularJSCrudExample.html in WebContent folder with following content:

Explanation :

    • We have injected $http as we have done in ajax example through controller constructor.

    • We have defined various methods depending on operations such as editCountry, deleteCountry, submitCountry
    • When you click on submit button on form, it actually calls POST or PUT depending on operation. If you click on edit and submit data then it will be put operation as it will be update on existing resource. If you directly submit data, then it will be POST operation to create new resource,
    • Every time you submit data, it calls refereshCountryData() to refresh country table below.
    • When you call $http, you need to pass method type and URL, it will call it according, You can either put absolute URL or relative URL with respect to context root of web application.

8) It ‘s time to do maven build.

Right click on project -> Run as -> Maven build

9) Provide goals as clean install (given below) and click on run

Run the application

10) Right click on angularJSCrudExample.html -> run as -> run on server
Select apache tomcat and click on finish
10) You should be able to see below page
URL : “http://localhost:8080/AngularjsJAXRSCRUDExample/angularJSCrudExample.html”


Lets click on delete button corresponding to Nepal and you will see below screen:

Lets add new country France with population 15000

Click on submit and you will see below screen.

Now click on edit button corresponding to India and change population from 10000 to 100000.

Click on submit and you will see below screen:



Lets check Get method for Rest API

11) Test your get method REST service
URL :“http://localhost:8080/AngularjsJAXRSCRUDExample/rest/countries/”.

You will get following output:

As you can see , all changes have been reflected in above get call.

Project structure:


We are done with Restful web services json CRUD example using jersey. If you are still facing any issue, please comment.


import_contacts

You may also like:

Related Posts

  • 04 August

    Spring Restful web services xml example

    Table of ContentsWeb service Tutorial Content:Spring application configuration:Create bean classCreate controllerRun the application This post is in continuation with web service tutorial (Part -10). In this tutorial,we are going to see Spring Restful web services xml example. Web service Tutorial Content: Introduction to web services Web services interview questions SOAP web service introduction RESTful web service […]

  • 26 June

    Difference between SOAP and REST web services in java

    We have already seen SOAP web services and RESTful web services in detail before. In this post, we are going to see differences between SOAP and REST web services. SOAP vs REST web services Parameter SOAP REST Acronym SOAP stands for simple object access protocol REST stands for REpresentational State Transfer Protocol vs Architectural style […]

  • Web services interview questions
    24 June

    Top 20 Web services interview questions

    Web services interview questions are most asked questions if you are applying for software developer role. In this post, we will see multiple web services interview questions. 1. What are web services? Web services are ways of communication between two application over network. It allows you to expose business logic using API. For example: Lets […]

  • Restful web services interview questions
    22 June

    Restful web services interview questions

    Restful web services are very popular now a days because it is very simple to implement and less time consuming. In this post, we are going to see restful web services interview questions with answers. 1. What is REST? REST is an architectural style which was brought in by Roy Fielding in 2000 in his […]

  • 15 April

    Spring Restful web services CRUD example

    Table of ContentsWeb service Tutorial Content:Source code:Maven dependenciesSpring application configuration:Create bean classCreate ControllerCreate Service classRun the applicationGet methodPost methodPut MethodDelete methodProject structure: In this post, we are going see Spring Restful web services CRUD example. Web service Tutorial Content: Introduction to web services Web services interview questions SOAP web service introduction RESTful web service introduction Difference […]

  • 29 March

    RESTful web services JAXRS CRUD example using jersey

    Table of ContentsSource code:Maven dependenciesApplication configuration:Create bean classCreate ControllerCreate Service classRun the applicationPost methodPut Method This post is in continuation with web service tutorial (Part -8). Introduction to web services Web services interview questions SOAP web service introduction RESTful web service introduction Difference between SOAP and REST web services SOAP web service example in java […]

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.