sfrj sfrj - 6 months ago 11
Javascript Question

How to create a data transfer object in angular and send it to the back end?

I am totally new to angularJs(I am actually a pure backend dev :( ).
I watched a couple of youtube videos and I am trying to create a very simple ui that uses angular to talk to my Spring mvc app in the back end.

I am facing a problem, I have no clue how to send a javascript object to my backend using $ Can somebody help me?
Actually, is not just that, also im a bit crap at html, and I am not sure how to
trigger the angularjs when clicking on of the div.

I show you what I have so far in what regards angular...

This is my view

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/css/design.css"/>
<script src=""></script>
<script src="resources/javascript/tictactoe.js"></script>
<body ng-controller="displayPageController">
<div id="player-1">PLAYER 1<br/>
<div id="game">

<div id="top-left" ng-click='playPage()'>{{Board.topleft}}</div>
<div id="top" ng-click='playPage()'>{{}}</div>
<div id="top-right" ng-click='playPage()'>{{Board.topright}}</div>
<div id="left" ng-click='playPage()'>{{Board.left}}</div>
<div id="middle" ng-click='playPage()'>{{Board.middle}}</div>
<div id="right" ng-click='playPage()'>{{Board.right}}</div>
<div id="bottom-left" ng-click='playPage()'>{{Board.bottomleft}}</div>
<div id="bottom" ng-click='playPage()'>{{Board.bottom}}</div>
<div id="bottom-right" ng-click='playPage()'>{{Board.bottomright}}</div>
<div id="player-2">PLAYER 2<br/>

This is my javascript

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

var gameBoardDto = {

myApp.controller('displayPageController', function($scope,$http) {

$scope.Board = {};

$scope.Board.player1 = gameBoardDto.player1;
$scope.Board.player2 = gameBoardDto.player2;
$scope.Board.topleft = gameBoardDto.topleft;
$ =;
$scope.Board.topright = gameBoardDto.topright;
$scope.Board.left = gameBoardDto.left;
$scope.Board.middle = gameBoardDto.middle;
$scope.Board.right = gameBoardDto.right;
$scope.Board.bottomleft = gameBoardDto.bottomleft;
$scope.Board.bottom = gameBoardDto.bottom;
$scope.Board.bottomright = gameBoardDto.bottomright;

$scope.playPage = function() {
method: 'POST',
url: 'http://localhost:8080/play',
data: $scope.Board,
headers: {'Content-Type': 'application/json;charset=UTF-8'}
}).success(function(gameBoardDto) {
$scope.gameBoardDto = gameBoardDto;

I think I managed to trigger thefunction using the above code, now I am getting an error 400. I think now I need to have a look at the server side.

enter image description here


Your use of $http post method is fine (except that the first time you are initializing $scope.gameBoardDto object is in the success handler of your http post function).

However, there are other issues.

  1. In your $http you are binding "gameBoardDto" object as the data of your request. This is probably not what you wanted to do. If you want to send some data usually the best way to go is to use forms ( more on forms here ) to collect and wrap the data you wanted to pass to backend. You use the form to group a bunch of different controls, such as text boxes and checkboxes and etc., and then to also group the data in those controls into one javascript object that you can pass to your ajax request. What you are passing now is just the javascript object you create once and are never able to change.
  2. You have two controllers, both of which are registered with your myApp module, which is fine, except that one of them is never called or used. The displayPageController is bound to the page on load, whereas I imagine the playPageController was supposed to be a method you wanted to call when you click some controls on the page. If that is the case, you should create a method on the scope of your displayPageController and then call it in the onclick event of your controls.

    app.controller('someController', ['$scope', function($scope) {
        $scope.theOnClickFunction = function() {
           // your logic here

    Then, in your html, you would call the "theOnClickFunction" like this:

    <a ng-click="theOnClickFunction()">Play</a>

    Another thing is, you probably don't want to bind all of your variables directly to the $scope. You should group them somehow, like in a Board object, which you bind to the $scope once it's ready.

I prepared a small codepen with these advice so you can take a look. There might be some other issues with your code as well, but these seem to be good starting points to me.

EDIT: the $scope method should be called like this:

<div id="someDiv" ng-click="playPage()">{{ Board.topLeft }}</div>