CODEWITHSUNDEEP
javascriptangularjslazy-loading
Dan
Dan

Reputation: 57881

Lazy load of angularjs application

What I need is to bootstrap AngularJs and render a directive on demand. Imagine there is a splash page that should not be resources-hungry (should not download much without need, even javascript at the bottom would be bad).

<!DOCTYPE html>
<body>
    <button onclick="loadTheApp()">Launch app</button>
    <script>
        function loadTheApp() {
            // load Angular and other files in this manner:
            var el = document.createElement('script');
            el.src = '/js/app.js';
            document.body.appendChild(el);

            // TODO: bootstrap Angular and render directive   
        }
    </script>
</body>
</html>

Upvotes: 0

Views: 135

Answers (1)

milanlempera
milanlempera

Reputation: 2263

I think you can use this solution:

el.onload = function() {
  var element = document.body; // element which contains angular application   

  angular.bootstrap(element, ['myApp']);
}

assuming that app.js file contains angular and application (build version), or angular is loaded and app.js file contains application myApp

Upvotes: 2

Related Questions