Fatal编程技术网
  • angularjs/
  • 以下angularjs代码中有什么错误

以下angularjs代码中有什么错误

angularjs spring-mvc

以下angularjs代码中有什么错误,angularjs,spring-mvc,Angularjs,Spring Mvc,我的代码有什么问题？它不能正常工作 我的.html页面看起来像 我是一名初级程序员，拥有以下代码： <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="ISO-8859-1"> <title>Index</title> <script type="text/javascript" src="/scripts/an

我的代码有什么问题？它不能正常工作

我的.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>


指数
警报（“脚本”）；
var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope，$http）{
刷新数据（）；
函数refreshData（）{
警报（“调用的函数”）；
$http({
警惕（“获取所有国家”）；
方法：“GET”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries.json'
}).成功（功能（数据）
{
$scope.posts=数据；
});
}
$scope.form={
国家名称：“pp”，
人口：“1000”
};
$scope.add=函数（）{
$http({
警报（“添加国家”）；
方法：“POST”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries/create/“+$scope.form.countryName+”/“+$scope.form.population”
}).成功（功能（数据）{
警报（“新增国家”）；
刷新数据（）；
});
}
$scope.remove=函数（数据）{
$http({
警报（“删除国家”）；
方法：“删除”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries/delete/“+数据
}).成功（功能（数据）{
警报（“国家/地区已删除”）；
刷新数据（）；
});
}
});
国家名单
国家Id
国名
农村人口
行动
{{c.countryId}
{{c.countryName}
{{c.人口}}
去除
添加国家/地区
国家名称：
国家人口：
添加
我的控制器看起来像： 当运行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;
    }
}

package com.cg.springwithangularjs.controllers；
导入java.util.List；
导入org.springframework.beans.factory.annotation.Autowired；
导入org.springframework.ui.Model；
导入org.springframework.web.bind.annotation.PathVariable；
导入org.springframework.web.bind.annotation.RequestMapping；
导入org.springframework.web.bind.annotation.RequestMethod；
导入org.springframework.web.bind.annotation.RestController；
导入com.cg.springwithangularjs.dtos.Country；
导入com.cg.springwithangularjs.exceptions.CountryException；
导入com.cg.springwithangularjs.services.CountryService；
@RestController
公共类CountryFrontController{
@自动连线
乡村服务乡村服务；
@RequestMapping（value=“/countries”，method=RequestMethod.GET，headers=“Accept=application/json”）
公共列表getallCountries（模型）{
System.out.println（“函数内”）；
试一试{
return countryService.getAllCountries（）；
}捕获（e）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}
返回null；
}
@RequestMapping（value=“/countries/create/{name}/{popu}”，method=RequestMethod.POST，headers=“Accept=application/json”）
公共列表addCountry（@PathVariable字符串名称，@PathVariable字符串popu）{
国家=新国家（）；
country.setCountryName（名称）；
国家人口（popu）；
试一试{
countryService.addCountry（country）；
return countryService.getAllCountries（）；
}捕获（e）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}
返回null；
}
@RequestMapping（value=“/countries/delete/{id}”，method=RequestMethod.delete，headers=“Accept=application/json”）
公共列表deleteCountry（@PathVariable字符串id）{
试一试{
countryService.delete（id）；
return countryService.getAllCountries（）；
}捕获（e）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}
返回null；
}
}
从三个$http服务的配置对象中删除alert（），使它们看起来像 
$http（{method'GET'，url:'/someUrl'}）。成功…


还可以尝试从以下位置更改remove函数调用：

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

删除
致：

删除
您能告诉我们出了什么问题吗！？有控制台错误吗？实际上我正在尝试用spring运行我的第一个angularjs应用程序。我是一个初学者，所以我对它不太了解，在运行.html页面后，编写的javascript不起作用@Matthewcawley尝试从三个$http服务的配置对象中删除alert（），使它们看起来像$http（{method:'GET'，url:'/someUrl'）。成功…是的，它起作用了。谢谢@darron614，还有一件事你能告诉我html中的remove function是否还有其他错误吗？因为单击按钮后的数据将“0”值传递给IndexChanges worked。谢谢你能告诉我如何验证给定html表单中的字段吗。验证类似于国家名称应该是必需的，人口应该是数字@darron614 
<td><button ng-click="remove($index)">Remove</button></td>