Angularを使用してフォームデータを投稿する際のきれいな方法？

Question

角度のあるフォームデータを投稿するきれいな方法は何ですか？

私は、このフォームのセットアップ

<div id="contact-form" class="row"> 
    <div class="col-sm-4 col-sm-offset-4 text-center"> 
     <form> 
      <div class="form-group"> 
       <input type="text" class="form-control input-lg text-center" placeholder="Firstname" name="firstname" ng-model="firstname"> 
      </div> 

      <div class="form-group"> 
       <input type="text" class="form-control input-lg text-center" placeholder="Lastname" name="lastname" ng-model="lastname"> 
      </div> 

      <div class="form-group"> 
       <input type="email" class="form-control input-lg text-center" placeholder="Email" name="email"ng-model="email"> 
      </div> 
      <!-- Submit Contact --> 
      <button type="submit" class="btn btn-primary btn-lg" ng-click="createContact()">Add</button> 
     </form> 
    </div> 
</div> 

を持っていると私はNode.jsのバックエンドの "API" にこれを掲示しています。

これを正しく行うにはどうすればよいですか？すべてのAPIリクエストを1つのコアファイルに書きますか？ページごとに別々のファイルを作成しますか？

そして、どうすればきれいなリクエストを書くことができますか？

$scope.createContact = function() { 
    $http.post('/contacts', ...) 
     .success(function(data) { 

     }) 
     .error(function(data) { 

     }); 
}; 

私は新しい連絡先を追加するには、「ファーストネーム」と「電子メール」、「姓」を処理したいが、オンライン私はこれを書くための良い、きれいな方法を見つけることができません。

は、ここでそれが助け場合、私のモデルです：

var mongoose = require('mongoose'); 

var ContactSchema = new mongoose.Schema({ 
    firstname: { type: String, require: true }, 
    lastname: { type: String, require: true }, 
    email: { type: String, require: true } 
}); 

module.exportsは= mongoose.model（ 'コンタクト'、ContactSchema）。

---

最後に使用したコードは次のとおりです。

$scope.createContact = function(contact) { 

    $scope.contact = { firstname: $scope.firstname, lastname: $scope.lastname, email: $scope.email }; 

    $http.post('/contacts', $scope.contact) 
     .success(function(data) { 
      $scope.contact = {firstname:'',lastname: '', email:''}; // clear the form so our user is ready to enter another 
      $scope.contacts = data; 
      console.log(data); 
     }) 
     .error(function(data) { 
      console.log('Error: ' + data); 
     }); 
}; 

Answer 1

プロジェクトの構造はあなた次第です。あなたはそれをすべて1つのファイルで行うことができます（それはあまりスケーラビリティではありません）。各ファイルで1つを実行することができます（私はそれをお勧めしません）。またはそれらをuser_routes.js、social_media_routes.jsなどの意味ファイルにグループ化できます。

あなたは正しいトラックを使用しています$http.post()あなたはバインドされた変数を使用してJSONを作成したいと思うでしょう。コントローラー全体が含まれていないので、何をすべきかを伝えるのは難しいです。

$scope.contact = { 
    firstname: '', 
    lastname: '', 
    email: '', 
} 

をして、あなたのデータバインディングのためng-model="contact.firstname"のようなものを使用します。しかし、これを行うには良い方法はおそらく、このように空の値を持つJSONを作成します。これにより、単純に$ scope.contactをバックエンドルートに送信できます。 ExpressでPOSTリクエストを処理すると、どのバージョンに依存します - それはあなたが始めるのに十分でなければならない - これは、それが受け取るものを送り返します

var express = require('express'); 
var app = express(); 
app.post('/contacts', function (req, res) { 
    res.status(200).send(req) 
} 

：

Expressのバックエンドルートは次のようになります使用しているExpressの

Answer 2

フォームタグでは、ng-submit属性を追加して、post関数の角度で直接トリガーします。

<div id="contact-form" class="row"> 
<div class="col-sm-4 col-sm-offset-4 text-center"> 
    <form ng-submit="createContact(user)"> 
     <div class="form-group"> 
      <input type="text" class="form-control input-lg text-center" placeholder="Firstname" name="firstname" ng-model="user.firstname"> 
     </div> 

     <div class="form-group"> 
      <input type="text" class="form-control input-lg text-center" placeholder="Lastname" name="lastname" ng-model="user.lastname"> 
     </div> 

     <div class="form-group"> 
      <input type="email" class="form-control input-lg text-center" placeholder="Email" name="email"ng-model="user.email"> 
     </div> 
     <!-- Submit Contact --> 
     <button type="submit" class="btn btn-primary btn-lg">Add</button> 
    </form> 
</div> 

コントローラで空のユーザーオブジェクトを追加します。

$scope.user = {firstname:'',lastname: '', email:''}; 

は、$ HTTPサービスがコールを処理してみましょう：

$scope.createContact = function(user) { 
$http.post('/contacts', user) 
    .then(function(data) { 
     //in data.data is the result of the call 
    },function(error) { 
     //here is the error if your call dont succeed 
    });};