2015-06-29 16 views
9

AngularJS'yi öğreniyorum ve ExpressJS ile Node ile doğru kabloyu nasıl bağlayacağımı bilmek istiyorum.ExpressJS AngularJS POST

Bu benim denetleyicisi geçerli:

app.controller('view1Ctrl', function($scope, $http) { 

    $scope.sub = function(desc) { 
     console.log(desc); 
     $http.post('/view1', desc). 
     then(function(response) { 
      console.log("posted successfully"); 
     }).catch(function(response) { 
      console.error("error in posting"); 
     }) 
    } 
}); 

Ve bu benim server.js geçerli:

app.post('/view1', function(req, res) { 
    console.log(res.desc); 
    res.end(); 
}); 

ben kullanmadıysanız vücut ayrıştırıcı. Denetleyicide bir işlev kullandığımda form ayrıştırıcısını html'den almak için gövde ayrıştırıcısının nasıl kullanıldığını anlamıyorum. Değerler, body-parser kullanılırken submit tıklatıldığında html'den alınıyor mu yoksa değerlerin argüman olarak form değerlerini geçirdiğim işlevden alınıyor mu? Lütfen bana nasıl yapıldığını söyle. DÜZENLEME

:

<form> 
     <input type="text" ng-model="desc" placeholder="Enter desc" /> 
     <button class="btn btn-primary" ng-click="sub(desc)">Submit</button> 
</form> 

DÜZENLEME 2: tam server.js kodu:

var express = require('express'), 
    http = require('http'), 
    path = require('path'), 
    bodyParser= require('body-parser'); 

var app = express(); 

app.set('port', 3000); 

app.use(express.static(path.normalize(__dirname + '/'))); 
app.use(bodyParser.json()); // for parsing application/json 
app.use(bodyParser.urlencoded({ extended: true })); // for parsing  application/x-www-form-urlencoded 

app.get('/main', function(req, res) { 
    var name = 'MyNameFromServer'; 
    res.send(name); 
}); 

app.post('/view1', function(req, res) { 
    console.log(res.body.desc); 
    res.end(); 
}); 

http.createServer(app).listen(app.get('port'), function() { 
    console.log('Express server listening on port ' + app.get('port')); 
}); 

DÜZENLEME 3: Düzenlendi Kontrolör app.js bu benim html

app.controller('view1Ctrl', function($scope, $http) {  
    $scope.sub = function() { 
     console.log($scope.formData); 
     $http.post('/view1', $scope.formData). 
     success(function(data) { 
      console.log("posted successfully"); 
     }).error(function(data) { 
      console.error("error in posting"); 
     }) 
    }; 
}); 

cevap

26

Node.js (Express) için vücut ayrıştırıcı modülü, form defterinizdeki her veriyi req.body adlı tek bir nesneye alabilir, böylece form verilerinizi tanımlamak için $scope nesnesine sahipseniz,

Açısal: req.body kopyalanmış aynı özellikleri

app.controller('view1Ctrl', function($scope, $http) { 
    $scope.sub = function() { 
     $http.post('/view1',$scope.formData). 
     then(function(response) { 
      console.log("posted successfully"); 
     }).catch(function(response) { 
      console.error("error in posting"); 
     }) 
    } 
}); 

HTML: Eğeraracılığıyla gönderebilirsiniz Şimdi

<form> 
     <input type="text" ng-model="formData.desc" placeholder="Enter desc" /> 
     <input type="text" ng-model="formData.title" placeholder="Enter title" /> 
     <button type="submit" class="btn btn-primary" ng-click="sub()">Submit</button> 
</form> 

10 Örneğin, aynı nesneyi alacak:

app.post('/view1', function(req, res) { 
    console.log(req.body.desc); 
    res.end(); 
}); 

yerine bir Gönder düğmesini ng tıklayın sahip, ayrıca böyle form elemanının ng-submit kullanabilirsiniz: ait

<form ng-submit="sub()"> 
+0

Düğmeye ng tıklama hakkında ne düşünüyorsunuz? Bir kez daha soyu geçmeli mi yoksa bir şeyleri iletmekle mi çağırmalıyım? – v1shnu

+0

İhtiyacınız yok, $ kapsamına sahipsin cevabı güncelliyorum. İşte tanımsız malı 'desc' okuyamıyor .. –

+0

, bu TypeError diyor .! Bu un undefined olduğunu söylüyor. – v1shnu

7

Birinci Tüm küresel değişken req ve res'un farkında olmanız gerekir. req.body, req.body isteğine ulaştığınızda http ve body-parser numaralı ham içeriği, istek sonrası işlenmemiş içeriği ayıklar.

app.post('/view1', function(req, res) { 
console.log(req.body.desc); 
res.end(); 
}); 

kullanmadan önce

var bodyParser = require('body-parser'); 

dahildir ve

http://expressjs.com/4x

bakınız

app.use(bodyParser.json()); // for parsing application/json 
app.use(bodyParser.urlencoded({ extended: true })); // for parsing  application/x-www-form-urlencoded 

daha req ve res, middleware yaklaşık olarak orta katman içermelidir

+0

Yani benim htmlimde, desc değişkenini geçirmeme gerek yok mu? sadece alt() çağırmalı mıyım? – v1shnu

+0

tabiki açısal iki yönlü veri bağlama sizin için yapar. ng-model = 'desc' öğesini tanımladığınızda, denetleyicinizde $ scope.desc ile kullanabilirsiniz. –

+0

Düğmenin ng tıklama hakkında soru soruyorum .. – v1shnu