How do I execute an ajax post with request header in Angular

Question

I am having a working code in jquery, where I post data from form with a token using request.setRequestHeader("X-CSRF-Token", $.cookie('token'));. I know how to get the form data into a $scope using ng-model, but how do I convert the submit_this() function below to an angular compatible function?

The Jquery Code:

$("body").on("click", "#login", function() {

        var url = "http://localhost/lab/theapp/api/user/login.json";    
        var name = $('#user').val();

        var pass = $('#pass').val();

        var data = 'username=' + encodeURIComponent(name) + '&password=' + encodeURIComponent(pass);
        var type = "post";

        submit_this(type,data,url);

    }); 


    //the function that need to be re-written for AngularJs   
    function submit_this(type,data,url) {
            try {   

                $.ajax({
                        url: url,
                        type: type,
                        data: data,
                        dataType: 'json',
                        beforeSend: function (request) {
                        request.setRequestHeader("X-CSRF-Token", $.cookie('token'));
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {

                        },
                        success: function (data) {
                            if (data.sessid){   
                                var sessid = data.sessid;
                                var session_name = data.session_name;
                                var token = data.token;
                                jQuery.cookie("token", token);
                            }
                            console.log(data);
                        }
                });
            }   
        catch (error) { console.log(error) }
        return false;   
}

Answer 1

You can use $http service to do that. You'd better create you own service, Demo code:

var demoApp = angular.module("DemoApp");
demoApp.controller("yourcontroller", function($scope, yourService){
    yourService.postData("http://your/url", {"X-CSRF-Token": $scope.token})
        .success(function(data){
            //handle success response here
        }).error(function(error){
            //handle error response here 
        });                                  
});
demoApp.service("yourService", function($http){
    this.postData = function(url, _headers){
        return $http({
                  method: "POST", 
                  url: url,
                  headers: _headers
               });
     };
});

Here is angular $http document.