Angular JS Data loading Before Page Loading

Question

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 comes 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 ?

Answer 1

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