meanjsのサーバー（nodejs）コントローラーへのデータの送信方法

Question

角形からサーバーコントローラーにデータを送信しようとしています 私のjsonファイルを変更するためにこれらのデータを使用しています.njResource バックエンドとFrontEndデータを通信するが、動作の仕組みを理解できなかった 以下は私の問題の説明に役立つと判断したコードの一部です。

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：私は問題を説明するだけにフォームで1つの入力を使用し、それが複数のフィールド

の一形態であります

Answer 1

MEANスタックでは、サーバー側（ノード）でExpressを使用してHTTPサーバーを設定し、AngularフロントエンドアプリケーションはHTTPプロトコルを通じてサーバーと通信します。 投稿コードには含まれていませんが、サーバーサイドのコードにhttpサーバーが設定されていることが前提です。 8080：ローカルコンピュータ上

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

よう 何かが、あなたは、ローカルホスト上でこのように設定httpサーバにアクセスすることができます。

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

この行では、ローカルホスト打ったとき、それは」意味、この文脈では、ルートハンドラを定義します。HTTPのGETリクエストで8080 /テストがmachine.updatingJsonConfigを実行

updatingJsonConfigエクスプレスミドルウェア機能ですHTTPリクエストに応答するには、引数として送信する応答を使用して、updatesJsonConfig関数の最後にres.send（）を呼び出す必要があります。

クライアント側では、サーバーにhttp要求を行い、応答を処理する必要があります。これを行う最も簡単な方法は、$ HTTPサービスを使用しているように：ngResourceが同じHTTP要求を行う

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

、あなたが本当にここにそれを必要としません。

サーバーのres.send（）、クライアントの$ http.get。

EDIT：

HTTPを通じてフォームデータを送信するためには、あなたが$http.postの代わりに、$ http.getとPOSTリクエストを作成する必要があります。 GETリクエストには本文がありません。あなたはPOSTを処理するために、あなたのルートを変更する必要があり、サーバー側で

あなたはまた、急行でbody-parserモジュールを含める必要があります、そしてあなたが利用可能req.bodyを持っています

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

を要求します。

Answer 2

最後に、私はmeanjsフレームワークに関する解決策を思いつきました。フロントエンドコントローラ（コントローラ）とバックエンドコントローラ（エクスプレスコントローラ/ノード）の接続は、角度サービスの助けを借りて行われました。私の答えを明確にするために、ユーザーがmachine.client.view.htmlのsubmitボタンをクリックすると、 machine.client.controller.jsで定義されているcreate関数が呼び出されます（下記のnew client.controller.jsを参照）データを送信するには、ビューからのデータを持つオブジェクトを作成する必要があります（ここで作成されたオブジェクトはconfInputです）。このオブジェクトをサービス関数createConfigに渡します。 httpリクエストポストをラップするリソースオブジェクトを使用するサービス。 最後に、最も重要なことは、POSTリクエスト（app.route（ '/ testing'））をサポートできるようにサーバルートを変更することです。 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() { 
 
    } 
 
    } 
 
})();