如何在AngularJS的许多控制器上仅使用一个$ http请求

Question

I have a file with the name app.js and there, I use many controllers for my web applications. My problem is I repeat many times the same code. For example this $http POST

 $http({
        method: 'POST',
        url: urlProfile,
        data: $.param($scope.ProfileForm),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-Token': '\UsernameToken Token="' + mycookie + '"',
        }
    }).success(function(data, status, headers, config) {
        $scope.showProfiles();
        $('#newProfile').modal('hide');
        $scope.notifications(
            $scope.title = 'Notificación',
            $scope.body = 'Se ha creado un nuevo perfil',
            $scope.icon = '/img/restore.png'
        );
    }).error(function(data, status, headers, config) {
        alert('No se ha guardado el Perfil con el nombre: ' + profilename);
    });

How can I use this method like Service o Factory in my controllers and only provide the params like URL or Method

Answer 1

Create your own factory and return the promise object:

(function(){
    angular.module('test', []);

    angular.module('test')
        .controller('Controller1', ['$scope', 'myService', function($scope, myService){
            myService.myRequest(URL, $.param($scope.ProfileForm)).then(function(result){
                //result of ajax here, do your scope manipulation here
            });
        }])
        .controller('Controller2', ['$scope', 'myService', function(myService){
            myService.myRequest(URL, $.param($scope.ProfileForm)).then(function(result){
                //result of ajax here, do your scope manipulation here
            });
        }])
        .factory('myService', ['$http', function($http){
            return {
                myRequest: function(urlProfile, data){
                    return $http({
                        method: 'POST',
                        url: urlProfile,
                        data: data,
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-Token': '\UsernameToken Token="' + mycookie + '"',
                        }
                    }).then(function(result){
                        return result.data;
                    });
                }
            };
        }]);
})();

Answer 2

I recommend following JohnPapa's style-guide . It is modular and helps you separate your concerns.