Java AngularJS、UI Bootsrap、MVC前端-数据ng点击不起作用_Java_Javascript_Html_Angularjs_Spring Mvc

Java AngularJS、UI Bootsrap、MVC前端-数据ng点击不起作用

java javascript html angularjs spring-mvc

Java AngularJS、UI Bootsrap、MVC前端-数据ng点击不起作用,java,javascript,html,angularjs,spring-mvc,Java,Javascript,Html,Angularjs,Spring Mvc,我正在尝试注册用户（从前端的表单输入中获取一些信息并通过AngularJS发送到后端），但我遇到了一些问题这是我的index.html文件： <!DOCTYPE html> <html data-ng-app="collectionsApp"> <head> <meta charset="UTF-8"> <title>Collections</title> <l

我正在尝试注册用户（从前端的表单输入中获取一些信息并通过AngularJS发送到后端），但我遇到了一些问题

这是我的index.html文件：

<!DOCTYPE html>
<html data-ng-app="collectionsApp">
    <head>
        <meta charset="UTF-8">
        <title>Collections</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div data-ng-view></div>
    </body>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <script src="/scripts/app.js"></script>
    <script src="/scripts/service/userService.js"></script>
    <script src="/scripts/controller/indexController.js"></script>
    <script src="/scripts/controller/registerController.js"></script>
</html>

<div class="container">
   <form class="form-signin" role="form">
      <h1 class="form-signin-heading">Please register</h1>
      <input type="text" class="form-control" placeholder="Email address" required data-ng-model='user.email'> 
      <input type="text" class="form-control" placeholder="Password" required data-ng-model='user.password'>
      <input type="text" class="form-control" placeholder="Firts name" required data-ng-model='user.firstName'>
      <input type="text" class="form-control" placeholder="Last name" required data-ng-model='user.LastName'>
      <button class="btn btn-lg btn-primary btn-block" type="submit" data-ng-click="register(user)">Register</button>
      <div>
         <a href="#login">Login</a>
      </div>
   </form>
</div>

正如您所看到的，我已经在app.js中包含了我的RegisterControl和loginControll，所以我不必在register.html和login.html中这样做

这是我的register.html文件：

<!DOCTYPE html>
<html data-ng-app="collectionsApp">
    <head>
        <meta charset="UTF-8">
        <title>Collections</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div data-ng-view></div>
    </body>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <script src="/scripts/app.js"></script>
    <script src="/scripts/service/userService.js"></script>
    <script src="/scripts/controller/indexController.js"></script>
    <script src="/scripts/controller/registerController.js"></script>
</html>

<div class="container">
   <form class="form-signin" role="form">
      <h1 class="form-signin-heading">Please register</h1>
      <input type="text" class="form-control" placeholder="Email address" required data-ng-model='user.email'> 
      <input type="text" class="form-control" placeholder="Password" required data-ng-model='user.password'>
      <input type="text" class="form-control" placeholder="Firts name" required data-ng-model='user.firstName'>
      <input type="text" class="form-control" placeholder="Last name" required data-ng-model='user.LastName'>
      <button class="btn btn-lg btn-primary btn-block" type="submit" data-ng-click="register(user)">Register</button>
      <div>
         <a href="#login">Login</a>
      </div>
   </form>
</div>

从该文件调用userService.js文件中的函数。这是我的userService.js文件：

collectionsApp.service('userService', function($scope, $http) {
    return {
        login : function(user) {
            $http.post('/user/login', user).then(function(data) {
                return data;
            });
        },
        register : function(user) {
            $http.post('/user/add', user).then(function(data) {
                return data;
            });
        }
    };
});

从这里在后端注册函数targets/user/add-in userController.java。这是文件：

package x.y.collections.controller;

import java.util.HashMap;

import javax.annotation.Resource;

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;

import x.y.collections.dao.UserDAO;
import x.y.collections.model.User;
import x.y.collections.utility.Response;

@RestController
@RequestMapping("/user")
public class UserController {

    @Resource
    UserDAO userDao;

    @RequestMapping("/find/{id}")
    public User FindUser(@PathVariable Long id) {
        return userDao.findOne(id);
    }

    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public HashMap<String, String> AddUser(@RequestBody User user) {
        final User requestedUserBody = userDao.findByEmail(user.getEmail());
        if (requestedUserBody.getEmail().equals(user.getEmail())) {
            return Response.setError("User allready in databse!");
        } else {
            userDao.save(user);
            return Response.setSuccess("Registration succsessful!");
        }
    }

    @RequestMapping(value = { "/login" }, method = RequestMethod.POST)
    public HashMap<String, String> LoginUser(@RequestBody User user) {
        final User requestedUserBody = userDao.findByEmail(user.getEmail());
        if (requestedUserBody.getPassword().equals(user.getPassword())) {
            return Response.setError("Username and password do not match!");
        } else {
            return Response.setSuccess("Login succsessful!");
        }
    }
}

包x.y.collections.controller；
导入java.util.HashMap；
导入javax.annotation.Resource；
导入org.springframework.web.bind.annotation.PathVariable；
导入org.springframework.web.bind.annotation.RequestBody；
导入org.springframework.web.bind.annotation.RequestMapping；
导入org.springframework.web.bind.annotation.RequestMethod；
导入org.springframework.web.bind.annotation.RestController；
导入x.y.collections.dao.UserDAO；
导入x.y.collections.model.User；
导入x.y.collections.utility.Response；
@RestController
@请求映射（“/user”）
公共类用户控制器{
@资源
UserDAO UserDAO；
@请求映射（“/find/{id}”）
公共用户FindUser（@PathVariable Long id）{
返回userDao.findOne（id）；
}
@RequestMapping（value=“/add”，method=RequestMethod.POST）
公共HashMap AddUser（@RequestBody User）{
最终用户requestedUserBody=userDao.findByEmail（User.getEmail（））；
if（requestedUserBody.getEmail（）.equals（user.getEmail（）））{
return Response.setError（“数据库中的用户allready！”）；
}否则{
保存（用户）；
返回Response.setSuccess（“注册成功！”）；
}
}
@RequestMapping（值={“/login”}，方法=RequestMethod.POST）
公共HashMap登录用户（@RequestBody用户）{
最终用户requestedUserBody=userDao.findByEmail（User.getEmail（））；
if（requestedUserBody.getPassword（）.equals（user.getPassword（）））{
return Response.setError（“用户名和密码不匹配！”）；
}否则{
返回Response.setSuccess（“登录成功！”）；
}
}
}

当我启动服务器并通过Chrome和localhost:port进入我的前端地址栏时，我可以看到路由正在工作，但当我填写表单并按下本应触发数据的按钮时，单击“注册（用户）”注意到发生了什么。当我右键单击>检查元素>控制台时：我看到此错误：

Error: [$injector:unpr] http://errors.angularjs.org/1.2.19/$injector/unpr?p0=<div data-ng-view="" class="ng-scope">copeProvider%20%3C-%20%24scope%20%3C-%20userService
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:6:450
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:36:202
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:34:305)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:36:270
    at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:34:305)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:6)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:165)
    at Object.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:435)
    at Object.d [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:36)

错误：[$injector:unpr]http://errors.angularjs.org/1.2.19/$injector/unpr？p0=copeProvider%20%3C-%20%24范围%20%3C-%20userService
错误（本机）
在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:6:450
在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:36:202
在Object.c[as get](http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:34:305)
在http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:36:270
在c(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:34:305)
在d(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:6)
在Object.instantiate(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:165)
反对。(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:435)
在Object.d[作为调用](http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:36)

有人能解释一下我做错了什么吗？比你提前。。。

您的注册表控制器中的Papi

collectionsApp.controller('registerController', function($scope, userService) {
    $scope.user = {};
    .....
    $scope.register = function(){
         userService.register($scope.user).then(function(data){

         });
    };
});

谢谢Scott，但它仍然不起作用。。。在js控制台出现了同样的旧错误，我在数据库中看不到任何条目，表是空的。。。