AngularJS retrieve data from backend using factory/service

Question

I'm approaching AngularJS and I want to get data from a database. I succeeded in doing this

angular.module("myApp")
.controller("listaUtentiCtrl", function($scope, $http) {
    $http.get("backListaUtenti.php").success(function(data) { $scope.utenti=data } )
});

but I'd like to use a factory / service in order use the data from multiple controllers (but is not working)

angular.module("myApp")
.factory("utentiService", function($http,$q) {
    var self = $q.defer();

    $http.get("backListaUtenti.php")
        .success(function(data){
            self.resolve(data);
        })
        .error(function(){
            alert("Error retrieving data!");
        })
    return self.promise;
});

angular.module("myApp")
.controller("utenteCtrl", function($scope, $routeParams, utentiService, filterFilter) {
    var userId = $routeParams.userId;
    $scope.utente = filterFilter(utentiService.utenti, { id: userId })[0];
});

angular.module("myApp")
.controller("listaUtentiCtrl", function($scope, utentiService) {
    $scope.utenti = utentiService.utenti;
});

Where am I failing?

S.Klechkovski · Accepted Answer · 2015-09-10 09:08:53Z

2

The problem is in your service implementation. Here is your code refactored:

angular.module("myApp")
.factory("utentiService", function($http) { 
    return {
        getData: function () {
            return $http.get("backListaUtenti.php").then(function (response) {
               return response.data;
            });
        }
    };
});

angular.module("myApp")
.controller("utenteCtrl", function($scope, $routeParams, utentiService, filterFilter) {
    var userId = $routeParams.userId;
    utentiService.getData().then(function(data) {
        $scope.utente = filterFilter(data, { id: userId })[0];
    });
});

angular.module("myApp")
.controller("listaUtentiCtrl", function($scope, utentiService) {
    utentiService.getData().then(function (data) {
        $scope.utenti = data;
    });
});

If your data is static you can cache the request and avoid unnecessary requests like this:

$http.get("backListaUtenti.php", { cache: true });

edited Sep 10, 2015 at 9:08

answered Sep 9, 2015 at 18:17

S.Klechkovski

4,04520 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Manuel Over a year ago

the behavior is not what i'm expecting. it seems that the $http.get get me all the page and not the json alone so when i list the data and output utente i get {"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"backListaUtenti.php","headers":{"Accept":"application/json, text/plain, /"}} [{"citta":"Roma","cognome":"Rossi","nome":"Andrea","id":1},{"citta":"Milano","cognome":"Verdi","nome":"Marco","id":2},{"citta":"Napoli","cognome":"Neri","nome":"Giovanni","id":3},{"citta":"Palermo","cognome":"Gialli","nome":"Roberto","id":4} 200 OK

S.Klechkovski Over a year ago

Hi Manuel, I have edited the code, now it should return only the data from the response.

Manuel Over a year ago

i process the data like this <h1>Lista Utenti</h1> <ul> <li ng-repeat="utente in utenti"> <a href="#/utenti/{{utente.id}}">{{utente.nome}} {{utente.cognome}}</a> </li> </ul>

S.Klechkovski Over a year ago

Tnx, I am glad that I helped.

Collectives™ on Stack Overflow

AngularJS retrieve data from backend using factory/service

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related