I wanna load data before AngularJS Page Load. I'm using bootstrap and JQuery as well along Angualr. Main problem is that i have table on page and used JQuery for pagination and other filters including responsiveness as well.

Now what happened is, that Page loads all JQuery and later my data es on page and nothing works like pagination etc. I do following workaround:

 <script>
      $(function () {
        //  document.body.style.overflow = 'hidden';
          setTimeout(
                  function() 

                      $('#example1').DataTable({
                          "paging": true,
                          "lengthChange": false,
                          "searching": true,
                          "ordering": true,
                          "info": true,
                          "autoWidth": true,
                          "scrollX": true
                        });
                  }, 500);

      });
    </script>

I added manual delay to wait JQuery, so that page loads its data before.

Can anybody tells good solution, how to make sure that data is loaded before Page HTML renders ?

I wanna load data before AngularJS Page Load. I'm using bootstrap and JQuery as well along Angualr. Main problem is that i have table on page and used JQuery for pagination and other filters including responsiveness as well.

Now what happened is, that Page loads all JQuery and later my data es on page and nothing works like pagination etc. I do following workaround:

 <script>
      $(function () {
        //  document.body.style.overflow = 'hidden';
          setTimeout(
                  function() 

                      $('#example1').DataTable({
                          "paging": true,
                          "lengthChange": false,
                          "searching": true,
                          "ordering": true,
                          "info": true,
                          "autoWidth": true,
                          "scrollX": true
                        });
                  }, 500);

      });
    </script>

I added manual delay to wait JQuery, so that page loads its data before.

Can anybody tells good solution, how to make sure that data is loaded before Page HTML renders ?

• javascript
• jquery
• angularjs

• 3 This is just wrong. You should wrap your jquery code inside an angular directive instead. – Chrillewoodz Commented Apr 13, 2016 at 11:37
• Means you want to load data after document ready? – Arun Shinde Commented Apr 13, 2016 at 11:37
• 3 You can use the routes resolve to load whatever data you want before it loads – T J Commented Apr 13, 2016 at 11:37
• Yes I want load data before document ready – Imran Commented Apr 13, 2016 at 11:40
• 1 Angular has the ability to paginate, order, and filter tables; native, in their ng-repeat directive. You might try making an api call via angular service then load that data into a table. No reason to stitch together jquery and angular when the functionality is already available. – jonode Commented Apr 25, 2016 at 20:47

3 Answers 3

I'd strongly suggest against using jQuery for your pagination. There are other solutions that will keep the Angular magic working for you such as ui-grid, smart-table, etc. These require pretty low effort on your part.

If you really want to keep on this path though, you might be able to get what you want with $routeProvider.when's resolve. When the route is requested, the resolve block will run any promises first, and wait for them to resolve before going to that route. Resolve can also pass that data into the controller of the route:

.when('/route', {
    ...,
    resolve: {
        dataYouWant: function(DataGettingService) {
            return DataGettingService.get();
        }
    }
})

routeProvider

This is just a possible solution. You might also use a directive instead of a controller

angular
    .module('app', [])
    .factory('repository', function ($http) {
        var loadData = function () {
            return $http... ;//make http call here and return the promise
        };

        return {
            loadData: loadData
        };
    })
    .controller('myCtrl', function (repository) {
        repository.loadData().then(function(data) {
            // use loaded data here
            $('#example1').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true,
                "scrollX": true
            });
        });

    });

You need to bind your jQuery code with Angular in some way. Here is the directive try.

app.directive('jqueryCallDirective' , function() {
   return {
        link: function(scope, element, attrs) {
            element.DataTable({
                "paging": true,
                 ...
            });
        }
   }
});

Then use ng-if deferred render for your element:

<div id="example1" ng-if="hasData" jquery-call-directive> ... </div>

and then set $scope.hasData = true in appropriate time on appropriate scope (or just on $rootScope if this is acceptable). Hope it helps!