如何從angularjs/express應用中的表單獲取數據

Question

嗨，大家好我可以知道如何從angularjs/express應用中的表單獲取數據嗎？ 例如

index.js路線

app.post('/register', sessionHandler.handleSignup); 

handleSignup功能
有沒有什麼辦法來獲取數據，而無需使用req.body？因爲angularjs阻止我提交表單，所以我不得不想另一種方式來獲取數據。

this.handleSignup = function(req, res, next) { 
     "use strict"; 

     var email = req.body.email, 
     confirmEmail = req.body.confirmEmail, 
     password = req.body.password, 
     confirmPassword = req.body.confirmPassword, 
     firstName = req.body.firstName, 
     lastName = req.body.lastName, 
     penName = req.body.penName, 
     publicUsername = req.body.publicUsername; 

     // set these up in case we have an error case 
     var errors = {'email': email,'publicUsername': publicUsername,'firstName': firstName,'lastName': lastName,'penName': penName}; 
     if (validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors)) { 
      users.addUser(email, password, firstName, lastName, penName, publicUsername, function(err, user) { 
       "use strict"; 

       if (err) { 
        // this was a duplicate 
        if (err.code == '11000') { 
         errors['email_error'] = "Email already in use. Please choose another"; 
         return res.render("register", errors); 
        } 
        // this was a different error 
        else { 
         return next(err); 
        } 
       } 

       sessions.startSession(user['_id'], function(err, session_id) { 
        "use strict"; 

        if (err) return next(err); 

        res.cookie('session', session_id); 
        return res.redirect('/'); 
       }); 
      }); 
     } else { 
      console.log("user did not validate"); 
      return res.render("register", errors); 
     } 
    } 

控制器（有沒有什麼辦法讓頁面入住，如果有錯誤？如果沒有錯誤，則重定向在同一頁爲「/」）

function RegisterCtrl($scope, $http, $location) { 
    $scope.form = {}; 
    $scope.submitPost = function() { 
    $http.post('/register', $scope.form). 
     success(function(data) { 
     $location.path('/'); 
     }); 
    }; 
} 

我的表格

<div class="pure-u-1 text-center"> 
    <form method="post" class="pure-form pure-form-aligned"> 
    <fieldset> 
     <legend><h1 class="pure-splash-subhead midnightblue"><span class='lightblue'>Join</span> us today and start write things that <span class='maroon'>matter</span></h1> 
     </legend> 
     <p class="text-center red">{{email_error}}</p> 
     <div class="pure-control-group"> 
     <label for="email">Email Address</label> 
     <input required name="email" ng-model="form.email" class="pure-u-1-3" type="email" placeholder="Email Address"> 
     </div> 
     <div class="pure-control-group"> 
     <p class="text-center red">{{confirmEmail_error}}</p> 
     <label for="confirmEmail">Confirm Email Address</label> 
     <input required name="confirmEmail" ng-model="form.confirmEmail" class="pure-u-1-3" type="email" placeholder="Confirm Email Address"> 
     </div> 
     <div class="pure-control-group"> 
     <p class="text-center red">{{password_error}}</p> 
     <label for="password">Password</label> 
     <input required name="password" ng-model="form.password" class="pure-u-1-3" type="password" placeholder="Password"> 
     </div> 
     <div class="pure-control-group"> 
     <p class="text-center red">{{confirmPassword_error}}</p> 
     <label for="confirmPassword">Confirm Password</label> 
     <input required name="confirmPassword" ng-model="form.confirmPassword" class="pure-u-1-3" type="password" placeholder="Confirm Password"> 
     </div> 
     <br/><br/> 
     <div class="pure-control-group"> 
     <label for="firstName">First Name</label> 
     <input required name="firstName" class="pure-u-1-3" ng-model="form.firstName" type="text" placeholder="Your first name"> 
     </div> 
     <div class="pure-control-group"> 
     <label for="lastName">Last Name</label> 
     <input required name="lastName" class="pure-u-1-3" ng-model="form.lastName" type="text" placeholder="and your last name"> 
     </div> 
     <div class="pure-control-group"> 
     <label for="penName"><abbr title="A pen name">Nom de plume</abbr></label> 
     <input required name="penName" ng-model="form.penName" class="pure-u-1-3" type="text" placeholder="Pen Name eg:J.R.R. Tolkien"> 
     </div> 
     <div class="pure-control-group"> 
     <label for="publicUsername">Public Username</label> 
     <input required name="publicUsername" class="pure-u-1-3" type="text" ng-model="form.publicUsername" placeholder="Username eg:gandalf"> 
     <p class="pure-splash-subhead">https://www.HoneyBooBoo.com/@<b class="maroon">{{form.publicUsername}}</b></p> 
     <p class="text-center red">{{publicUsername_error}}</p> 
     </div> 
     <div class="pure-u-1 "> 
     <label for="conAndTerm" class="pure-checkbox"> 
      <input id="conAndTerm" type="checkbox"> I've read the <a class='link blue'href="#">terms and conditions</a> 
     </label> 
     <br/> 
     <input type='submit' ng-click="submitPost()" class="pure-button pure-button-secondary pure-u-1-3" value="Register"> 
     <br/> 
     </div> 
    </fieldset> 
    </form> 
</div> 

Answer 1

看來你已經將Angular的單頁面應用程序（SPA）概念與傳統的基於服務器的模型混淆了。使用SPA時，服務器不會執行任何重定向或提供HTML。您的服務器發送JSON，然後Angular呈現客戶端的所有頁面。

它很可能是請求對象沒有正確傳遞到您的服務器端註冊函數，這就是爲什麼你不能訪問req.body。你的Angular代碼看起來是正確的。

我將給你一些我自己的項目中的代碼，它完全符合你的要求。

您index.js內部路線

var signup = require('./routes/signup'); 
app.post('/signup', function(req, res) { 
    signup(req, res); 
}); 

路線/ signup.js

module.exports = function (req, res) { 
    validateSignup(req.body, function(error, data) { 
    if(error) { 
     res.send(400, error.message); 
    } else { 
     res.send(JSON.stringify(data)); 
    } 
    }) 
} 

function validateSignup(data, callback) { 
    // All your validation logic goes here 
    if(success) callback(null, newuser); 
    else callback(new Error('Registration failed!'), null); 
} 

你的HTML文件中的公共目錄

<!DOCTYPE html> 
<html lang="en" ng-app="app"> 
    <head> 
    <title>Sample Registration Page</title> 
    <link href="styles/bootstrap.css" rel="stylesheet"> 
    <link href="styles/signin.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="container" ng-controller="SignupCtrl"> 
     <div class="alert alert-danger" ng-if="errorMessage">{{errorMessage}}</div> 
     <form class="form-signin"> 
     <h2 class="form-signin-heading">Register</h2> 
     <input type="text" class="form-control" name="username" placeholder="Username" ng-model="User.username" required autofocus> 
     <input type="password" class="form-control" name="password" placeholder="Password" ng-model="User.password" required> 
     <button class="btn btn-lg btn-primary btn-block" ng-click="register()">Register</button> 
     </form> 
    </div> <!-- /container --> 
    <script type="application/javascript" src="lib/angular/angular.min.js"></script> 
    <script type="application/javascript" src="scripts/controllers/register.js"></script> 
    </body> 
</html> 

最後註冊。JS

angular.module('app', []) 
.controller('SignupCtrl', function ($scope, $http, $location) { 

    $scope.User = {}; 
    $scope.errorMessage = ''; 

    $scope.register = function() { 
    $http.post('/signup', $scope.User). 
    success(function(data) { 
     $location.path('/'); 
    }).error(function(err) { 
     $scope.errorMessage = err; 
    }); 
    } 
}); 

我測試過它，只要你在服務器端的所有註冊邏輯正確填寫，它應該爲你工作也。注意：要使重定向正常工作，您需要設置Angular路由並創建一個頁面以重定向到。

Answer 2

您需要在您的應用程序定義ng-app。然後處理數據使用ng-model。

你的模板輸入字段應該有數據模型來處理數據。

就像在你的角度控制器，你可以使用裏面的數據ng-model="form.email"與$scope.form.email

，那麼你可以發送到你的應用程序的NodeJS與HTTP請求或其他類似的WebSockets電子郵件

<input required name="email" class="pure-u-1-3" type="email" placeholder="Email Address" ng-model="form.email"> 

Answer 3

。