CODEWITHSUNDEEP
javascriptjavaangularjsspringspring-mvc
Sidharth Khera
Sidharth Khera

Reputation: 1

How to save data in the database using Angular JS?

I am new to Angular JS and trying to create a simple application for storing the student records using Spring Tool.

The student records are :-

1.Name 2.Roll No 3.Class

Once I click on Save button in HTML page data must be saved in the table in Database.

HTML File :-

<!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 File :-

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


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

    $scope.submit = function() {

    };


});

I want to know what all modification are to be made so that once I make a call using DAO class all the data that will be entered in the HTML page can be saved in the database.

Upvotes: 0

Views: 2099

Answers (1)

brk
brk

Reputation: 50291

It involves few steps

  1. On submit you need to get the value from ng-model
  2. Use $http service to make an ajax call. Check promise & $q
  3. The url you pass in the $http will be the value of @RequestMapping in spring controller layer.

For example

$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.
  });

At Spring controller layer

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

Spring use dependency injection So in controller you can inject dependency on service layer.Service layer basically contains application logic.

Again in service layer you can inject dependency on DAO layer.

In order to accomplish your objective you have idea on both angularjs & spring-mvc

Best way to start is by finding any spring project which saves data in db. Then you can modify the UI and try to integrated it with angularjs

Upvotes: 1

Related Questions