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.
This form reads data from: "/json/form-data.json" :
[{
"name" : "BigTitleLine1",
"content" : "APP TITLE 1"
}, {
"name" : "BigTitleLine2",
"content" : "APP TITLE 2"
}];
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
}
});
}]);
Angular Controller assigns data to model:
ctrl.controller('formCtrl', ['$scope', '$rootScope', 'serviceFormData',
function($scope, $rootScope, serviceFormData) {
$scope.model = {};
serviceFormData.query(function(data) {
$scope.model.formData = data;
});
]);
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>
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);
I'm trying to write a json file which includes submited angular form's model. Like this:
[{
"name" : "BigTitleLine1",
"content" : "I've edited this json from my angular form which is on the client side."
}, {
"name" : "BigTitleLine2",
"content" : "APP TITLE 2"
}];
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.