Sunday, 12 March 2017

AngularJS: Save form data to MySQL table

I am able to:

  • Send text data from text boxes in HTML form to Controller using ng-model and ng-submit directives.
  • Send this data from controller to Service.

Problem: - From Service, I am not able to access my data in Server.js file and thus as a result I am not able to insert the data into MySQL table.

My AngularJS Service here uses built-in angularJS $http service to post the data.

When I was learning basic NodeJS, I was able to access the data in form using req.body.fieldName

I just started learning AngularJS, and came across this problem.

I have commented at appropriate places for ease.

HTML form code:

<form class="form-horizontal"  ng-submit="submit()">

            <label class="control-label col-sm-2" for="id">ID:</label>
            <input type="text" class="form-control" id="id" placeholder="Enter ID" ng-model="text1">

            <label class="control-label col-sm-2" for="title">Title:</label>
            <input type="text" class="form-control" id="title" placeholder="Enter Title" ng-model="text2">

Controller code:

    (function() {
        var newArticleController = function ($scope, customersService, appSettings) {

                $scope.list = [];
 //init function: customerService is a Service

                function init() {
                    customersService.postArticle($scope.list)
                        .success(function() {
                                console.log('post promise success!') //This is not printing!!!!!
                        })
                        .error(function(data, status, headers, config) {
                        })
                    }
    //on submit: init() is called
                $scope.submit = function() {
                    if ($scope.text1 && $scope.text2) {
                        $scope.list.push(this.text1)
                        $scope.list.push(this.text2)
                        init()
                        }
                }

        };

        angular.module('customersApp')
          .controller('newArticleController', newArticleController);
    }());

AngularJS Service code:

(function(){ 
    var customersService = function($http) {
        this.postArticle = function(dataRcvd) {
            console.log('service called');
            console.log(dataRcvd); //This is printing

            return $http.post('/newArticle', JSON.stringify(dataRcvd))
        }

    }
    angular.module('customersApp').service('customersService',                                                                           customersService);
}())

Server.js (problem comes in this part)

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

    var knex = require('knex')({
        client: 'mysql',
        connection: {
          host : 'localhost',
          user : 'root',
          password : 'password',
          database : 'sportsblog1'
        }
    });
    app.use(express.static(__dirname + '/'));
    app.post('/newArticle', function(req, res) {
            console.log('reached here: server.js')  //This is printing 

            ---> **//HOW TO ACCESS 'dataRcvd' here ???**    
    })

I am a newbie, so if any edits are required then please help me out.



via kshikhar

No comments:

Post a Comment