以下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代码有什么问题

回答

相关问题