以下angularjs代碼有什麼問題

我的.html頁面看起來像我是初學者水平編碼器和具有下面的代碼：

<!DOCTYPE html> 
    <html ng-app="myApp"> 
    <head> 
    <meta charset="ISO-8859-1"> 
    <title>Index</title> 
    <script type="text/javascript" src="/scripts/angular.js"></script> 
     <script type="text/javascript"> 
     alert("in script"); 
     var app = angular.module("myApp", []); 
     app.controller("myCtrl", function($scope , $http) { 
      refreshData(); 

      function refreshData(){ 
       alert("function called"); 
       $http({ 
        alert("get all countries"); 
        method: 'GET', 
        url:'http://localhost:8081/SpringWithAngularJs/rest/countries.json' 
         }).success(function(data) 
          { 

          $scope.posts = data; 

          }); 
      } 
      $scope.form = { 
        countryName : "pp", 
        population : "1000" 
         }; 
      $scope.add=function(){ 
       $http({ 
        alert("add countries"); 
        method: 'POST', 
        url:'http://localhost:8081/SpringWithAngularJs/rest/countries/create/'+$scope.form.countryName+'/'+$scope.form.population 
        }).success(function(data){ 
         alert("Country Added"); 
         refreshData(); 
         }); 
       } 
      $scope.remove=function(data){ 
       $http({ 
        alert("delete countries"); 
        method: 'DELETE', 
        url:'http://localhost:8081/SpringWithAngularJs/rest/countries/delete/'+data 
        }).success(function(data){ 
         alert('Country Deleted'); 
         refreshData(); 
         }); 
      } 
     }); 
     </script> 
     </head> 
    <body ng-controller="myCtrl"> 
    <h1>Country List</h1> 
     <table border=""> 
      <thead> 
       <tr> 
        <th>Country Id</th> 
        <th>Country Name</th> 
        <th>Country Population</th> 
        <th>Action</th> 
       </tr> 
      </thead> 

      <tr ng-repeat="c in posts"> 
       <td>{{c.countryId}}</td> 
       <td>{{c.countryName}}</td> 
       <td>{{c.population}}</td> 
       <td><button ng-click="remove{$index}">Remove</button></td> 
      </tr> 
     </table> 

     <h1>Add Country</h1> 
     <table> 
      <tr> 
       <td>Country Name:</td> 
       <td><input type="text" ng-model="form.countryName"/></td> 
      </tr> 

      <tr> 
       <td>Country Population:</td> 
       <td><input type="text" ng-model="form.population"/></td> 
      </tr> 

      <tr> 
       <td><button type="submit" ng-click="add()">Add</button></td> 
      </tr> 

     </table> 

    </body> 
    </html>

我的控制器看起來像：運行HTML頁面甚至沒有提醒功能的當JavaScript正在工作。爲什麼會發生這種情況？

package com.cg.springwithangularjs.controllers; 

import java.util.List; 

import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.ui.Model; 
import org.springframework.web.bind.annotation.PathVariable; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.RestController; 

import com.cg.springwithangularjs.dtos.Country; 
import com.cg.springwithangularjs.exceptions.CountryException; 
import com.cg.springwithangularjs.services.CountryService; 

@RestController 
public class CountryFrontController { 
    @Autowired 
    CountryService countryService; 

    @RequestMapping(value="/countries",method=RequestMethod.GET,headers="Accept=application/json") 
    public List<Country> getallCountries(Model model){ 
     System.out.println("in function"); 
     try { 
      return countryService.getAllCountries(); 
     } catch (CountryException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
     } 
     return null; 
    } 

    @RequestMapping(value="/countries/create/{name}/{popu}",method=RequestMethod.POST,headers="Accept=application/json") 
    public List<Country> addCountry(@PathVariable String name , @PathVariable String popu){ 
     Country country = new Country(); 
     country.setCountryName(name); 
     country.setPopulation(popu); 

     try { 
      countryService.addCountry(country); 
      return countryService.getAllCountries(); 
     } catch (CountryException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
     } 

     return null; 
    } 

    @RequestMapping(value="/countries/delete/{id}",method=RequestMethod.DELETE,headers="Accept=application/json") 
    public List<Country> deleteCountry(@PathVariable String id){ 
     try { 
      countryService.delete(id); 
      return countryService.getAllCountries(); 
     } catch (CountryException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
     } 
     return null; 
    } 
}

來源

2017-01-22 Girjesh

可以_you_告訴我們什麼是錯的！？任何控制檯錯誤？ –

其實我試圖用spring來運行我的第一個angularjs應用程序。我是一個初學者，所以我沒有太多的知識，並且在運行.html頁面後，寫入的JavaScript不起作用@MatthewCawley – Girjesh

嘗試從三個$ http服務中的配置對象中刪除alert（），以便它們看起來像$ http（{method：'GET'，url：'/someUrl'}).success ... – darron614

在你的三個$ HTTP服務拆下配置對象警報（），讓它們看起來像 $http({method: 'GET', url: '/someUrl'}).success ...

也嘗試和改變remove函數調用：

<td><button ng-click="remove{$index}">Remove</button></td>

到：

<td><button ng-click="remove($index)">Remove</button></td>

來源

2017-01-22 13:36:48 darron614

該變化已經起作用。謝謝你能告訴我如何驗證給定的HTML表單中的字段。驗證是像國家名稱應該是必需的，人口應該是數字@達隆614 – Girjesh

以下angularjs代碼有什麼問題

回答

相關問題