2016-05-19 164 views
0

我是Angular JS的新手,尝试使用Spring Tool创建一个存储学生记录的简单应用程序。如何使用Angular JS将数据保存在数据库中?

学生记录是: -

1.Name 2.Roll没有 3.Class

当我点击的HTML页面数据保存按钮必须在数据库保存在表中。

HTML文件: -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>RDCS</title> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="js/ang.js"></script> 
</head> 
<body> 

<div align=center ng-app="myApp" ng-controller="myCtrl"> 
<h1>Student Record</h1> 

<form> 
Name: <input type="text" name="Name" ng-model="Name"><br><br> 
Class: <input type="text" name="Class" ng-model="Class"><br><br> 
Roll No:<input type="text" name="RollNo" ng-model="RollNo"><br><br> 
<input type="submit" value="Save" ng-click="submit()"> 
</form> 


</div> 

</body> 
</html> 

.js文件: -

var app = angular.module('myApp', []); 


app.controller('myCtrl', function($scope) { 

    $scope.submit = function() { 

    }; 


}); 

我想知道所有的修改都作出这样一旦我拨打电话使用DAO类中的所有将要在HTML页面中输入的数据可以保存在数据库中。

+0

集成它检查了这一点http://jsfiddle.net/mjaric/pj5br/ –

回答

1

它涉及几个步骤

  1. submit你需要从NG-模型
  2. 使用$ HTTP服务,使Ajax调用获得的价值。检查promise & $q
  3. 您在$http中传递的网址将为弹簧控制器图层中@RequestMapping的值。

例如

$http({ 
    method: 'GET', 
    url: '/someUrl' 
}).then(function successCallback(response) { 
    // this callback will be called asynchronously 
    // when the response is available 
    }, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    }); 

在春季控制器层

@RequestMapping(value = "someUrl") 
//some Method 

春季使用dependency injection所以在控制器,你可以在注射服务layer.Service层依赖基本上包含应用程序逻辑。

再次在服务层,您可以注入对DAO层的依赖。

为了达到你的目标,你必须在开始两个angularjs & spring-mvc

最好的方法想法是通过寻找这在数据库保存数据的任何Spring项目。 然后您可以修改UI并尝试将其与angularjs

相关问题