通過angularjs形式顯示並創建貓鼬模式？

Question

使用下面的代碼，我能夠創建使用通過終端的規則：

curl -i -X POST -H 'Content-Type: applcation/json' -d '{"name": "ITS ABOUT TIME!", "desc":"another is a db test working well!", "color":"02"}' http://localhost:5000/rules 

，並顯示通過{{ruler.name}}和{{ruler.desc}}

...但我不知道如何將此應用於表單。我模糊地看着這個，所以任何方向和幫助將不勝感激。

所有這一切的問題是：如何通過角度形式創建規則。

形式前端：

<form action="/rules" method="post"> 
    <input type="text" placeholder="Name of the new Rule"ng-model="ruler.name"/> 
    <input type="text" placeholder="small description of this rule" ng-model="ruler.desc"/> 
    <button type="submit" class="btnCreate" ng-click="creatRule()">CREATE</button> 
</form> 

模型：

var mongoose = require('mongoose'); 
var Schema = mongoose.Schema; 

var RuleSchema = new Schema({ 
    name: {type: String, required: true}, 
    desc: {type: String}, 
    color: {type: String} 
}); 

var RuleModel = mongoose.model('Rule', RuleSchema); 
exports.index = function (req, res){ 
    return RuleModel.find(function (err, rules) { 
     if (!err) { 
      res.jsonp(rules); 
     } else { 
      console.log(err); 
     } 
    }); 
} 

exports.findById = function (req, res) { 
    return RuleModel.findById(req.params.id, function (err, rule) { 
     if (!err) { 
      res.jsonp(rule); 
     } else { 
      console.log(err); 
     } 
    }); 
} 

exports.addRule = function (req, res) { 
    var rule; 
    rule = new RuleModel({ 
     name: req.body.name, 
     desc: req.body.desc, 
     color: req.body.color 
    }); 
    rule.save(function (err) { 
     if (!err) { 
      console.log("created"); 
     } else { 
      console.log(err); 
     } 
    }); 

    return res.send(rule); 
} 

exports.updateRule = function (req, res) { 
    return RuleModel.findById(req.params.id, function (err, rule) { 
     rule.name = req.body.name; 
     rule.phone = req.body.desc; 
     rule.color = req.body.color; 
     rule.save(function (err) { 
      if (!err) { 
       console.log("updated"); 
      } else { 
       console.log(err); 
      } 
      res.send(rule); 
     }); 
    }); 
} 

exports.deleteRule = function (req, res) { 
    return RuleModel.findById(req.params.id, function (err, rule) { 
     return rule.remove(function (err) { 
      if (!err) { 
       console.log("removed"); 
       return res.send(''); 
      } else { 
       console.log(err); 
      } 
     }); 
    }); 
} 

angularjs：

$scope.createRule = function() { 
     $http({method: 'jsonp', url: '/rules?callback=JSON_CALLBACK'}) 
      .success(function (data, status, headers, config) { 
       $scope.rulers = data; 
      }). 
      error(function (data, status, headers, config) { 
       console.log('error in rule creation'); 
      }); 
    } 

服務器：

var express = require('express'); 
var rules = require("./model/ruleModel"); 
var app  = express(); 

app.get("/", rules.index); 
app.get('/rules', rules.index); 
app.get('/rules/:id', rules.findById); 
app.post('/rules', rules.addRule); 
app.put('/rules/:id', rules.updateRule); 
app.delete('/rules/:id', rules.deleteRule); 

Answer 1

這可能是因爲您正在使用觸發GET請求到您的節點服務器的JSONP。根據您的配置，要使用標準的POST請求：

$scope.createRule = function() { 
    $http.post('/rules', $scope.ruler) 
     .success(function (data, status, headers, config) { 
      $scope.rulers = data; 
     }). 
     error(function (data, status, headers, config) { 
      console.log('error in rule creation'); 
     }); 
} 

$http是異步的，你不想來指定表單元素的任何動作或方法屬性：

<form> 
    <input type="text" placeholder="Name of the new Rule" ng-model="ruler.name"/> 
    <input type="text" placeholder="small description of this rule" ng-model="ruler.desc"/> 
    <button class="btnCreate" ng-click="createRule()">CREATE</button> 
</form> 

Answer 2

剛對於其他人誰可能會感興趣我最終使用：

$scope.createRule = function() { 
     Rules.create($scope.formData) 
      .success(function (data) { 
       $scope.formData = {}; 
       $scope.rules = data; 
      }); 
    }; 

，然後創建一個工廠，扎入路線：

.factory('Rules', function($http) { 
    return { 
     get : function() { 
      return $http.get('/api/rules'); 
     }, 
     create : function(ruleData) { 
      return $http.post('/api/rules', ruleData); 
     }, 
     delete : function(id) { 
      return $http.delete('/api/rules/' + id); 
     } 
    } 
});