0

I'm trying to implement a display of loading message while data is being retrieved. In the case of basic js functions, it works, but in case of using factory to retrieve data, i dont get anything displayed before the data.

example of partial :

<div  Class='' ng-controller="contentsCtrl">

    <div ng-show="contents.news.length" class="">
    <div  ng-show="isloading"><br><img src="img/loader.gif" alt="" align='center'><br><br></div>
          <ul id="tournois-list" ng-show="!isloading">
                <li ng-repeat="content in contents.news track by $index">
                    <div class="tournois ">
                        <div class='row'>
                            <span class='contents_title'>{{content.content_title}}</span>
                        </div>
                         <div class='row'>
                            <span class='contents_dates'>{{content.content_date | date:'dd-MMMM-YYYY'}}</span>
                        </div>
                         <div class='row'>
                            <span class='contents_intro'>{{content.content_intro | htmlToPlaintext}}</span>
                        </div>
                    </div>
                </li>
            </ul>
    </div>
 </div>

code for controller + factory

baclyApp.controller('contentsCtrl',function($scope,contents){
    $scope.isloading=true;
    $scope.contents=contents.list();

    console.log($scope.contents);
    $scope.isloading=false;
})


baclyApp.factory("contents",function($http,$cookies){
    var urlphp="http://bacly.fr/baclymphp/";
    var contents={};   
    $http.get(urlphp+"getContent.php").then(function(response)
     {
         contents.news = response.data;
     })
    return {
        list: function(){
            return contents;
        }
    }

})

I guess this is about the timing as controller inject the factory object, so it needs to be resolved or something like this, but i don't know how to do it on another way.

Thanks !

Update : Here the other controller i'm talking about with multiple get

baclyApp.factory("tournois",function($http,$q){
//Factory qui recupère les données de tournois et iscriptions
    // var urlphp="http://localhost/cordova/mbacly/www/php/";
    var tournois={};
    var urlphp="http://bacly.fr/baclymphp/";
        $http.get(urlphp+"getTournois.php").then(function(response)
         {
             tournois.tournois = response.data;
             console.log(tournois);
         },function(status) {
            alert("pas d acces réseau") 
            })

        $http.get(urlphp+"getTournoinscriptions.php").then(function(response)
         {
             tournois.inscriptions = response.data;
         },function() {
            alert("pas d acces réseau") 
            });

        $http.get(urlphp+"getTournoinscris.php").then(function(response)
         {
             tournois.inscris = response.data;
         },function() {
            alert("pas d acces réseau") 
             });

        $http.get(urlphp+"getUsers.php").then(function(response)
         {
             tournois.users = response.data;
         },function() {
            alert("pas d acces réseau") 
            });


    return {

        list: function(){
            return tournois;
        },
        find: function(cid){
            return _.find(tournois.tournois, function(t) {return t.tournois_id === cid});
        },
        findinscris: function(cid){
            return _.filter(tournois.inscris, function(t) {return t.tournois_id == cid});
        },
        findusers: function(uid){
            return _.filter(tournois.users, function(t) {return t.user_id === uid});
        },
        findusersbyname: function(name){
            return _.filter(tournois.users, function(t) {return t.uname === name});
        },
        updateinscription: function($params){
            // var urlphp="http://localhost/cordova/mbacly/www/php/";
            var urlphp="http://bacly.fr/baclymphp/";
            var tournois={};
            var retour="retour-OK";

            $params_encoded =encodeURIComponent(JSON.stringify($params));  
            $http.get(urlphp+"saveinscription.php?data="+$params_encoded).success(function(data){
                // console.log("retour-OK"+data);
                retour="retour-OK";
            });
                return retour;
       },
        insertinscription: function($params){
            // var urlphp="http://localhost/cordova/mbacly/www/php/";
            var urlphp="http://bacly.fr/baclymphp/";
            var tournois={};
            var retour="retour-OK";

            $params_encoded =encodeURIComponent(JSON.stringify($params));  
            $http.get(urlphp+"saveinscription.php?data="+$params_encoded).success(function(data){
                // console.log("retour-OK"+data);
                retour="retour-OK";
            });
                return retour;

        },
        deleteinscription: function($params){
            // var urlphp="http://localhost/cordova/mbacly/www/php/";
            var urlphp="http://bacly.fr/baclymphp/";
            var tournois={};
            var retour="retour-OK";
            $params_encoded =encodeURIComponent(JSON.stringify($params));  
            $http.get(urlphp+"saveinscription.php?data="+$params_encoded).success(function(data){
                // console.log("retour-OK"+data);
                retour="retour-OK";
            });
                return retour;

        }                           
    }
})

Controller (part of):

baclyApp.controller('tournoisCtrl',['$scope','tournois','$cookies','$state','$window','growl',function($scope,tournois,$cookies,$state,$window,growl){
    //Liste des tournois
        $scope.showtournoislist=true;
        $scope.tournois=tournois.list();

.. and later in the controller

tournois.findinscris(cid)
Nightf
  • 61
  • 1
  • 7

1 Answers1

1

use this. $scope.isloading would be false, when comes response

baclyApp.controller('ContentsCtrl', function ($scope, ContentService) {
    $scope.isloading = true;

    ContentService.getContent("getContent.php", function (contents) {
        $scope.contents = contents;
        $scope.isloading = false;
    }, function () {
        $scope.isloading = false;
    });

    //    contents.getContent("another.php", function (data) {
    //        $scope.contents = data;
    //    });

    console.log($scope.contents);

});

baclyApp.service("ContentService", function ($http, $cookies) {
    var urlphp = "http://bacly.fr/baclymphp/";

    function getRequest(method, url, data, onSuccess, onError) {
        var header = {}
        $http({
            method: method,
            url: urlphp + url,
            data: data
        }).then(function () {
                if (onSuccess) {
                    onSuccess(contents);
                }
            }, function () {
                if (onError) onError();
            });
    }

    function getContent(url, onSuccess, onError) {
        getRequest("GET", url, null, onSuccess, onError);
    }


    function getOtherContent(url, onSuccess, onError) {
        getRequest("POST", url, null, onSuccess, onError);
    }

    return {
        getRequest: getRequest
        getContent: getContent,
        getOtherContent: getOtherContent
    }
});

Also, I recommend that:

  • services, factories, controllers names should be capital letter. methods isn't.

  • use "service" to work with API.

  • use "factory" to transfer data among controllers.

UPDATED:

baclyApp.factory("tournois", function ($http, $q) {
//Factory qui recupère les données de tournois et iscriptions
    // var urlphp="http://localhost/cordova/mbacly/www/php/";
    var tournois = {},
        urlphp = "http://bacly.fr/baclymphp/",
        phpFiles = {
            getTournois: "getTournois.php",
            getTournoinscriptions: "getTournoinscriptions.php",
            getTournoinscris: "getTournoinscris.php",
            getUsers: "getUsers.php"
        },
        countResponse = 0;

    function getDate(from, onSuccess, onError) {
        $http.get(urlphp + from).then(function (response) {
            if (response) {
                if (onSuccess) {
                    onSuccess(response)
                }
            } else if (onError) {
                onError()
            }
        }, function () {
            onError();
        })
    }


    getDate(phpFiles.getTournois, function (response) {
        tournois.tournois = response.data;
        countResponse++;
        console.log(tournois);
    }, function () {
        alert("pas d acces réseau");
    });
    getDate(phpFiles.getTournoinscriptions, function (response) {
        tournois.inscriptions = response.data;
        countResponse++;
    }, function () {
        alert("pas d acces réseau");
    });
    getDate(phpFiles.getTournoinscris, function (response) {
        tournois.inscris = response.data;
        countResponse++;
    }, function () {
        alert("pas d acces réseau");
    });

    getDate(phpFiles.getUsers, function (response) {
        tournois.users = response.data;
        countResponse++;
    }, function () {
        alert("pas d acces réseau");
    });


    return {
        getResponseAfterSuccess: function (onSuccess, onError) {
            if (Object.keys(phpFiles).length == countResponse) {
                if (onSuccess) onSuccess(tournois);
            } else {
                if (onError) onError(tournois);
            }
        },
        list: function () {
            return tournois;
        }
        //, more codes
    }
});

baclyApp.controller('tournoisCtrl', ['$scope', 'tournois', '$cookies', '$state', '$window', 'growl', function ($scope, tournois, $cookies, $state, $window, growl) {
    //Liste des tournois
    $scope.showtournoislist = true;
    $scope.isloading = true;
    $scope.tournois = tournois.getResponseAfterSuccess(function (response) {
        $scope.tournois = response;
        $scope.isloading = false;
        $scope.showtournoislist = false;
    }, function (response) {
        $scope.tournois = response;
    });
}]);
Sherali Turdiyev
  • 1,745
  • 16
  • 29
  • Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/88933/discussion-on-answer-by-sherali-turdiyev-cordova-onloading-with-factory-data). – Martijn Pieters Sep 06 '15 at 15:27