Angular $http calls

Question

I am very new to the javascript scene and especially Angular. I have a question about $http calls to a joomla server that has very very basic REST services using K2's "format=json" url extension. The way the K2 joomla json output works is that you just append "format=json" to the end of your url: https://examplesite.com/category-1?format=json now this works fine but I cant help thinking I am doing something wrong.. If I want a page that shows articles from category-1 and another that shows articles from category-2 then 100 more categories after that, I am making a seperate $http call every time:

angular.module('TNA.servicesEastc', [])

.factory('Eastc', function ($http) {
    var eastc = [];
       storageKey = "eastc";

    function _getCache() {
        var cache = localStorage.getItem(storageKey );
        if (cache)
            eastc = angular.fromJson(cache);
    }


    return {
        all: function () {
            return $http.get("http://examplesite.com/category-1.html?format=json").then(function (response) {
                eastc = response.data.items;
                console.log(response.data.items);
                return eastc;
            });
        },

        getNew: function () {
            return $http.get("http://examplesite.com/category-1.html?format=json").then(function (response) {
                eastc = response.data.items;
                return eastc;
            });
        },

        get: function (eastCId) {
            if (!eastc.length) 
                _getCache();
            for (var i = 0; i < eastc.length; i++) {
                if (parseInt(eastc[i].id) === parseInt(eastCId)) {
                    return eastc[i];
                }
            }
            return null;
        }
    }
});

and another...

angular.module('TNA.servicesWestc', [])

.factory('Westc', function ($http) {
    var westc = [];
       storageKey = "westc";

    function _getCache() {
        var cache = localStorage.getItem(storageKey );
        if (cache)
            westc = angular.fromJson(cache);
    }


    return {
        all: function () {
            return $http.get("http://examplesite.com/category-2.html?format=json").then(function (response) {
                westc = response.data.items;
                console.log(response.data.items);
                return westc;
            });
        },

        getNew: function () {
            return $http.get("http://examplesite.com/category-2.html?format=json").then(function (response) {
                westc = response.data.items;
                return westc;
            });
        },

        get: function (westCId) {
            if (!westc.length) 
                _getCache();
            for (var i = 0; i < westc.length; i++) {
                if (parseInt(westc[i].id) === parseInt(westCId)) {
                    return westc[i];
                }
            }
            return null;
        }
    }
});

and so on...

its the same problem with having to make tons of controllers to handle all this.

This doesn't seem very maintainable to me so I was wondering if there is a more efficient way to handle this?

You can have multiple services within the same module, so that would make it a bit more maintainable to start with i guess. Your `all` function and `getNew` function are basicly equal, so they can simply be joined. You can also look into ng-routing. if the category-id nr is a variable, you can reuse a lot of your functions aswell. — Guinn, Jul 09 '15 at 11:59

score 1 · Answer 1 · edited May 23 '17 at 11:45

You must make your category number a variable and then build the query form it.

See example here

Solution extracted from the topic:

factory('Facedetect', function ($resource) {

   return $resource('skyBiometry/facedetect', {}, {   
       query: { method: 'GET', params: {imageUrl:"http://cdn1-public.ladmedia.fr/var/public/storage/images/dossiers/portrait_w674.jpg"}, isArray: false }
       }) 
  });


function IndexCtrl($scope,$routeParams,Facedetect) {
    $scope.imageurl = 'http://flepi.net/images/personne-tendue.jpg';
    $scope.text = $scope.text = Facedetect.get({imageUrl: $scope.imageurl});
}

score 1 · Answer 2 · answered Jul 09 '15 at 12:04

Use something like this :

app.service(
"angularPostService",
['$http', '$q', function($http, $q) {

    return({
        serve: serve
    });

    function serve(data, url) {
        var request = $http({
            method: 'post',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            url: url,
            data: data
        });

        return( request.then( handleSuccess, handleError ) );

    }
    function handleError( response ) {
        if (! angular.isObject( response.data ) || ! response.data.message) {
            return( $q.reject( "An unknown error occurred." ) );
        }
        return( $q.reject( response.data.message ) );
    }
    function handleSuccess( response ) {
        return( response.data );
    }
}]

);

This will give you a service for making http request. Inject this service in any controller and make use of http ajax calls from angular

Angular $http calls

2 Answers2