2016-05-19 162 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

相關問題