How to call php file via factory/service method using Angular.js

Question

I need to call php file using service/Factory method using Angular.js. Here instead of calling $http repeatedly in each file to call diferent php file for different purpose, I need to make it common. I am explaining one example below.

logincontroller.js:

var loginAdmin=angular.module('Takeme');
loginAdmin.controller('loginController',function($scope,$http,$location,$window,inputField){
   $http({
        method: 'POST',
        url: "php/Login/verify.php",
        data: userData,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
    },function errorCallback(response) {
    });
}

I have one common route.js file which is common for all controller and given below.

route.js:

var Admin=angular.module('Takeme',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock','ui.bootstrap','ngFileUpload','angularUtils.directives.dirPagination']);
Admin.run(function($rootScope, $state) {
    $rootScope.$state = $state;
});
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/',{
        url: '/',
        templateUrl: 'view/login.html',
        controller: 'loginController'
    })
})
Admin.factory('inputField',function($timeout,$window){
    return{
        borderColor:function(id){
             $timeout(function() {
                 var element = $window.document.getElementById(id);
                 if(element){
                      element.focus();
                      element.style.borderColor = "red";
                 }
             });
        },
        clearBorderColor:function(id){
            $timeout(function() {
                var element = $window.document.getElementById(id);
                 if(element){
                     element.style.borderColor = "#cccccc";
                 }
            });
        }
    };
});

Here I need to that $http service to call the php file common for which in every controller I will call that $http repeatedly. I need to pass only the parameters for $http service and return the response.

Answer 1

create a factory/service

angular.module('myApp').factory('DataService', DataService);

DataService.$inject = ['$http', '$q'];
function DataService($http, $q) {
return {
    getData: getData,
}
function getData(userData) {
    var deferred = $q.defer();
    $http({
        method: 'POST',
        url: "php/Login/verify.php",
        data: userData,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function(response) {
            deferred.resolve(response.data);
        },
        function(error) {
            deferred.reject(error.data);
        });
    return deferred.promise;
};
}

then use this factory whenever you need in a controller

angular.module('myApp')
.controller('MyController', ['$scope', 'DataService',  
function($scope, DataService ) {

    $scope.getMyData = function() {
        var data = {};
         DataService.getData(data)
            .then(function(response) {

            }, function(error) {

            });
    };

}
]);