Angular module deferred instantiation

Question

I've angular module defined in a routine after window.onload, I believe the angular looks for the module before window is loaded but I need to ensure all my assets are loaded before I trigger the angular module.

Is there a way, maybe another load event like DOM ready etc. that I can hook my application startup and then angular startup? My angular module is a dependent and getting used by another library.

window.onload = function() {
    angular.module("nav", [])
        .controller("NavController", function() {
        });
}

<nav class="state_2" ng-app="nav">
        <ul ng-controller="NavController">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>

Answer 1

The you want to achieve is just by doing lazy loading app, using angular.bootstrap then you should remove ng-app from html.

Markup

<nav class="state_2">
  <ul ng-controller="NavController">
    {{test}}
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</nav>

Code

window.onload = function() {
  angular.module("nav", [])
    .controller("NavController", function($scope) {
      $scope.test= '13123'
    });
    angular.bootstrap(document, ['nav']);
}

Demo Plunkr

Answer 2

Putting all your scripts below the DOM and before closing the body tag will ensure the scripts run after the DOM has been loaded.

See this excellent explanation: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it