How to send data from AngularJS to an ASP.NET MVC backend?

Customer

The recommended way to do this is to create a service in AngularJS that will be in charge of communicating with the server, this service will then expose functions that will be used as controllers communication interfaces.

One concept that you need to keep in mind is this:

╔════════════════════════════════════════╦═══════════════════════════════════╗
║ Controllers                            ║ Services                          ║
╠════════════════════════════════════════╬═══════════════════════════════════╣
║ Lógicas da apresentação (view)         ║ Lógicas de negócio                ║
║----------------------------------------║-----------------------------------║
║ Coisas diretamente relacionadas à view ║ Coisas que independem da view     ║
║----------------------------------------║-----------------------------------║
║ Coisas específicas                     ║ Coisas reutilizáveis              ║
║----------------------------------------║-----------------------------------║
║ Responsável por buscar os dados no     ║ Responsável por fazer requisições ║
║ servidor, por exibir os dadoss, por    ║ ao servidor, por lógicas de       ║
║ gerenciar interações do usuário, por   ║ validação, armazenamento de dados ║ 
║ estilos e exibição de partes da UI     ║ dentro do app e reutilização de   ║
║                                        ║ lógicas de negócio                ║
╚════════════════════════════════════════╩═══════════════════════════════════╝

Source: This table is an adaptation to Portuguese of one that can be found in the book AngularJS Up and Running >.

Here is an example of a service that I put together to communicate with a RESTFul API that manages products. It uses an service from AngularJS itself called $http to perform the HTTP requests:

(function () {
    'use strict';

    angular
        .module('app')
        .service('products', products);

    products.$inject = ['$http', 'user', 'API_URL'];

    function products($http, user, API_URL) {
        var sv = this;
        var endpoint = API_URL + '/products';

        sv.getAll = function (onSuccess, onFail) {
            var config = {
                method: 'GET',
                url: endpoint
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };

        sv.getById = function (id, onSuccess, onFail) {
            var config = {
                method: 'GET',
                url: endpoint,
                params: { id: id }
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };

        sv.post = function (newProduct, onSuccess, onFail) {
            var config = {
                method: 'POST',
                url: endpoint,
                data: newProduct
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };

        sv.put = function (updatedProduct, onSuccess, onFail) {
            var config = {
                method: 'PUT',
                url: endpoint,
                params: { id: updatedProduct.id },
                data: updatedProduct
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };

        sv.delete = function (id, onSuccess, onFail) {
            var config = {
                method: 'DELETE',
                url: endpoint,
                params: { id: id }
            }
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };
    }
})();

And how would you use this service in controller ? Here is an example of the service being used:

(function () {
    'use strict';

    angular
        .module('app')
        .controller('MainController', MainController);

    MainController.$inject = ['$scope', 'products', 'user'];

    function MainController($scope, products, user) {
        var vm = this;

        vm.products = [];

        products.getAll(function (data) {
            vm.products = data;
        }, function (errorMessage) {
            alert(errorMessage);
        });

        vm.deleteProduct = function (id) {
            if (!confirm("Would you like to delete this product?")) {
                return;
            }   

            products.delete(id, function (response) {
                var productIndex = vm.products.findIndex(function (value, index, traversedObject) {
                    return value.Id === id;
                });

                if (productIndex > -1) {
                    vm.products.splice(productIndex, 1);
                }

                alert('Product successfully deleted');
            }, function (errorMessage) {
                alert(errorMessage);
            });
        };
    }
})();

Server

The ASP.NET MVC service can be created using a action method that returns an #, here is a simple example:

public async Task<ActionResult> GetSomeJsonData()
{
    var model = new { Name = "João", LastName = "Silva" };

    return Json(new { Data = model }, JsonRequestBehavior.AllowGet); 
}

But I recommend you take a look at the ASP.NET Web API. Unlike ASP.NET MVC, the ASP.NET Web API is a framework specifically designed for creating RESTFul APIs.

It has many features that help you to develop an API faster, such as integration by default with Json.NET to "serialize" objects in JSON, among other things.