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>

Pankaj Parkar · Answer 1 · 2015-06-25T19:19:06.687

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

edited Jun 25 '15 at 19:19

answered Jun 25 '15 at 18:15

Pankaj Parkar

134,766
23
234
299

@user2727195 does it helped you? – Pankaj Parkar Jul 19 '15 at 13:20

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

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

edited May 23 '17 at 12:06

Community

1
1

answered Jun 25 '15 at 18:04

yvesmancera

2,915
5
24
33

Angular module deferred instantiation

2 Answers2