如何使用Angular.js通过工厂/服务方法调用php文件

时间:2018-01-19 06:45:31

标签: javascript php angularjs

我需要使用Angular.js使用service / Factory方法调用php file。这里不是在每个文件中反复调用$http来为不同目的调用不同的php文件,我需要让它变得常见。我在下面解释一个例子。

  

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) {
    });
}

我有一个常见的route.js文件,对于所有控制器都是通用的,如下所示。

  

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";
                 }
            });
        }
    };
});

这里我需要$http service来调用常见的php文件,我将在每个控制器中重复调用$http。我只需传递$http service的参数并返回响应。

1 个答案:

答案 0 :(得分:0)

创建工厂/服务

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;
};
}

然后在控制器中需要时使用此工厂

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

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

            }, function(error) {

            });
    };

}
]);