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 ?

This is just wrong. You should wrap your jquery code inside an angular directive instead. — Chrillewoodz
– Chrillewoodz, Commented Apr 13, 2016 at 11:37
You can use the routes resolve to load whatever data you want before it loads — T J
– T J, Commented Apr 13, 2016 at 11:37
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
– jonode, Commented Apr 25, 2016 at 20:47

C.C. · Accepted Answer · 2016-04-26 22:33:56Z

9

+25

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

answered Apr 26, 2016 at 22:33

C.C.

5852 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DrinkBird · Accepted Answer · 2016-04-25 20:48:53Z

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

    });

dhilt · Accepted Answer · 2016-05-01 02:00:01Z

0

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!

answered May 1, 2016 at 2:00

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

Collectives™ on Stack Overflow

Angular JS Data loading Before Page Loading

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related