如何建立与Angular.js和Node.js的低谷服务连接？ [英] How to build connection with Angular.js and Node.js trough services?

问题描述

我已经拥有它里面形成一个简单的管理面板。我试图更新此表单的内容低谷Angular.js和Node.js的连接。如果我做到这一点。我将能够读取表单的数据和渲染的头版藏汉

I've a simple Admin Panel which has form inside it. I'm trying to update this form's content trough Angular.js and Node.js connection. If i accomplish this: i will able to read form's data and render on the front page aswell.

此表格从读取数据：

[{
  "name"    : "BigTitleLine1",
  "content" : "APP TITLE 1"
}, {
  "name"    : "BigTitleLine2",
  "content" : "APP TITLE 2"
}];

角的服务从JSON文件中获取数据：

Angular Service gets data from that json file:

ServiceModule.factory('serviceFormData', ['$resource', function ($resource) {
    return $resource(rootPath("/json/form-data.json"), {}, {
        query: {
            method: 'GET',
            isArray: true
        }
    });
}]);

角控制器分配数据模型：

ctrl.controller('formCtrl', ['$scope', '$rootScope', 'serviceFormData',
    function($scope, $rootScope, serviceFormData) {

        $scope.model = {};
        serviceFormData.query(function(data) {
            $scope.model.formData = data;
        });
]);

我可以显示的 HTML 真实数据，并保存更改模型：

I can show true data on the HTML, and save changes to the model:

<form>
      <div class="form-group" ng-repeat="item in model.formData">
          <label>- {{ item.name }}</label>
          <input class="form-control" ng-model="item.content" required />
          <br />
      </div>
</form>

我创建了一个 Node.js的防爆preSS 服务器在我的本地。它可以读取和写入文件以及。

I've created a Node.JS Express server on my localhost. It can read and write files aswell.

var express = require('express'),
    fs      = require('fs'),
    app     = express();

app.use(express.static(__dirname));

// i can create "localhost:3000/test" page and show this json data over there
app.get('/test', function (req, res, next) {
    res.json({ some: "aq literal" });
});

// i can create "./json/test.json" file and write what i want.
fs.writeFile("./json/test.json", "Hey there!", function(err) {
    if(err) {
        return console.log(err);
    }
});

var server = app.listen(3000);

我试图写它包括submited棱角的模型JSON文件这样的：

[{
  "name"    : "BigTitleLine1",
  "content" : "I've edited this json from my angular form which is on the client side."
}, {
  "name"    : "BigTitleLine2",
  "content" : "APP TITLE 2"
}];

如何建立Angular.js和Node.js的之间的联系？

How to build this connection between Angular.js and Node.js ?

推荐答案

您应该改变你的工厂来处理新的呼叫节点更新文件（或创建一个新工厂）：

You should change your factory to handle the new call to Node to update the file (or create a new factory):

ServiceModule.factory('serviceFormData', ['$resource', function ($resource) {
    return $resource('/update', {}, {
        update: {
            method: 'PUT'
        }
    });
}]);

然后，你应该阅读随更新方法角控制器：

Then you should update the Angular controller with the update method:

var json = new serviceFormData.update($scope.item);

json.$update(function (response) {
    $scope.success = true;
}, function (response) {
    $scope.error = response;
});

最后，你应该通过节点与新的路由处理：

And finally you should handle it by Node with a new route:

var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.put('/update', function (req, res) {
  var arr = []
    for (var index in req.body){
      arr.push(req.body[index])
    }
    var jsonData = JSON.stringify(arr, null, 2);

    fs.writeFile("./json/test.json", jsonData, function(err) {
       if(err) {
          return console.log(err);
       }
       res.json({ success: true });
    });
});

我没有测试它，但是这是要走的路。

I didn't test it but this is the way to go.

这篇关于如何建立与Angular.js和Node.js的低谷服务连接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！