2017-08-04 14 views
0

クライアント側の必要な角度コードをnodejs、MongoDBの中でHTMLのテキストボックスのデータを保存して、expressjsをangularjsを使用してブラウザに保存されたデータを表示するために

var myApp = angular.module('myApp',[]); 

myApp.controller('myAppController',['$scope', '$http',function($scope, $http, myAppService){ 

    $scope.people = []; 
    $scope.init = function(){ 
     $http.get('http://localhost:3000/person/name').then(function(result){ 
      $scope.people = result.data; 
     }); 
    } 
    $scope.init(); 

    $scope.save = function() { 
     $http.post('http://localhost:3000/add').then (function() { 
     var formData ={name: this.name, 
     surname: this.surname, 
     age: this.age}; 
      this.name = ''; 
      this.surname = ''; 
      this.age = ''; 

    var jdata = 'mydata='+JSON.stringify(formData); 

     }) 
    } 
    $scope.save(); 
}]); 

Sever side expressjs code、私は問題がここにあり、角度のjsコードで、factoryjsで作成された最初の文書を保存することができ、ブラウザに表示されますが、テキストボックスに入力したものは保存されず次のエラー:angular.js:11821 POST http://localhost:3000/add 500(内部S ERVERエラー)

var express = require('express'); 
//var cors = require('cors-anywhere'); 
var app = express(); 
var mongoose = require('mongoose'); 

var Schema = mongoose.Schema; 
var ObjId = Schema.ObjId; 

var Factory = require('./model/factory.js'); 

mongoose.connect('mongodb://localhost/helloworld'); 

var db = mongoose.connection; 

//adding control to make sure mongodb works fine 

db.on('error', function(){ 
    console.log("connection error"); 
}); 

db.once('open', function(){ 
    console.log("Mongo Working") 
}); 

var factory = new Factory(Schema, mongoose); 
factory.createSchema(); 
factory.insertPeople(); 


app.get('/ping',function(req,res){ 
    res.send('hello world this is from server!'); 
}); 

app.get('/:id', function(req, res){ 
    res.send('hello world this is from server '+req.params.id); 
}); 

app.post('/add', function (req, res){ 

    console.log(req.body); 
    console.log(req.body.mydata); 
    var jsonData = JSON.parse(req.body.mydata); 
    console.log(jsonData.name); 
    console.log(jsonData.surname); 
    console.log(jsonData.age); 

    db.helloworld.save({name: jsonData.name, surname: jsonData.surname, age: jsonData.age}, function(err, saved) { 
    if(err || !saved) res.end("User not saved"); 
    else res.end("User saved"); 
}); 
}); 

app.get('/person/name', function(req, res){ 

    var resp = factory.getPerson({name:'mani'}, res); 
}); 

app.use(express.static(__dirname + '/public')); 
app.use(function(req, res, next){ 
    res.header('Access-Control-Allow-Origin',"*"); 
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 
    next(); 

}); 

app.get('/', function(req, res){ 
    res.render('index'); 
}) 
app.listen(3000); 

console.log('listening to port 3000....'); 

マングースモデル - factory.jsを挿入するには、最初のものとそれに

var Factory = function(Schema, mongoose){ 

this.Schema = Schema; 
this.mongoose = mongoose; 

this.createSchema = function(){ 

    PersonSchema = new this.Schema({ 

     name: String, 
     surname: String, 
     age: Number 
    }); 

    this.Person = mongoose.model('Person', PersonSchema); 
} 
this.insertPeople = function(){ 

    var mani = new this.Person({ 
     name: 'mani', 
     surname: 'm*****', 
     age: 25 
    }); 

    mani.save(); 
} 
this.getPerson = function(query, res){ 

    this.Person.find(query, function(err, output){ 
     res.json(output); 
    }) 
} 

} 

module.exports = Factory; 
+1

ここでの問題の多くは実際にあります。最も顕著なのは 'db.helloworld.save()'がまったく有効でないことです。あなたはマングースを使用しています。つまり、ここでモデルを使用するべきです。また、 'Factory'モジュールは本当に無関係であるため、mongooseの使用パターンを理解していないようです。モンゴースモデルは、「グローバルに」接続されて登録され、「モンゴース」という既存のシングルトンインスタンスから取得できます。また、[body-parser](https://github.com/expressjs/body-parser)と呼ばれるちょっとしたことがあります。 –

+0

ええ、私は勉強の段階です...なぜあなたはコードを修正して動作させないのですか(私はデータを保存し、保存されたデータを両方のHTMLページで表示したいと思います)。工場のモジュールはapp.postとは関係ありません。最初の文書を保存して表示するための工場モジュールが作成されます。私がしたいのは、人の名前、姓、年齢を送信し、データベース内の保存された文書を1つのhtmlページに表示することです。 – mani

+0

これはあなたが実際にここで行うことができた場合にはうれしいでしょう。しかし残念なことに誰かにプログラム全体を投げて、*** "それを修正してください" ***と言っているのはStackOverflowの**トピック外の**近い理由です。私はあなたのプログラムを個々のタスクに分解し、問題の診断を開始することをお勧めします。 [独自のデバッグのための便利なプラクティスである[最小限で完全で検証可能なサンプルの作成方法](https://stackoverflow.com/help/mcve)と、必要のない質問の一般的な要件答える本。 –

答えて

0

を保存するためにあなたのHTML

<body ng-controller="myAppController"> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <h1>person details</h1> 
    </div> 

    </div> 
</nav> 
    <div> 
    <form name="myform" ng-submit = "save(per)"> 
    <label>Enter your details</label><br> 
    <input type ="text" name ="name" ng-model="per.name" placeholder="enter name.."> 
    <input type ="text" name="surname" ng-model="per.surname" placeholder ="enter surname..."><br> 
    <input type ="number" name="age" ng-model="per.age" placeholder ="enter age.."><br> 
    <input type="submit" value="submit"><br> 

</form> 

</div> 

<div class="container-fluid text-center ">  
<div class="col-sm-8 text-left" ng-repeat ="person in people"> 
<ul> 
    <li> 
    {{person.name}} {{person.surname}} {{person.age}} 
    </li> 
</ul> 
</div> 
</div> 

あなたの角度コード作成

var myApp = angular.module('myApp',[]); 

myApp.controller('myAppController',['$scope', '$http',function($scope, $http, myAppService){ 
    $http.get('http://localhost:3000/person/name').then(function(result){ 
     $scope.people = result.data; 
    }); 
    $scope.save = function (person) { 
     $http.post('http://localhost:3000/add',person) 
     .then(function (res) { 
      console.log(res.data); 
     },function (err) { 
      console.log(err);   
     }) 
    } 
}]); 

サーバー側のExpressコード

var express = require('express'); 
//var cors = require('cors-anywhere'); 
var app = express(); 
var mongoose = require('mongoose'); 
var Person = require('./model/person.js'); 
mongoose.connect('mongodb://localhost/helloworld'); 
app.post('/add', function (req, res){ 
    if (req.body) { 
    var person = new Person(req.body); 
    person.save(function (err,doc) { 
     if (err) { 
     res.send(err); 
     } 
     else{ 
     res.send("Save Data") 
     } 
    }) 
    } 
}); 
app.get('/person/name', function(req, res){ 
    Person.find(function (err,doc) { 
    if (err) { 
     res.send(err); 
     } 
     else{ 
     res.send(doc) 
     } 
    }) 
}); 
app.use(express.static(__dirname + '/public')); 
app.use(function(req, res, next){ 
    res.header('Access-Control-Allow-Origin',"*"); 
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 
    next(); 
}); 
app.get('/', function(req, res){ 
    res.render('index'); 
}) 
app.listen(3000); 
console.log('listening to port 3000....'); 

あなたのPersonモデルではないファクトリー

var mongoose = require('mongoose'); 
Schema = mongoose.Schema; 
var personSchema = new Schema({ 
    name:String, 
    surname: String, 
    age: String, 
    createdAt:{ type: Date, default: Date.now } 
}); 
module.exports = mongoose.model('Person',personSchema); 
+0

最初にドキュメントを読んで、使用する必要があるものとその使用方法を確認してください –

関連する問題