GEtting 404 error when calling controller from angular js route

Ranch Hand

Posts: 64

posted 5 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

below is my code. I don't find any issue.I am getting 404 error when I click on submit button below is the erro that I am getting .

Failed to load resource: the server responded with a status of 404 (Not found)

Thanks all for any help !!!

<html>
  <head>  
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    
    <title>AngularJS $http Rest example</title>  
 <script type="text/javascript">
            var app = angular.module("CountryManagement", []);
         
            //Controller Part
            app.controller("CountryController", function($scope, $http) {
         
               
                $scope.countries = [];
                $scope.countryForm = {
                    id : -1,
                    countryName : "",
                    population : ""
                };
         
                //Now load the data from server
                _refreshCountryData();
         
                //HTTP POST/PUT methods for add/edit country 
                // with the help of id, we are going to find out whether it is put or post operation
                
                $scope.submitCountry = function() {
         
                    var method = "";
                    var url = "";
                    if ($scope.countryForm.id == -1) {
                        //Id is absent in form data, it is create new country operation
                        method = "POST";
                        url = 'rest/countries';
                    } else {
                        //Id is present in form data, it is edit country operation
                        method = "PUT";
                        url = 'rest/countries';
                    }
         
                    $http({
                        method : method,
                        url : url,
                        data : angular.toJson($scope.countryForm),
                        headers : {
                            'Content-Type' : 'application/json'
                        }
                    }).then( _success, _error );
                };
         
                //HTTP DELETE- delete country by Id
                $scope.deleteCountry = function(country) {
                    $http({
                        method : 'DELETE',
                        url : 'rest/countries/' + country.id
                    }).then(_success, _error);
                };
 
             // In case of edit, populate form fields and assign form.id with country id
                $scope.editCountry = function(country) {
                  
                    $scope.countryForm.countryName = country.countryName;
                    $scope.countryForm.population = country.population;
                    $scope.countryForm.id = country.id;
                };
         
                /* Private Methods */
                //HTTP GET- get all countries collection
                function _refreshCountryData() {
                    $http({
                        method : 'GET',
                        url : 'http://localhost:8080/AngularjsJAXRSCRUDExample/rest/countries'
                    }).then(function successCallback(response) {
                        $scope.countries = response.data;
                    }, function errorCallback(response) {
                        console.log(response.statusText);
                    });
                }
         
                function _success(response) {
                    _refreshCountryData();
                    _clearFormData()
                }
         
                function _error(response) {
                    console.log(response.statusText);
                }
         
                //Clear the form
                function _clearFormData() {
                    $scope.countryForm.id = -1;
                    $scope.countryForm.countryName = "";
                    $scope.countryForm.population = "";
                
                };
            });
        </script>
        <style>
           
.blue-button{
	background: #25A6E1;
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
	padding:3px 5px;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:12px;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:4px;
	border:1px solid #1A87B9
}

.red-button{
	background: #CD5C5C;

padding:3px 5px;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:12px;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:4px;
	border:1px solid #CD5C5C
}

table {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
   width: 50%;
}

caption {
  text-align: left;
  color: silver;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px;
}

th {
  background: SteelBlue;
  color: white;
}

tbody tr:nth-child(even) {
  background: WhiteSmoke;
}

tbody tr td:nth-child(2) {
  text-align:center;
}

tbody tr td:nth-child(3),
tbody tr td:nth-child(4) {
  text-align: center;
  font-family: monospace;
}

tfoot {
  background: SeaGreen;
  color: white;
  text-align: right;
}

tfoot tr th:last-child {
  font-family: monospace;
}

td,th{
                border: 1px solid gray;
                width: 25%;
                text-align: left;
                padding: 5px 10px;
            }
          
            
            
        </style>
    <head>
    <body ng-app="CountryManagement" ng-controller="CountryController">
         <h1>
           AngularJS Restful web services example using $http
        </h1> 
        <form ng-submit="submitCountry()">
            <table>
               
                <tr>
                    <th colspan="2">Add/Edit country</th>
                 </tr>
                <tr>
                    <td>Country</td>
                    <td><input type="text" ng-model="countryForm.countryName" /></td>
                </tr>
                <tr>
                    <td>Population</td>
                    <td><input type="text" ng-model="countryForm.population"  /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="Submit" class="blue-button" /></td>
                </tr>
            </table>
        </form>
        <table>
            <tr>
              
                <th>CountryName</th>
                <th>Population</th>
                <th>Operations</th>
               
            </tr>
 
            <tr ng-repeat="country in countries">
               
    <td> {{ country.countryName }}</td>
    <td >{{ country.population }}</td>  
                
                <td><a ng-click="editCountry(country)" class="blue-button">Edit</a> | <a ng-click="deleteCountry(country)" class="red-button">Delete</a></td>
            </tr>
 
        </table>
 
       
 
       
      
  </body>
</html>

below is my web.xml

below is my dispatcher servlet

below is my controller classs

package com.soma.controller;

import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.arpit.java2blog.bean.Country;
import org.arpit.java2blog.service.CountryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@Controller
@RestController
public class CountryController {

@Autowired
 private HttpServletRequest request;
 CountryService countryService = new CountryService();

@RequestMapping(value = "/countries", method = RequestMethod.GET, headers = "Accept=application/json")
 public List getCountries() {
  
  List listOfCountries = countryService.getAllCountries();
  return listOfCountries;
 }

@RequestMapping(value = "/country/{id}", method = RequestMethod.GET, headers = "Accept=application/json")
 public Country getCountryById(@PathVariable int id) {
  return countryService.getCountry(id);
 }

@RequestMapping(value = "/countries", method = RequestMethod.POST, headers = "Accept=application/json")
 public Country addCountry(@RequestBody Country country) {
  return countryService.addCountry(country);
 }
 
 @RequestMapping(value = "/countries", method = RequestMethod.POST)
 public Country addCountry(@RequestBody Country country) {
  return countryService.addCountry(country);
 }

@RequestMapping(value = "/countries", method = RequestMethod.PUT, headers = "Accept=application/json")
 public Country updateCountry(@RequestBody Country country) {
  return countryService.updateCountry(country);

}

@RequestMapping(value = "/country/{id}", method = RequestMethod.DELETE, headers = "Accept=application/json")
 public void deleteCountry(@PathVariable("id") int id) {
  countryService.deleteCountry(id);

} 
}

somashaker goud

Ranch Hand

Posts: 64

posted 5 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Any help is higly appreciated...