保存爲使用Angularjs和Nodejs的HTML表單中的JSON文件

Question

我有點卡住了，請幫助我。我試圖從HTML表單保存爲JSON文件。我沒有得到如何將數據從angularjs控制器移動到nodejs。如果我從控制器發送數據到Nodejs，我可以使用fs.write方法將表單數據保存爲json。我在這裏粘貼代碼。 我的HTML表單文件，

<div ng-controller="Ctrl" class="row"> 
      <form> 
       <p> 
        <label for="Name"> Name :</label> 
        <input id="Name" type="text" name="Name" ng-model="store.name"/><br /><br /> 
       </p> 
       <p> 
        <label for="age"> Age :</label> 
        <input id="age" type="text" name="age" ng-model="store.age"/><br /><br /> 
       </p><p> 
        <label for="sex"> Sex :</label> 
        <input id="sex" type="text" name="sex" ng-model="store.sex"/><br /><br /> 
       </p> 
      <textarea>{{store | json}}</textarea><br /> 
      <input type="submit" class="btn btn-primary" ng-click="send()"> 

這裏是我的app.js文件

var app = angular.module('app',['ui.router','ui.bootstrap','ngAnimate']) 
.controller('Ctrl',function($scope,$http){  
     $scope.data = {} 
     $scope.response = {} 

    $scope.send = function(){ 

     var receiveddata = $scope.store; 

     console.log(JSON.stringify(receiveddata));}) 

我能夠完全打印（receiveddata）成功在控制檯上。並且輸出顯示正常。

這裏是我的server.js文件。

var express = require("express"); 
var http = require('http'); 
var path = require('path'); 
var bodyParser = require('body-parser'); 
var fs = require('fs'); 
var formidable = require("formidable"); 
var util = require('util'); 

var app = express(); 
app.set('views', __dirname + '/views'); 
app.set('view engine' , 'ejs'); 

app.use(bodyParser.urlencoded()); 

app.use(express.static(path.join(__dirname,'public'))); 

app.get('/',function(req,res){ 
res.render('index',{ title: 'StoreAsJson' }); 
}); 
var server = app.listen(8000,function(){ 
var port = server.address().port; 
console.log("server is listening on port %s",port); 
}); 

任何人都可以幫助我解決這個問題。我已經從this鏈接寫入JSON文件代碼。我

Answer 1

我會盡量展示一個使用MEAN堆棧的例子。

App.js：

(function(){ 
    'use strict'; 
    angular.module('app', [ 'ui.router','ui.bootstrap','ngAnimate' ]); 
})(); 

Controller.js：

angular 
    .module('app') 
    .controller('Ctrl', Ctrl); 

function Ctrl($scope, $http) { 

    $scope.send = function(){ 
     //Saving data into a single var -> JSON format 
     var userData = { 
         name : store.name, 
         age : store.age, 
         sex : store.sex 
     }; 

    // Calls Back-end api to save the new user 
    $http.post('/users', userData) 
     .success(function(data) { 
      console.log('Successfully posted '+ data); 
     }) 
     .error(function(data) { 
      console.log('Error while posting: ' + data); 
     }); 

    } 
} 

server.js：

// Dependencies 
var express   = require('express'); 
var mongoose  = require('mongoose'); 
var port   = process.env.PORT || xxxx; 
var bodyParser  = require('body-parser'); 
var app    = express(); 

// Sets the connection to MongoDB 
mongoose.connect("mongodb://localhost/UserApp"); 

. . . . . . 

// Routes 
require('./app/routes.js')(app); 

. . . . . . 

Routes.js：

這裏我使用Mongoose和MongoDB來存儲數據。發佈到/users。如果您轉到localhost:xxxx/users，您應該能夠使用方法查看您的所有用戶。

/** Requiring Factories **/ 
var UserFactory = require('./factories/user.factory.js'); 

// Opens App Routes 
module.exports = function(app) { 

    /** Posting a new user**/ 
    app.post('/users', function(req, res) { 
     //Calling postUser method from factory 
     UserFactory.postUser(req).then(function (user) { 
      console.log('Successfully posted '+ JSON.stringify(user)); 
      res.json(user); 
     }); 
    }); 

    /** Getting all the Users**/ 
    app.get('/users', function(req, res) { 
     UserFactory.getUsers().then(function (users) { 
      return res.json(users); 
     }, function (error) { 
      res.json(error); 
     }); 
    }); 

} 

user.factory.js：

//Requiring Mongoose user schema 
var Users = require('../models/user-model.js'); 

//Exposing getUsers and postUser to external calls 
exports.getUsers = getUsers; 
exports.postUser = postUser; 

/** Gets all the users stored in the DB **/ 
function getUsers() { 
    return new Promise(function (resolve, reject) { 
     //Opens Mongoose Query 
     var query = Users.find({}); 
     query.exec(function(err, users) { 
      if (err){ 
       return reject(err); 
      } 
      // If no errors are found, it responds with a JSON of all users 
      return resolve(users); 
     }); 
    }, function (error){ 
     return reject(error); 
    }); 
} 

/** Posting a new users**/ 
function postUser(req) { 
    return new Promise(function (resolve, reject) { 
     // Creates a new user based on the Mongoose schema and the post body 
     var newUser = new Users(req.body); 
     // New Points is saved in the db. 
     newUser.save(function(err) { 
      if (err){ 
       reject(err); 
      } 
      // If no errors are found, it responds with a JSON of the new user 
      resolve(req.body); 
     }); 
    }, function (error){ 
     return reject(error); 
    }); 
} 

用戶model.js：

//Pulls Mongoose dependency for creating schemas 
var mongoose = require('mongoose'); 
var Schema = mongoose.Schema; 

// Creates a User Schema, it will automatically set an _id to a user 
var users= new Schema({ 
         name : {type : String}, 
         age : Number, 
         sex : {type : String} 
}); 

//Saves schema to DB 
module.exports = mongoose.model('users', users); 

如果你看一看如何MongoDB和Mongoose你應該工作讓它容易。

你問了一個非常寬泛的問題，所以這不是一個確切的答案。

PLUS

• 避免使用的名稱，如Ctrl
• 使用this

HTML：

send() -> myCtrl.send() 
store -> myCtrl.store.name, myCtrl.store.age, myCtrl.store.sex 

控制器：

angular 
.module('app') 
.controller('myCtrl', myCtrl); 

    function myCtrl($http) { 

     var vm = this; 

     vm.send = function(){ 
      //Saving data into a single var -> JSON format 
      var userData = { 
          name : vm.store.name, 
          age : vm.store.age, 
          sex : vm.store.sex 
      }; 

     // Calls Back-end api to save the new user 
     $http.post('/users', userData) 
      .success(function(data) { 
       console.log('Successfully posted '+ data); 
      }) 
      .error(function(data) { 
       console.log('Error while posting: ' + data); 
      }); 
     } 
    } 

我希望我已經幫助。