Single page application - load js file dynamically based on partial view

Question

I've just started learning Angular and following the tutorial here - http://docs.angularjs.org/tutorial/step_00

I'm downloaded the seed example from GitHub and it works great. I have a question though - if a partial view requires an external js file to be referenced, does it need to be added to the index.html file at the beginning? I want the app to be as lean as possible and only want to include the js references that are required for the present view. Is it possible to load the js files dynamically based on a view?

Answer 1

This just worked for me. Figured I would post it for anybody else seeking the lightest-weight solution.

I have a top-level controller on the page's html tag, and a secondary controller for each partial view.

In the top-level controller I defined the following function…

$scope.loadScript = function(url, type, charset) {     if (type===undefined) type = 'text/javascript';     if (url) {         var script = document.querySelector("script[src*='"+url+"']");         if (!script) {             var heads = document.getElementsByTagName("head");             if (heads && heads.length) {                 var head = heads[0];                 if (head) {                     script = document.createElement('script');                     script.setAttribute('src', url);                     script.setAttribute('type', type);                     if (charset) script.setAttribute('charset', charset);                     head.appendChild(script);                 }             }         }         return script;     } }; 

So in the secondary controllers I can load the needed scripts with a call like the following…

$scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8'); 

There's a slight delay before the objects contained in the external script are available, so you'll need to verify their existence before attempting to use them.

Hope that saves somebody some time.

Answer 2

I just tried the https://oclazyload.readme.io/. It works out of the box.

bower install oclazyload --save 

Load it in your module, and inject the required module in controller:

var myModule = angular.module('myModule', ['oc.lazyLoad'])    .controller('myController', ['$scope', '$ocLazyLoad', '$injector',         function($scope, $ocLazyLoad, $injector) {            $ocLazyLoad.load(                    ['myExtraModule.js',                        'orAnyOtherBowerLibraryCopiedToPublicFolder.js'                    ])                .then(function() {                    // Inject the loaded module                    var myExraModule = $injector.get('myExtraModule');                });        }    ]);