How to send data from angularjs controller to server(nodejs) controller in meanjs

Question

Am trying to send my data from angular form to the server controller where I use those data to modify my json file, it seems in meanjs they use ngResource to communicate backend and FrontEnd data but I failed to comprehend how it works Below are the parts of my code which I judged may help to explain my problem.

machine.client.view.html

 <section data-ng-controller='MachineController'> <form class='form-horizontal' data-ng-submit='create()' novalidate> <fieldset> <div class="form-group"> <label class="control-label" for="projectName">Name of the project</label> <div class="controls"> <input type="text" class="form-control" id="projectName" data-ng-model="projectName" placeholder="my_first_project"> </div> <div class="form-group"> <input type="submit" class="btn btn-primary"></input> </div> </fieldset> </form> </section> 

machine.client.routes.js

 (function() { 'use strict'; //Setting up route angular .module('machine') .config(routeConfig); routeConfig.$inject = ['$stateProvider']; function routeConfig($stateProvider) { // Machine state routing $stateProvider .state('machine', { url: '/machine', templateUrl: 'modules/machine/client/views/machine.client.view.html', controller: 'MachineController', controllerAs: 'vm' }); } })(); 

machine.client.controller.js

 (function() { 'use strict'; angular .module('machine') .controller('MachineController', MachineController); MachineController.$inject = ['$scope']; function MachineController($scope) { var vm = this; // Machine controller logic $scope.create = function() { console.log("Testing the functionalites"); console.log(this.projectName); }; init(); function init() {} } })(); 

machine.server.controller.js

 'use strict'; /** * Module dependencies. */ require('require-xml'); var path = require('path'), mongoose = require('mongoose'), initialJsonFile = require('../resources/config.json'), finalJsonFile = './modules/machine/server/config/config1.json', updatedJson = require('../config/config1.json'), js2xmlparser = require('js2xmlparser'), jsonfile = require('jsonfile'), errorHandler = require(path.resolve('./modules/core/server/controllers/errors.server.controller')), _ = require('lodash'); /** * Converting xml to json */ exports.updatingJsonConfig = function(req, res) { //I do need here to get data from angular form the string 'testing description' it was only used to test the modifications initialJsonFile.project.projectName = 'testing description'; }; 

machine.server.routes.js

 'use strict'; var machine = require('../controllers/machine.server.controller'); module.exports = function(app) { app.route('/testing').get(machine.updatingJsonConfig); }; 

NB : I used one input in the form to only explain the problem,but it is a form of multiple fields

Answer 1

In the MEAN stack you use Express on the server side (Node) to set up a HTTP server, and your Angular front-end application communicates with the server through the HTTP protocol. It's not included in your posted code, but I assume there is a http server set up in your server side code. something like

var server = http.createServer(app);
server.listen(8080);

On your local computer, you will be able to access the http server set up like this on localhost:8080.

app.route('/testing').get(machine.updatingJsonConfig)

This line defines a route handler, in this context it means "when you hit localhost:8080/testing with a HTTP GET REQUEST execute machine.updatingJsonConfig.

updatingJsonConfig is an express middleware function, that has access to the req and res objects. If you want to respond to the HTTP request you need to call res.send() at the end of your updatingJsonConfig function with whatever response you want to send as an argument.

Then on the client side you need to make a http request to your server and process the response. The simplest way of doing this is using the $http service like:

$http.get('/localhost:8080/testing')
.then(function(response) {
 // do something with the response
});

ngResource makes the same HTTP request, you don't really need it here.

So res.send() on the server, $http.get in the client.

EDIT:

In order to send form data through HTTP you need to make a POST request with $http.post instead of $http.get. GET requests don't have a body.

On the server side you need to change your route to handle POST requests

app.route('/testing').post(machine.updatingJsonConfig)

You'll also need to include the body-parser module in express, and you'll have a req.body available.

Answer 2

Finally after @marton answer I came up with a solution which respects meanjs framework,the connection between front end controller(angular controller) and backend controller(express controller/node ) is made by the help of angular service. To clarify my answer, when a user clicks submit button on a machine.client.view.html, a create function will be called which is defined in a machine.client.controller.js (see new client.controller.js below) but to send the data we will have to create an object with the data from the view(object created here is confInput) and we will pass this object to the service function createConfig which will post our data to our server controller with the help of angular service which uses resource object which wraps http request post. finally the most important thing is to modify our server route so that it can support post request( app.route('/testing').post(machine.updatingJsonConfig);

after this we can acces our data in our server controller by req.body.

machine.client.service.js

 (function () { 'use strict'; angular .module('machine') .factory('machineService', machineService); machineService.$inject = ['$resource']; function liferayService($resource) { var resource; resource = $resource('/testing',null,{ createConfig : { method:'POST' } }); // Public API return resource; } })(); 

machine.client.controller.js

 (function() { 'use strict'; angular .module('machine') .controller('machineController', machineController); MachineController.$inject = ['$scope','machineService']; function MachineController($scope,machineService) { var vm = this; //machine controller logic $scope.create = function () { // Creation of the object which contains user configurations input var confInput = {}; confInput.nomProjet = this.nomProjet; machineService.createConfig(confInput,function (resource, headers) { //this function is executed when the post is succesful },function (response) { //this function is executed when the post returns an error console.error(response); }); }; init(); function init() { } } })();