Passing data from a html form using angularjs to a sql database

Question

I want to pass some data from a html form using a angularjs, to a sql database. This is my form

    <form class="form-group">
            <div class="col-md-6 col-lg-6">
                <div class="row ">
                    <div class="form-group col-xs-5 col-lg-6">
                        <label>Background color for views</label>
                        <input type="text" name="background_color" id="background_color" color-picker ng-model="selectedLayout.background_color" class="form-control"/>
                    </div>
                </div>
    </div>
        </form>
<button class="btn btn-primary" id="saveChanges-button" ng-click="saveChanges(selectedLayout)">Save</button>

This is my controller

(function () {

    'use strict';

    angular.module('routerApp').controller('LayoutController', function ($scope,$rootScope,layoutRepository) {
 $scope.saveChanges = function (selectedLayout) {
            layoutRepository.saveLayoutInfo(selectedLayout);
        };
});
}());

And this is my repository

(function () {

    'use strict';

    angular.module('routerApp').factory('layoutRepository', function ($http) {
        return {
            saveLayoutInfo: function (selectedLayout) {
                console.log(selectedLayout);
                $http({
                    method: 'POST',
                    url: '/api/LayoutSettings',
                    data: selectedLayout,
                    cache: false
                });
               }
        };
    });
}());

So I want that information to be sent to a sql database which have this connection string: Data Source=PC-RPASNICE\SQLEXPRESS;Initial Catalog=DatabaseSample.Program+LayoutContext;Integrated Security=True, And only have this fields:

public class LayoutOptions
        {
            [Key]
            public string Name { get; set; }

            public string Value { get; set; }

            public DateTime LastModifiedDate { get; set; }
        }

How to do this?

I don't know how to pass the information to the database and i asked you what to do further. — RobertRPM

Joe Lloyd Joe Lloyd · Accepted Answer · 2015-08-12T12:15:35

To pass data to a SQL database from an angular app you should probably use a Node JS server with a RESTful API. Use the Express package.

For starters you will need a $scope that will hold the form data you enter. In your controller you add this line

$scope.data= [];

This will give you a place to store your data. Next you want your button click to send that data to your api (should refactor to a factory). Add something like this in your controller.

$scope.SaveChanges= function () {
    $http.post('http://yourWebAPIIP/save', { 
      params: { 
          name:$scope.data.someParams, 
          pass: $scope.data.SomeMoreParams
      } 
    });
}

This will pass your params from the form to your instance of nodeJS, in node set up a response for this, something simple like.

app.get('/save',function(req,res){
console.log("/save hit");
var someParams = req.param('someParams');
var someMoreParams = req.param('someMoreParams');
connection.query("SELECT ?, ? from yourTable", [someParams, someMoreParams], function(err,rows){
    if(err)
    {
      console.log("error with MYSQL /Login "+err);
    }
    else
    {
      console.log("query successful");
    }
  });
});

Disclaimer

I've not run this code but its a modification on something I have done before and should give you the outline of exactly what you need to do. Please feel free to ask about it, I will add to this answer if you need more clarity but the process of passing data is a long one.

for a full look at how data is passed around from JSON to SQL please take a look at my open source messaging app here

Passing data from a html form using angularjs to a sql database

1 Answers