{"id":155,"date":"2016-08-06T20:34:00","date_gmt":"2016-08-06T20:34:00","guid":{"rendered":"http:\/\/www.java2blog.com\/?p=155"},"modified":"2021-09-07T00:05:04","modified_gmt":"2021-09-06T18:35:04","slug":"spring-mvc-angularjs-example","status":"publish","type":"post","link":"https:\/\/java2blog.com\/spring-mvc-angularjs-example\/","title":{"rendered":"Spring MVC angularjs example"},"content":{"rendered":"<div dir=\"ltr\" style=\"text-align: left;\">\n<div style=\"text-align: justify;\">\n<p>n this tutorial, we will see Spring MVC angularjs example.<\/p>\n<h2 style=\"text-align: left;\">Spring MVC tutorial:<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-mvc-hello-world-example\/\">Spring MVC hello world example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-mvc-hibernate-mysql-crud-example\/\">Spring MVC Hibernate MySQL example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-mvc-interceptor-example\/\">Spring MVC interceptor example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-mvc-angularjs-example\/\">Spring MVC angularjs example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-mvc-requestmapping-annotation-example\/\">Spring MVC @RequestMapping example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-component-service-repository-and-controller-annotations\/\">Spring Component,Service, Repository and Controller example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-mvc-modelattribute-example\/\">Spring MVC @ModelAttribute annotation example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-restcontroller-example\/\">Spring MVC @RestController annotation example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-mvc-multiactioncontroller-example\/\">Spring MultiActionController Example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-mvc-modelmap\/\">Spring MVC ModelMap<\/a><a href=\"http:\/\/www.java2blog.com\/spring-mvc-file-upload-example\/\">Spring MVC file upload example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-restful-web-services-example\/\">Spring restful web service example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-restful-web-services-json-example\/\">Spring restful web service json example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-restful-web-services-crud-example\/\">Spring Restful web services CRUD example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-security-hello-world-example\/\">Spring security hello world example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/spring-security-custom-login-form\/\">Spring security custom login form example<\/a><\/li>\n<\/ul>\n<p>In this post, we will create Spring MVC REST APIs and perform CRUD operations using AngularJs by calling REST APIs.<\/p>\n<h2>Github Source code:<\/h2>\n<div id=\"toc_container\" class=\"no_bullets\">\n<p><a href=\"https:\/\/github.com\/arpitmandliya\/AngularjsJAXRSCRUDExample\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Download SpringMVC AngularJS example<\/a><\/p>\n<\/div>\n<p>Here are steps to create a simple <a href=\"http:\/\/www.java2blog.com\/spring-restful-web-services-example\/\">Spring\u00a0Rest API<\/a> which will provide CRUD opertions and angularJS to call Spring MVC APIs.<\/p>\n<\/div>\n<p><b>1)\u00a0<\/b>Create a\u00a0<a href=\"http:\/\/www.java2blog.com\/how-to-create-dynamic-web-project-using\/\" target=\"_blank\" rel=\"noopener noreferrer\">dynamic web project using maven in eclipse<\/a>\u00a0named &#8220;AngularjsSpringRestExample&#8221;<\/p>\n<div style=\"text-align: justify;\">\n<h3>Maven dependencies<\/h3>\n<p><b>2)<\/b><span style=\"text-align: left;\">Now create pom.xml as follows:<\/span><\/p>\n<\/div>\n<p><b>pom.xml<\/b><\/p>\n<pre class=\"xml\" data-blogger-escaped-name=\"code\" data-blogger-escaped-style=\"text-align: left;\">&lt;project xmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n  xsi:schemaLocation=\"http:\/\/maven.apache.org\/POM\/4.0.0 http:\/\/maven.apache.org\/maven-v4_0_0.xsd\"&gt;\n  &lt;modelVersion&gt;4.0.0&lt;\/modelVersion&gt;\n  &lt;groupId&gt;com.arpit.java2blog&lt;\/groupId&gt;\n  &lt;artifactId&gt;AngularjsSpringRestExample&lt;\/artifactId&gt;\n  &lt;packaging&gt;war&lt;\/packaging&gt;\n  &lt;version&gt;0.0.1-SNAPSHOT&lt;\/version&gt;\n  &lt;name&gt;AngularjsSpringRestExample Maven Webapp&lt;\/name&gt;\n  &lt;url&gt;http:\/\/maven.apache.org&lt;\/url&gt;\n  &lt;dependencies&gt;\n    &lt;dependency&gt;\n      &lt;groupId&gt;junit&lt;\/groupId&gt;\n      &lt;artifactId&gt;junit&lt;\/artifactId&gt;\n      &lt;version&gt;3.8.1&lt;\/version&gt;\n      &lt;scope&gt;test&lt;\/scope&gt;\n    &lt;\/dependency&gt;\n    &lt;dependency&gt;\n   &lt;groupId&gt;javax.servlet&lt;\/groupId&gt;\n   &lt;artifactId&gt;javax.servlet-api&lt;\/artifactId&gt;\n   &lt;version&gt;3.1.0&lt;\/version&gt;\n  &lt;\/dependency&gt;\n\n  &lt;dependency&gt;\n   &lt;groupId&gt;org.springframework&lt;\/groupId&gt;\n   &lt;artifactId&gt;spring-core&lt;\/artifactId&gt;\n   &lt;version&gt;${spring.version}&lt;\/version&gt;\n  &lt;\/dependency&gt;\n  &lt;dependency&gt;\n   &lt;groupId&gt;org.springframework&lt;\/groupId&gt;\n   &lt;artifactId&gt;spring-webmvc&lt;\/artifactId&gt;\n   &lt;version&gt;${spring.version}&lt;\/version&gt;\n  &lt;\/dependency&gt;\n   &lt;dependency&gt;\n            &lt;groupId&gt;com.fasterxml.jackson.core&lt;\/groupId&gt;\n            &lt;artifactId&gt;jackson-databind&lt;\/artifactId&gt;\n             &lt;version&gt;2.4.1&lt;\/version&gt;\n        &lt;\/dependency&gt;\n &lt;\/dependencies&gt;\n &lt;build&gt;\n  &lt;finalName&gt;AngularjsSpringRestExample&lt;\/finalName&gt;\n\n  &lt;plugins&gt;\n   &lt;plugin&gt;\n    &lt;groupId&gt;org.apache.maven.plugins&lt;\/groupId&gt;\n    &lt;artifactId&gt;maven-compiler-plugin&lt;\/artifactId&gt;\n    &lt;version&gt;3.1&lt;\/version&gt;\n    &lt;configuration&gt;\n     &lt;source&gt;${jdk.version}&lt;\/source&gt;\n     &lt;target&gt;${jdk.version}&lt;\/target&gt;\n    &lt;\/configuration&gt;\n   &lt;\/plugin&gt;\n  &lt;\/plugins&gt;\n\n &lt;\/build&gt;\n &lt;properties&gt;\n  &lt;spring.version&gt;4.2.1.RELEASE&lt;\/spring.version&gt;\n  &lt;jdk.version&gt;1.7&lt;\/jdk.version&gt;\n &lt;\/properties&gt;\n\n&lt;\/project&gt;\n<\/pre>\n<h3 style=\"text-align: left;\">Application configuration:<\/h3>\n<p><b>3) <\/b>create\u00a0web.xml as below:<\/p>\n<pre class=\"xml\" data-blogger-escaped-name=\"code\" data-blogger-escaped-style=\"text-align: left;\">&lt;!DOCTYPE web-app PUBLIC\n \"-\/\/Sun Microsystems, Inc.\/\/DTD Web Application 2.3\/\/EN\"\n \"http:\/\/java.sun.com\/dtd\/web-app_2_3.dtd\" &gt;\n\n&lt;web-app&gt;\n  &lt;display-name&gt;Archetype Created Web Application&lt;\/display-name&gt;\n  &lt;servlet&gt;\n &lt;servlet-name&gt;springrest&lt;\/servlet-name&gt;\n &lt;servlet-class&gt;\n  org.springframework.web.servlet.DispatcherServlet\n &lt;\/servlet-class&gt;\n &lt;load-on-startup&gt;1&lt;\/load-on-startup&gt;\n&lt;\/servlet&gt;\n\n&lt;servlet-mapping&gt;\n &lt;servlet-name&gt;springrest&lt;\/servlet-name&gt;\n &lt;url-pattern&gt;\/&lt;\/url-pattern&gt;\n&lt;\/servlet-mapping&gt;\n&lt;\/web-app&gt;\n<\/pre>\n<div style=\"font-size: medium; font-weight: normal; text-align: justify;\"><b><br \/>\n4)\u00a0<\/b>create a xml file named springrest-servlet.xml in \/WEB-INF\/ folder.<\/div>\n<div style=\"font-size: medium; font-weight: normal; text-align: justify;\">Please change context:component-scan if you want to use different package for spring to search for controller.Please refer to <a href=\"http:\/\/www.java2blog.com\/spring-mvc-hello-world-example\/\">spring mvc hello world example<\/a>for more understanding.<\/div>\n<div style=\"font-size: medium; font-weight: normal; text-align: justify;\"><\/div>\n<pre class=\"xml\" data-blogger-escaped-name=\"code\" data-blogger-escaped-style=\"font-weight: normal; text-align: justify;\">&lt;beans xmlns=\"http:\/\/www.springframework.org\/schema\/beans\"\n xmlns:context=\"http:\/\/www.springframework.org\/schema\/context\"\n xmlns:mvc=\"http:\/\/www.springframework.org\/schema\/mvc\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:schemaLocation=\" http:\/\/www.springframework.org\/schema\/beans http:\/\/www.springframework.org\/schema\/beans\/spring-beans-3.0.xsd http:\/\/www.springframework.org\/schema\/context\n        http:\/\/www.springframework.org\/schema\/context\/spring-context-3.0.xsd http:\/\/www.springframework.org\/schema\/mvc http:\/\/www.springframework.org\/schema\/mvc\/spring-mvc-3.0.xsd\"&gt;\n\n &lt;mvc:annotation-driven\/&gt;\n&lt;context:component-scan base-package=\"org.arpit.java2blog.controller\" \/&gt;\n&lt;mvc:default-servlet-handler\/&gt;\n&lt;\/beans&gt;\n<\/pre>\n<h3 style=\"text-align: left;\">Create bean class<\/h3>\n<p><b>5)<\/b>\u00a0Create a bean name &#8220;Country.java&#8221; in org.arpit.java2blog.bean.<\/p>\n<pre name=\"code\" class=\"java\">package org.arpit.java2blog.bean;\n\npublic class Country{\n\n    int id;\n    String countryName;\n    long population;\n\n    public Country() {\n        super();\n    }\n    public Country(int i, String countryName,long population) {\n        super();\n        this.id = i;\n        this.countryName = countryName;\n        this.population=population;\n    }\n    public int getId() {\n        return id;\n    }\n    public void setId(int id) {\n        this.id = id;\n    }\n    public String getCountryName() {\n        return countryName;\n    }\n    public void setCountryName(String countryName) {\n        this.countryName = countryName;\n    }\n    public long getPopulation() {\n        return population;\n    }\n    public void setPopulation(long population) {\n        this.population = population;\n    }\n\n}<\/pre>\n<h3 style=\"text-align: left;\">Create Controller<\/h3>\n<p><b>6)<\/b>\u00a0Create a controller named &#8220;CountryController.java&#8221; in package <b>org.arpit.java2blog.controller<\/b><\/p>\n<pre name=\"code\" class=\"java\">package org.arpit.java2blog.controller;\n\nimport java.util.List;\nimport javax.servlet.http.HttpServletRequest;\nimport org.arpit.java2blog.bean.Country;\nimport org.arpit.java2blog.service.CountryService;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.web.bind.annotation.PathVariable;\nimport org.springframework.web.bind.annotation.RequestBody;\nimport org.springframework.web.bind.annotation.RequestMapping;\nimport org.springframework.web.bind.annotation.RequestMethod;\nimport org.springframework.web.bind.annotation.RestController;\n\n@RestController\npublic class CountryController {\n\n    @Autowired\n    private HttpServletRequest request;\n    CountryService countryService = new CountryService();\n\n    @RequestMapping(value = \"\/countries\", method = RequestMethod.GET, headers = \"Accept=application\/json\")\n    public List getCountries() {\n\n        List listOfCountries = countryService.getAllCountries();\n        return listOfCountries;\n    }\n\n    @RequestMapping(value = \"\/country\/{id}\", method = RequestMethod.GET, headers = \"Accept=application\/json\")\n    public Country getCountryById(@PathVariable int id) {\n        return countryService.getCountry(id);\n    }\n\n    @RequestMapping(value = \"\/countries\", method = RequestMethod.POST, headers = \"Accept=application\/json\")\n    public Country addCountry(@RequestBody Country country) {\n        return countryService.addCountry(country);\n    }\n\n    @RequestMapping(value = \"\/countries\", method = RequestMethod.PUT, headers = \"Accept=application\/json\")\n    public Country updateCountry(@RequestBody Country country) {\n        return countryService.updateCountry(country);\n\n    }\n\n    @RequestMapping(value = \"\/country\/{id}\", method = RequestMethod.DELETE, headers = \"Accept=application\/json\")\n    public void deleteCountry(@PathVariable(\"id\") int id) {\n        countryService.deleteCountry(id);\n\n    }\n}<\/pre>\n<h3 style=\"text-align: left;\"><b>Create Service class<\/b><\/h3>\n<div style=\"text-align: left;\"><b>7)<\/b> Create a class CountryService.java in package <b>org.arpit.java2blog.service<\/b><br \/>\nIt 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.<\/div>\n<pre name=\"code\" class=\"java\">package org.arpit.java2blog.service;\n\nimport java.util.ArrayList;\nimport java.util.HashMap;\nimport java.util.List;\n\nimport org.arpit.java2blog.bean.Country;\n\n\/*\n * It is just a helper class which should be replaced by database implementation.\n * It is not very well written class, it is just used for demonstration.\n *\/\npublic class CountryService {\n\n    static HashMap&lt;Integer,Country&gt; countryIdMap=getCountryIdMap();\n\n    public CountryService() {\n        super();\n\n        if(countryIdMap==null)\n        {\n            countryIdMap=new HashMap&lt;Integer,Country&gt;();\n            \/\/ Creating some objects of Country while initializing\n            Country indiaCountry=new Country(1, \"India\",10000);\n            Country chinaCountry=new Country(4, \"China\",20000);\n            Country nepalCountry=new Country(3, \"Nepal\",8000);\n            Country bhutanCountry=new Country(2, \"Bhutan\",7000);\n\n            countryIdMap.put(1,indiaCountry);\n            countryIdMap.put(4,chinaCountry);\n            countryIdMap.put(3,nepalCountry);\n            countryIdMap.put(2,bhutanCountry);\n        }\n    }\n\n    public List getAllCountries()\n    {\n        List countries = new ArrayList(countryIdMap.values());\n        return countries;\n    }\n\n    public Country getCountry(int id)\n    {\n        Country country= countryIdMap.get(id);\n        return country;\n    }\n    public Country addCountry(Country country)\n    {\n        country.setId(getMaxId()+1);\n        countryIdMap.put(country.getId(), country);\n        return country;\n    }\n\n    public Country updateCountry(Country country)\n    {\n        if(country.getId()&lt;=0)\n            return null;\n        countryIdMap.put(country.getId(), country);\n        return country;\n\n    }\n    public void deleteCountry(int id)\n    {\n        countryIdMap.remove(id);\n    }\n\n    public static HashMap&lt;Integer, Country&gt; getCountryIdMap() {\n        return countryIdMap;\n    }\n\n    \/\/ Utility method to get max id\n    public static int getMaxId()\n    {   int max=0;\n    for (int id:countryIdMap.keySet()) {\n        if(max&lt;=id)\n            max=id;\n\n    }\n    return max;\n    }\n}\n<\/pre>\n<div style=\"text-align: left;\">\n<h3 style=\"text-align: left;\">AngularJS view<\/h3>\n<p><b>8)<\/b> create\u00a0<b>angularJSCrudExample.html<\/b> in WebContent folder with following content:<\/p>\n<pre class=\"xml\" data-blogger-escaped-name=\"code\">&lt;html&gt;\n  &lt;head&gt;\n\n  &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.4\/angular.js\"&gt;&lt;\/script&gt;\n\n    &lt;title&gt;AngularJS $http Rest example&lt;\/title&gt;\n &lt;script type=\"text\/javascript\"&gt;\n            var app = angular.module(\"CountryManagement\", []);\n\n            \/\/Controller Part\n            app.controller(\"CountryController\", function($scope, $http) {\n\n                $scope.countries = [];\n                $scope.countryForm = {\n                    id : -1,\n                    countryName : \"\",\n                    population : \"\"\n                };\n\n                \/\/Now load the data from server\n                _refreshCountryData();\n\n                \/\/HTTP POST\/PUT methods for add\/edit country\n                \/\/ with the help of id, we are going to find out whether it is put or post operation\n\n                $scope.submitCountry = function() {\n\n                    var method = \"\";\n                    var url = \"\";\n                    if ($scope.countryForm.id == -1) {\n                        \/\/Id is absent in form data, it is create new country operation\n                        method = \"POST\";\n                        url = '\/AngularjsSpringRestExample\/countries';\n                    } else {\n                        \/\/Id is present in form data, it is edit country operation\n                        method = \"PUT\";\n                        url = '\/AngularjsSpringRestExample\/countries';\n                    }\n\n                    $http({\n                        method : method,\n                        url : url,\n                        data : angular.toJson($scope.countryForm),\n                        headers : {\n                            'Content-Type' : 'application\/json'\n                        }\n                    }).then( _success, _error );\n                };\n\n                \/\/HTTP DELETE- delete country by Id\n                $scope.deleteCountry = function(country) {\n                    $http({\n                        method : 'DELETE',\n                        url : '\/AngularjsSpringRestExample\/country\/' + country.id\n                    }).then(_success, _error);\n                };\n\n             \/\/ In case of edit, populate form fields and assign form.id with country id\n                $scope.editCountry = function(country) {\n\n                    $scope.countryForm.countryName = country.countryName;\n                    $scope.countryForm.population = country.population;\n                    $scope.countryForm.id = country.id;\n                };\n\n                \/* Private Methods *\/\n                \/\/HTTP GET- get all countries collection\n                function _refreshCountryData() {\n                    $http({\n                        method : 'GET',\n                        url : 'http:\/\/localhost:8080\/AngularjsSpringRestExample\/countries'\n                    }).then(function successCallback(response) {\n                        $scope.countries = response.data;\n                    }, function errorCallback(response) {\n                        console.log(response.statusText);\n                    });\n                }\n\n                function _success(response) {\n                    _refreshCountryData();\n                    _clearFormData()\n                }\n\n                function _error(response) {\n                    console.log(response.statusText);\n                }\n\n                \/\/Clear the form\n                function _clearFormData() {\n                    $scope.countryForm.id = -1;\n                    $scope.countryForm.countryName = \"\";\n                    $scope.countryForm.population = \"\";\n\n                };\n            });\n        &lt;\/script&gt;\n        &lt;style&gt;\n\n.blue-button{\n background: #25A6E1;\n filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);\n padding:3px 5px;\n color:#fff;\n font-family:'Helvetica Neue',sans-serif;\n font-size:12px;\n border-radius:2px;\n -moz-border-radius:2px;\n -webkit-border-radius:4px;\n border:1px solid #1A87B9\n}\n\n.red-button{\n background: #CD5C5C;\n\n padding:3px 5px;\n color:#fff;\n font-family:'Helvetica Neue',sans-serif;\n font-size:12px;\n border-radius:2px;\n -moz-border-radius:2px;\n -webkit-border-radius:4px;\n border:1px solid #CD5C5C\n}\n\ntable {\n  font-family: \"Helvetica Neue\", Helvetica, sans-serif;\n   width: 50%;\n}\n\ncaption {\n  text-align: left;\n  color: silver;\n  font-weight: bold;\n  text-transform: uppercase;\n  padding: 5px;\n}\n\nth {\n  background: SteelBlue;\n  color: white;\n}\n\ntbody tr:nth-child(even) {\n  background: WhiteSmoke;\n}\n\ntbody tr td:nth-child(2) {\n  text-align:center;\n}\n\ntbody tr td:nth-child(3),\ntbody tr td:nth-child(4) {\n  text-align: center;\n  font-family: monospace;\n}\n\ntfoot {\n  background: SeaGreen;\n  color: white;\n  text-align: right;\n}\n\ntfoot tr th:last-child {\n  font-family: monospace;\n}\n\n            td,th{\n                border: 1px solid gray;\n                width: 25%;\n                text-align: left;\n                padding: 5px 10px;\n            }\n\n        &lt;\/style&gt;\n    &lt;head&gt;\n    &lt;body ng-app=\"CountryManagement\" ng-controller=\"CountryController\"&gt;\n         &lt;h1&gt;\n           AngularJS Restful web services example using $http\n        &lt;\/h1&gt;\n        &lt;form ng-submit=\"submitCountry()\"&gt;\n            &lt;table&gt;\n\n                &lt;tr&gt;\n                    &lt;th colspan=\"2\"&gt;Add\/Edit country&lt;\/th&gt;\n                 &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;Country&lt;\/td&gt;\n                    &lt;td&gt;&lt;input type=\"text\" ng-model=\"countryForm.countryName\" \/&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;Population&lt;\/td&gt;\n                    &lt;td&gt;&lt;input type=\"text\" ng-model=\"countryForm.population\"  \/&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td colspan=\"2\"&gt;&lt;input type=\"submit\" value=\"Submit\" class=\"blue-button\" \/&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;\/table&gt;\n        &lt;\/form&gt;\n        &lt;table&gt;\n            &lt;tr&gt;\n\n                &lt;th&gt;CountryName&lt;\/th&gt;\n                &lt;th&gt;Population&lt;\/th&gt;\n                &lt;th&gt;Operations&lt;\/th&gt;\n\n            &lt;\/tr&gt;\n\n            &lt;tr ng-repeat=\"country in countries\"&gt;\n\n    &lt;td&gt; {{ country.countryName }}&lt;\/td&gt;\n    &lt;td &gt;{{ country.population }}&lt;\/td&gt;\n\n                &lt;td&gt;&lt;a ng-click=\"editCountry(country)\" class=\"blue-button\"&gt;Edit&lt;\/a&gt; | &lt;a ng-click=\"deleteCountry(country)\" class=\"red-button\"&gt;Delete&lt;\/a&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n\n        &lt;\/table&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<p>Explanation :<\/p>\n<ul style=\"text-align: left;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"text-align: left;\">\n<li>We have injected $http as we have done in ajax example through controller constructor.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre name=\"code\">app.controller(\"CountryController\", function($scope, $http) {\n\n                $scope.countries = [];\n...<\/pre>\n<ul style=\"text-align: left;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"text-align: left;\">\n<li style=\"text-align: justify;\">We have defined various methods depending on operations such as editCountry, deleteCountry, submitCountry<\/li>\n<li style=\"text-align: justify;\">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,<\/li>\n<li style=\"text-align: justify;\">Every time you submit data, it calls refereshCountryData() to refresh country table below.<\/li>\n<li style=\"text-align: justify;\">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.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre name=\"code\"> \/\/HTTP GET- get all countries collection\n                function _refreshCountryData() {\n                    $http({\n                        method : 'GET',\n                        url : 'http:\/\/localhost:8080\/AngularjsSpringRestExample\/rest\/countries'\n                    }).then(function successCallback(response) {\n                        $scope.countries = response.data;\n                    }, function errorCallback(response) {\n                        console.log(response.statusText);\n                    });\n                }<\/pre>\n<\/div>\n<p><b>9)<\/b>\u00a0It &#8216;s time to do maven build.<\/p>\n<div>\n<p>Right click on project -&gt; Run as -&gt; Maven build<\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/jerseyMavenBuild.png\" width=\"586\" height=\"640\" border=\"0\" \/><\/div>\n<\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div><b>10)<\/b>\u00a0Provide goals as clean install (given below) and click on run<\/div>\n<div>\n<div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/jerseyMavenCleanInstall.png\" width=\"640\" height=\"513\" border=\"0\" \/><\/div>\n<\/div>\n<div>\n<h3 style=\"text-align: left;\"><b>Run the application<\/b><\/h3>\n<\/div>\n<div><b>10)\u00a0<\/b>Right click on\u00a0<b>angularJSCrudExample.html<\/b>\u00a0-&gt; run as -&gt; run on server<\/div>\n<div>Select apache tomcat and click on finish<\/div>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/RunningProject.png\" width=\"516\" height=\"640\" border=\"0\" \/><\/div>\n<div><\/div>\n<div style=\"margin: 0px;\"><b>11) You should be able to see below page<\/b><br \/>\n<b>URL<\/b> : &#8220;http:\/\/localhost:8080\/AngularjsJAXRSCRUDExample\/angularJSCrudExample.html&#8221;<\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/DefaultCountries.png\" width=\"640\" height=\"438\" border=\"0\" \/><\/div>\n<p><b><br \/>\n<\/b><b>Lets click on delete button corresponding to Nepal and you will see below screen:<\/b><\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/DeleteNepalAfter.png\" width=\"640\" height=\"438\" border=\"0\" \/><\/div>\n<p><b>Lets add new country France with population 15000<\/b><br \/>\n<b><br \/>\n<\/b><\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/AddingFranceBefore.png\" width=\"640\" height=\"408\" border=\"0\" \/><\/div>\n<p><b>Click on submit and you will see below screen.<\/b><br \/>\n<b><br \/>\n<\/b><\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/AfterFranceAddition.png\" width=\"640\" height=\"430\" border=\"0\" \/><\/div>\n<p><b>Now click on edit button corresponding to India and change population from 10000 to 100000.<\/b><br \/>\n<b><br \/>\n<\/b><\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/BeforeEditingIndia.png\" width=\"640\" height=\"436\" border=\"0\" \/><\/div>\n<p><b>Click on submit and you will see below screen:<\/b><\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/AftetEditingIndia.png\" width=\"640\" height=\"444\" border=\"0\" \/><\/div>\n<h4 style=\"text-align: left;\">Lets check Get method for Rest API<\/h4>\n<p><b>12)<\/b> Test your get method REST service<br \/>\n<b>URL :<\/b>&#8220;http:\/\/localhost:8080\/AngularjsSpringRestExample\/countries\/&#8221;.<\/p>\n<\/div>\n<div style=\"margin: 0px;\">\n<p>You will get following output:<\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<\/div>\n<div style=\"margin: 0px;\">\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/getCallPostman.png\" width=\"518\" height=\"640\" border=\"0\" \/><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p>As you can see , all changes have been reflected in above get call.<\/p>\n<h3 style=\"text-align: left;\"><b style=\"text-align: justify;\">Project structure:<\/b><\/h3>\n<\/div>\n<div style=\"text-align: justify;\">\n<div style=\"margin: 0px;\">\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" title=\"\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/SpringRestAngularJSProjectStructure.png\" alt=\"Spring MVC angularjs project structure\" width=\"528\" height=\"640\" border=\"0\" \/><\/div>\n<p><b><br \/>\n<\/b>We are done with Spring MVC angularjs example.If you are still facing any issue, please comment.<\/p>\n<\/div>\n<\/div>\n<div>\n<h2 style=\"text-align: left;\">AngularJS tutorial:<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.java2blog.com\/angularjs-hello-world-example\/\">AngularJs hello world example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/angularjs-controller-examples\/\">AngularJs controller examples<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/angularjs-ng-repeat-example\/\">AngularJs ng-repeat example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/angularjs-built-in-filter-examples\/\">AngularJs Built-in filter example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/angularjs-custom-filter-example\/\">AngularJs custom filter example<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/angularjs-ajax-example-using-http\/\">AngularJs ajax example using $http<\/a><\/li>\n<li><a href=\"http:\/\/www.java2blog.com\/angularjs-restful-web-service-example\/\">AngularJS RESTful web service JAXRS CRUD example using $http<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>n this tutorial, we will see Spring MVC angularjs example. Spring MVC tutorial: Spring MVC hello world example Spring MVC Hibernate MySQL example Spring MVC interceptor example Spring MVC angularjs example Spring MVC @RequestMapping example Spring Component,Service, Repository and Controller example Spring MVC @ModelAttribute annotation example Spring MVC @RestController annotation example Spring MultiActionController Example Spring [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[49,40,35],"tags":[],"_links":{"self":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts\/155"}],"collection":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/comments?post=155"}],"version-history":[{"count":0,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts\/155\/revisions"}],"wp:attachment":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/media?parent=155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/categories?post=155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/tags?post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}