0

This might be a beginner question, but I am retrieving data via http calls in AngularJS and setting them as properties in the $scope variable. However, since http calls take a while, my page tries to load AngularJS more than once in order to render different parts of the page as more the data is retrieved. Is there a way around this? (to hold off on loading the page before all data has been retrieved)

Ninja
  • 1,012
  • 3
  • 14
  • 29

2 Answers2

1

What you could do is to use ng-hide or ng-cloak, so that whatever should not be displayed until the http call fully loaded the data would remain hidden.

DevLounge
  • 8,313
  • 3
  • 31
  • 44
  • This solution would still involve executing / loading AngularJS more than once. Is there a way to only load it once? – Ninja Sep 29 '14 at 19:00
  • First, AngularJS isn't "loaded" more than once, this is just the view which renders as soon as some of the data it is bound to becomes available. This is why ng-cloak has been created. – DevLounge Sep 29 '14 at 19:02
  • 1
    hmm, I guess I am trying to get rid of the WARNING: Tried to load angular more than once. That appears on my console. – Ninja Sep 29 '14 at 19:04
  • Strange! Please share your code, the one where you include angular.js, I have never faced such console output. – DevLounge Sep 29 '14 at 19:06
  • Yup. I just read that stackoverflow post. My code is very long and it is a bit difficult to debug. @Apero do you mean my angular routes file? I don't have the same issue as the other post. – Ninja Sep 29 '14 at 19:19
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62136/discussion-between-apero-and-simonzhu). – DevLounge Sep 29 '14 at 19:21
0

take a look at the resolve property in the route settings. If you set something to be resolved the router will resolve this before going to the controller.

app.config(function ($routeProvider) {
  $routeProvider
    .when('/',
    {
      templateUrl: "app.html",
      controller: "AppCtrl"
      resolve: {
        app: function ($q, $timeout) {
          YourFactory.getData({});
        }
      }
    }
  )
});

then create a Factory that will get the data you need

app.factory('YourFactory', ['$http', '$q',
    function($http, $q) {
        var url = '/api2.php/api';
        var YourFactory = {};
        var factory_data = [];
        var messages = [];

        YourFactory.getData = function(params) {
            console.log("into GET data");
            var deferred = $q.defer();

            $http.get(url).success(function(response) {
                angular.copy(factory_data, response.data);
                deferred.resolve();
            }).error(function(response) {
                //couldn't resolve therefore it's rejected
                deferred.reject();
            });

            //returns a promise that indicates that something is being resolved and will be returned for the app to continue
            return deferred.promise;
        };


        YourFactory.data = function() {
            return factory_data;
        };

        return YourFactory;
    }
]);

then in your controller you need to input the factory and set the scope data from the Factory. Remember that Angular used the Factory to get data before the controller using the resolve property.

 app.controller("AppCtrl", ['$scope','YourFactory',
    function($scope, YourFactory) {
        $scope.data = YourFactory.data();
 });

(I haven't tested the code, I simply wrote an example based on an app that I'am doing and in which I passed through the same things as you)

Look at this links if you have any doubt.

https://egghead.io/lessons/angularjs-resolve http://www.javierlerones.com/2013/07/preloading-data-using-deferred-promises-in-angular-js.html

jplozgom
  • 129
  • 3
  • 9