Angular/Nodejsを使ってフォームデータをMongoDBデータベースに投稿

Question

私はAngularJSには比較的新しいので、MongoDBに精通して$ httpリクエストを使用するための基本的なブログアプリを構築することにしました。

しかし、ユーザーが$scopeのフォームにMongoDBデータベースに記入したデータを投稿するために、Angularサービスを使用するのに少し問題があります。

元々、$ http要求を私のコントローラに入れました。

mainCtrl.js

$scope.addPost = function() { 
    $http.post('/api/blogs', $scope.formData) 
    .success(function(data) { 
    $scope.formData = {}; 
    $location.path('blogs'); 
    console.log(data, 'Blog created.'); 
    })  
    .error(function(data) { 
    console.log('Error: ' + data); 
    }) 
}; 

しかし、これは私のコントローラを介して行われ、私はこれがベストプラクティスではありません理解し、私は角度のサービスでこの機能を入れしようとしています：これは私の作品。

server.js

//Dependencies. 
var express = require('express'); 
var router = express.Router(); 
var bodyParser = require('body-parser'); 
var cors = require('cors'); 
var mongoose = require('mongoose'); 
var mongojs = require('mongojs'); 
var http = require('http'); 
var path = require('path'); 
var fs = require('fs'); 
var dotenv = require('dotenv'); 

var port = 9001; 
var mongoUri = 'mongodb://localhost:27017/blog-app'; 

var app = express(); 

app.use(express.static(__dirname + '/public')); 
app.use(bodyParser.json()); 

//Blog Data & Data Storage. 
----------------------------- 

var Schema = mongoose.Schema; 

var blogSchema = new Schema({ 
    title : {type: String, min: 8, max: 50, required: true}, 
    body : {type: String, required: true}, 
    author : {type: String, min: 3, max: 40, required: true}, 
    pubdate : {type: Date, default: Date.now} 
}); 

var Blog = mongoose.model('Blog', blogSchema); 

//Routes. 
---------- 

// GET BLOGS! 

app.get('/api/blogs', function(req, res) { 
    Blog.find(function (err, blogs) { 
     if (err) 
      res.send(err); 
     res.json(blogs); 
    }); 
}); 

// POST BLOG! 

app.post('/api/blogs', function(req, res) { 
    Blog.create({ 
     title: req.body.title, 
     body: req.body.body, 
     author: req.body.author, 
     date: req.body.date 
    }, function(err, blog) { 
     if (err) 
      res.send(err); 
     Blog.find(function(err, blogs) { 
      if (err) 
       res.send(err); 
      res.json(blogs); 
     }); 
    }); 
}); 

mainCtrl.js

var app = angular.module("blog-app"); 

app.controller('MainController', ['mainService', '$scope', '$http', '$location', '$stateParams', '$state', function(mainService, $scope, $http, $location, $stateParams, $state) { 

    $scope.formData = {}; 

    $scope.blog = []; 

    function getBlogs() { 
     mainService.getPosts().then(function(data) { 
     $scope.blog = data; 
     console.log(data, "The blogs."); 
     }); 
    } 

    getBlogs(); 

    $scope.readPost = function(id) { 
     mainService.readPost(id).then(function(data) { 
     $scope.readblog = data; 
     console.log(data, "This is the blog you selected.") 
     }); 
    }; 

    $scope.addPost = function(formData) { 
     mainService.addPost(formData).then(function() { 
     $scope.formData = {}; 
     $location.path('blogs'); 
     console.log(data, 'Blog created.');  
     }); 
    }; 

}]); //End Controller. 

：ここ

は、HTMLビューを含むアプリのこの部分を構成するコードの関連部分であります

mainService.js

var app = angular.module("blog-app"); 

app.service('mainService', function($http, $q) { 

    var blog = []; 
    var readblog = {}; 
    var formData = {}; 

    this.getPosts = function() { 
     return $http.get('/api/blogs').then(function(response){ 
      blog = response.data; 
      return blog; 
     }); 
    } 

    this.readPost = function(id) { 
     return $http.get('/api/blogs/' + id).then(function(response) { 
      readblog = response.data; 
      return readblog; 
     }); 
    }; 

    this.addPost = function(formData) { 
     $http.post('/api/blogs', formData); 
    }; 

    }); 

newblog.html

<div class="newblog"> 
    <a ui-sref="blogs"><i class="fa fa-close fa-2x exit"></i></a> 
    <div class="form"> 
      <form> 
       <i class="fa fa-pencil-square-o fa-5x"></i><br> 

       <input class="blogtitle" type="text" ng- model="formData.title" placeholder="Blog Title" required /><br> 

       <textarea ng-model="formData.body" rows="15" placeholder="Write the body of your blog here." required></textarea><br> 

       <label for="">by:</label><br> 
       <input class="blogauthor" type="text" ng-model="formData.author" placeholder="Author Name" required /><br><br> 

       <button type="submit" ng- click="addPost()">Submit</button> 
      </form> 
    </div> 
</div> 

そう...

...明確にするために、私はnewblogのボタンをクリックすることができるようにしたいです。 htmlとaddPost()関数を使用して、フォームデータをデータベースに格納します。わたしにはっきりしないことは、ユーザーが$scopeで入力したデータを参照する方法です。実際にデータベースに投稿することができます。コントローラーでこれを行うのは簡単でしたが（例では非常にポストに示されています）、サービスでやりたいと思います。

私がしようとしているもの：

サービス機能

this.addPost = function(formData) { 
    $http.post('/api/blogs', formData).then(function(response) { 
     blog.push(response.data); 
     return blog; 
    }) 
}; 

、その後...

コントローラ機能を

$scope.addPost = function(data) { 
    mainService.addPost(data).then(function(data) { 
    $scope.blog.push(data); 
    console.log(data, 'Blog created.');  
    }); 
}; 

私は他に何を試していたのか覚えていないが、最終的には役に立たなかった。私はそれが私のGoogle検索のクエスト中に見落とされるかもしれない非常にシンプルなものかもしれないと推測しています。どんな助けもありがたいです。また、意味が分かりません。私は何かを見つけたら、それに取り組み、問題を修正/答え続けます。

Answer 1

お使いのコントローラ機能は次のようになります。

$scope.addPost = function() { 
    mainService.addPost($scope.formData).then(function() { 
     $scope.formData = {}; 
     $location.path('blogs'); 
     console.log(data, 'Blog created.');  
    }); 
}; 

あなたはformDataにnull値をmainService.addPostを呼んでいたので、基本的にビューから何かを渡していません。

更新

最初にあなたの質問を読んだとき、私はこれを逃したが、サービスメソッドが約束返す必要があります：質問とは無関係の

this.addPost = function(formData) { 
    return $http.post('/api/blogs', formData); 
};