【发布时间】：2014-09-22 15:04:23
【问题描述】：
我正在尝试注册用户（从前端的表单输入中获取一些信息并通过 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>
如您所见，我已经包含了 Bootstrap UI、AngularJS、Bootstarp CSS 和我的项目文件：userService.js、indexController.js 和 registerController.js。我创建了属性 data-ng-app="collectionsApp"（在 app.js 中创建）和 data-ng-view（路由工作得很好）。
这是我的 app.js 文件：
var collectionsApp = angular.module('collectionsApp', [ 'ngRoute' ]);
collectionsApp.config(function($routeProvider) {
$routeProvider.when('/login', {
templateUrl : '/view/login.html',
controller : 'loginController'
})
.when('/register', {
templateUrl : '/view/register.html',
controller : 'registerController'
}).
otherwise({
redirectTo : '/login'
});
});
如您所见，我已将我的 registerControll 和 loginControll 包含在 app.js 中，因此我不必在 register.html 和 login.html 中执行此操作。
这是我的 register.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>
从 userControl.js 文件调用 data-ng-click 注册（用户）函数。 这是我的 userController.js 文件：
collectionsApp.controller('registerController', function($scope, userService) {
userService.register($scope.user).then(function(data){
});
});
从此文件中调用 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;
});
}
};
});
从这里注册函数目标 /user/add 到后端的 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!");
}
}
}
当我启动服务器并通过 Chrome 和地址栏中的 localhost:port 转到我的前端时，我可以看到路由正在工作，但是当我填写表格并按下应该触发 data-ng-click= 的按钮时“注册（用户）”注意发生。当我右键单击 > 检查元素 > 控制台时：我看到此错误：
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)
有人可以向我解释我做错了什么吗？ 比你提前... 爸爸
【问题讨论】：
标签： java javascript html angularjs spring-mvc