window.onload does not work in AngularJS

Question

This code in a simple HTML file works:

<script>
  function load() {
    alert("load event detected!");
  }
  window.onload = load;
</script>

However, if I put it into the index.html file of an AngularJS web app, it does not. Does anybody know why not?

Answer 1

Call your function with ng-init

var app = angular.module('app',[]);
app.controller('myController', function($scope){
    $scope.load = function () {
        alert("load event detected!");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller='myController' ng-init='load()'></div>
</div>

Answer 2

I prefer putting this kind of code in the app.run() function of angular.

e.g.

angular
.module('testApp', ['someModule'])
.constant('aConstant', 'hi')
.config(function($rootProvider) {/*some routing here*/})
.run(['$window', function($window) {
  $window.onload = function() {/*do your thing*/};
}]);

also check this nice post that depicts the order that some things happen in angular AngularJS app.run() documentation?