Question

我对AngularJS比较陌生，我决定构建一个基本的博客应用来熟悉MongoDB并使用$ http请求。

但是，使用我的Angular服务将用户在$scope的表单中填写的数据发布到我的MongoDB数据库时，我遇到了一些麻烦。

最初，我把$ 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);
  })  
};

但这是通过我的控制器完成的，我知道这不是最佳实践，所以我试图将此功能放在Angular服务中。

以下是构成应用程序这一部分的相关代码部分，包括HTML视图：

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.

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>

因此...

...要清楚，我希望能够使用addPost()功能点击 newblog.html 中的按钮，并将表单数据放入我的数据库中。我不清楚的是如何在我的服务中引用用户在$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.');     
    }); 
};

您没有从视图中传递任何内容，所以基本上您使用mainService.addPost的空值调用formData。

<强>更新

我在第一次阅读你的问题时错过了这个，但服务方法需要返回承诺：

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

使用Angular / Nodejs

1 个答案: