0

I just started learning AngularJS and I'm not really familiar with the terminologies in AngularJS yet. Here's my concern, I created a Loading Animation that shows up when I go to pages, but then I want to stop the Loading Animation as soon as all the contents of the pages has loaded. It's fairly easy to do in plain jQuery since I can just trigger $(window).load() but it doesn't seem to work in angular. $(document).ready() seems to work but that's not what I actually need since it gets triggered even though the images are not finished loading yet. I already tried $scope.init inside my controller as well as $window.onload inside my controller but I still can't make it work.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Sinomra Domaub
  • 1
  • 2

2 Answers2

0

Hotfix answer

Actually you do not need to wait for any of these events in angular. Just use $().. in your angular controller - the site was already loaded. (similar to the window.load() event. In case jquery does not find the html elements please try to wrap it with $timeout( function() { ... } );

Recommendation

Please do not! There are angular ways to animate stuff which fits better than crazy $('#id'). logic. This will break in growing applications.

Simon Fakir
  • 1,712
  • 19
  • 20
  • What I'm trying to do is to is to stop the loading animation once all of the images (as well as the background images) are fully loaded. I've already tried the $scope.$on('$viewContentLoaded', function(event){...}) however, it is fired even though the images are not loaded yet. I need something that's fired right after everything (not only the DOM) has loaded just like how window.load works. – Sinomra Domaub Oct 28 '17 at 03:29
0

I would recommend you forget about jQuery when you are working on AngularJS application. So figure out how to work everything out in AngularJS way - move all jQuery logic that you have to angular controller and avoid direct DOM manipulation (jQuery way).

Also, there's a good tutorial online if you are moving to AngularJS from jQuery:

https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers

If you need a solution for switching pages go with ui-router - it will give you even more flexibility with loading pages and resolving properties for different pages:

https://github.com/angular-ui/ui-router

And in this particular case you can use simple boolean property on $scope and show preloader div based on that:

<div ng-show="showOverlay" class="loader" />

then inside your controller you could put something like:

$scope.showOverlay = true;

and then after your page logic is loaded and promises are resolved you could just hide that preloader with:

$scope.showOverlay = false;

To illustrate I created simple fiddle with preloader for you. Also keep in mind there are tons of different ways of implementing this but this is simple one that should work for almost any case:

https://jsfiddle.net/pegla/ng1mn8qp/3/

There's also one answer here on stack overflow that could help you:

How to execute angular controller function on page load?

pegla
  • 1,866
  • 4
  • 17
  • 20
  • Is there a way for angular to trigger the controller once all of page content has loaded? I wanna stop the loading just after everything (not just the DOM elements but also the really huge images) has loaded. The timeout might be able to help however, if the internet connection of the user is really slow, then the timeout won't be enough to load the images. – Sinomra Domaub Oct 23 '17 at 04:13