How can I send a variable from AngularJS to Java?

Hi everyone. Im using the angular tag since its the only one, I dont know if it includes AngularJS as well... I've been trying to send a variable inside of a JS Controller to my Java server using $http, but I cant get it to work: once I try it out, I cant enter the HTML view in which this JS code is used, so the problem is coming from the JS controller. Here's what I am doing and the code, based on trying to adapt these two resources:

https://docs.angularjs.org/api/ng/service/$http
http://hello-angularjs.appspot.com/angularjs-http-service-ajax-post-code-example

javascript
angular
.module('myApp')
.controller('MessageController', MessageController);

MessageController.$inject = ['$scope', '$stateParams', '$uibModalInstance', 'MessageTemplate', 'JhiLanguageService'];

onFormatChange.$inject = ['$resource', '$http', 'ServerURL']; // should it be vm.onFormatChange.$inject instead? 

function MessageController ($scope, $stateParams, $uibModalInstance, MessageTemplate, JhiLanguageService) {
    var vm = this;
    vm.isSaving = false;

    vm.text = 'Activated'; // this is the only variable
                           // im trying to send to Java

    function onSaveSuccess (result) {
        // a console.log
    }

    function onSaveError (error) {
        // a console.log
    }

    // this function gets called from the HTML via ng-change
    vm.onFormatChange = function () {
        vm.text = vm.status ? 'Deactivated' : 'Activated';

        // Sending vm.text (as "format") to the server 
        $http.post(ServerURL + 'api/format/', {
            format: vm.text // should it be format = vm.text?
            }. {withCredentials: true,
                headers: {
                    'Content-Type': 'application/json; charset=utf-8',
                    'Access-Control-Allow-Origin': true,
                    'X-Requested-With': 'XMLHttpRequest'
                }
        }).then(onSaveSuccess, onSaveError);
    }
}

Comments

[Michael De Abreu]

Just to give you proper context about searching a solution for this, it doesn't make any difference the language of the server. For AngularJS point of view, it will be only an API Restful.

headers in this case is not necessary.

You are "injecting" into onFormatChange, but that's a variable you are not declaring. Also, you can not inject in any variable, just controllers, components, services, and other functions declared in the AngularJS module function.

I'm guessing you have errors on vm.onFormatChange. That's because you don't have a reference for $http.

I guess you are new in to web development, maybe you have a Java background and want to learn, or are being forced to learn AngularJS. If it is the first case, I would recommend learning Angular directly. If the second, then learn AngularJS.

In any case, you should know some basics about JavaScript, HTML, and CSS. Udacity has a good series of video courses about that.

I can help you with this specific problem, and tell you how to solve it, probably. But you will find others like this on the road if you don't cover the basics. Good luck, and happy coding.

[thenewave]

Thanks, this is pretty helpful. I come from a Java background and have to work with AngularJS. I actually tried to code onFormatChange as a function instead of a variable before, with $resource, $http, and 'ServerURL' as arguments for it. Will try again now that its more clear.

[Sebastián Duque G]

Any particular reason of using AngularJS and not Angular?

[Moussa]

There are many, if you have a stable old project you never touched if there is small update.

[thenewave]

Its a web app from 2015 and the client is asking for new features, but doesnt want a new language