在页面加载之前加载Angular JS数据

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

Answer 2

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
            });
        });

    });

Answer 3

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!