Using window.onload in AngularJS service

Question

I'm using AngularJS 1.6 to create a game that relies on some images. The game is separate from Angular for the most part, and instantiated by a service, before any of the controllers are run. I want the game to be instantiated by a service so that I can expose it to other controllers, which do interact with the game in some capacity. I use $window.onload, but it only works when the page first loads. When I refresh the page, the event doesn't fire, presumably because the browser is getting the images from the cache.

I've considered using document.ready, but this will occasionally cause problems when the images haven't loaded quickly enough.

I've tried jQuery, vanilla JS, and Angular's syntax:

$(window).on('load', function() {});
$window.onload = function();
angular.element($window).on('load', function() {});

Any advice would be greatly appreciated. This is what my code basically looks like.

// Game Service (game state, game logic and game loop)
gameApp.service('theGame', function($log, $document, $window, 
$location, $timeout, $interval) {


    $window.onload = function() {
        // Initialize a new Game object
        var game = new Game();
        game.initGame();
    };

});

What you are describing here is counter to most of the design principles that angular is written using. You might find it better to describe the problem you are trying to solve, rather than the solutions that aren't the right fit. "The game is separate from angular for the most part" doesn't exactly make sense; either angular binds with it or it doesn't..... — Claies
– Claies, Commented May 9, 2017 at 18:35
The question is less about the game and more about getting window.onload to fire. Maybe I should remove that statement if it's distracting. I just mentioned the game to explain that I have images which which I want to load fully before executing a piece of code. Do you know how I can get window.onload to fire reliably? — GHH
– GHH, Commented May 9, 2017 at 18:45
but that's the point, it's not the game that's distracting, it's the requirements that don't really make sense in context of angular. Angular doesn't have a mechanism to "delay loading until something else happens" (like loading images), because, in general, it doesn't try to manipulate the DOM directly, and doesn't care about things going on in the DOM that it doesn't know about, because angular logic shouldn't be based on the state of the DOM. — Claies
– Claies, Commented May 9, 2017 at 18:48

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Putting window.onload inside an AngularJS service is putting the cart before the horse. AngularJS loads after the onload event.

Instead, use angular.element to load the game and then manually bootstrap AngularJS:

angular.element(function() {
    var game = new Game();
    game.initGame();
    angular.module("myApp").value("theGame", game);
    angular.bootstrap(document, ['myApp']);
});

To avoid automatic initialization, remember to omit the ng-app directive.

Manual Initialization

If you need to have more control over the initialization process, you can use a manual bootstrapping method instead.

You should call angular.bootstrap() after you've loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.

— AngularJS Developer Guide - Bootstrap (Manual Initialization)

Note: angular.element(f) is an alias for angular.element(document).ready(f)¹

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 9, 2017 at 21:08

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

1 Comment

GHH Over a year ago

Thanks, that makes alot of sense.

Collectives™ on Stack Overflow

Using window.onload in AngularJS service

1 Answer 1

Manual Initialization

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Manual Initialization

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related