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

by

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.

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  3. Angular HttpPromise: difference between `success`/`error` methods and `then`’s arguments
  4. How do you prevent duplicate user properties in Firebase?
  5. What is the difference between ng-if and ng-show/ng-hide
  6. How to format date in angularjs
  7. Use of ng-src vs src
  8. AngularJS Paging with $location.path but no ngView reload
  9. Angular: calling controller function inside a directive link function using &
  10. Limit the length of a string with AngularJS
  11. inline conditionals in angular.js
  12. Angular, content type is not being sent with $http
  13. angular directive encapsulating a delay for ng-change
  14. Angular: ng-bind-html filters out ng-click?
  15. How can I test an AngularJS service from the console?
  16. Angularjs ui-router. How to redirect to login page
  17. Send multipart/form-data files with angular using $http
  18. AngularJS leaves comments in HTML: is it possible to remove them?
  19. Usage of $broadcast(), $emit() And $on() in AngularJS
  20. Injecting $state (ui-router) into $http interceptor causes circular dependency
  21. How to handle $resource service errors in AngularJS
  22. AngularJS: ngInclude vs directive
  23. How to create a AngularJS promise from a callback-based API
  24. What is ng-transclude?
  25. How can I preserve new lines in an AngularJS partial?
  26. Exclamation mark after hash (#!) in angularjs app
  27. How to share data between two modules in AngularJS?
  28. AngularJS ng-model-options getter-setter
  29. Angular reload current route and reload the current template
  30. Angular and mixing jQuery UI – Why not?

Leave a Comment