Dynamically load assets (CSS+images+controllers) on route resolve

Question

I wrote a little factory to dynamically load assets in angular resolve. Is it well structured and can it be made prettier?

app.factory('loadAssets', function ($q) {

    var jsPath = "scripts/",
        cssPath = "css/",
        imagesPath = "images/",
        head = document.getElementsByTagName("head")[0]; // define starting paths for each file tile

    return {
        startLoad: function (url) {

                var fileType = url.split(".");
                fileType = fileType[fileType.length - 1]; // we must get (length - 1) because filenames like jquery.min.js     

                /* prevent duplicate loading - 
                   check if url exist in already loaded assets

                   1. If asset exist, return true and quit.
                   2. If asset doesn't exist - add it.
                   3. If loadedAssets is undefined (first time you load something) - create this array.
                */

                if (this.loadedAssets == undefined || this.loadedAssets == null) {
                    this.loadedAssets = [];
                }

                if (this.loadedAssets.indexOf(url) >= 0) { // note that indexOf supported only in ie9+ , add fallback if you want to support legacy browsers.
                    return true;
                } else {

                    this.loadedAssets.push.apply(this.loadedAssets, [url]);

                    // load js files
                    if (fileType == "js") {
                        var jsFile = document.createElement("script");
                        jsFile.src = jsPath + url;
                        head.appendChild(jsFile);
                        var waitforload = $q.defer();

                        jsFile.onload = function () {
                            waitforload.resolve(jsFile);
                        };
                        jsFile.onerror = function (e) {
                            waitforload.reject(e);
                            console.log("Could not load " + jsFile.src);
                        };

                        return waitforload.promise;
                    }

                    // load css files
                    if (fileType == "css") {
                        var cssFile = document.createElement("link");
                        cssFile.setAttribute("rel", "stylesheet");
                        cssFile.setAttribute("type", "text/css");
                        cssFile.setAttribute("href", cssPath+url);
                        head.appendChild(cssFile);
                    }


                    // load images
                    if (fileType == "jpg" || fileType == "jpeg" || fileType == "png" || fileType == "gif") {
                        var waitforload = $q.defer();
                        var image = new Image();
                        image.src = imagesPath + url;

                        image.onload = function () {
                            waitforload.resolve(image);
                        };
                        image.onerror = function (e) {
                            waitforload.reject(e);
                            console.log("Could not load " + image.src);
                        };

                        return waitforload.promise;
                    }
                }

        },
        loadedAssets: this.loadedAssets
    }

});

USAGE

app.config(function ($routeProvider, $controllerProvider) {

    $routeProvider.when('/somepath', {
        resolve: {
            load: function ($q, loadAssets) {
                files = ['somePathController.js', 'somePath.css', 'somePath.jpg'];
                return $q.all(files.map(loadAssets.startLoad));
            }
        },
        templateUrl: 'views/somePath.html'
    }).otherwise({
        redirectTo: '/somepath'
    });

    app.controllerProvider = $controllerProvider.register; // create reference to $controllerProvider.register - so we can dynamically register controllers oustide the app.config

});

somePathController.js

app.controllerProvider('somePathCtrl', function () {
    // controller functionality here
});

somePath.html (view)

<div ng-controller="somePathCtrl">HTML HERE.</div>

Answer 1

From a once over:

• This

  var fileType = url.split(".");
  fileType = fileType[fileType.length - 1]; // we must get (length - 1) because filenames like jquery.min.js     
  

  could be

  //Get the last . separated string
  var fileType = url.split(".").slice(-1);
  

  .slice(-1) retrieves the last element in an array

• This

  if (this.loadedAssets == undefined || this.loadedAssets == null) {
    this.loadedAssets = [];
  }
  

  could be

   this.loadedAssets == this.loadedAssets || [];
  

  this will assign [] if this.loadedAssets evaluates to false (by being null or undefined)

• This

  if (this.loadedAssets.indexOf(url) >= 0) { // note that indexOf supported only in ie9+ , add fallback if you want to support legacy browsers.
    return true;
  } else {
  

  should be

  // indexOf suppor only in ie9+ , add fallback if you want to support legacy browsers.
  if (this.loadedAssets.indexOf(url) >= 0) { 
    return true;
  } 
  

  The comment is on top which reads easier, but more importantly there is no else. The else was superfluous since you exit the function anyway if the url was already loaded

• I would encode all the image extensions from if (fileType == "jpg" || fileType == "jpeg" || fileType == "png" || fileType == "gif") { into an array and use indexOf.

All in all, I like the code. `

Answer 2

I have found a trick that may work for your case. This code is only for CSS, but it should be easy to extend with the other cases.

1. Injects the resource into the head.
2. Hooks into onload event (not working on all browsers) .
3. Polls document.styleSheets for changes.
4. Everything is wrapped in a promise within a Service

The routing would look like:

// Routing setup
.config(function ($routeProvider) {
    $routeProvider
    .when('/home', {
        controller: 'homeCtrl', 
        templateUrl: 'home.tpl.html'
    }).when('/users', {
        controller: 'usersCtrl', 
        templateUrl: 'users.tpl.html',
        resolve: {
          load: function (injectCSS) {
            return injectCSS.set("users", "users.css");
          }
        }
    }).otherwise({
        // default page
        redirectTo: '/home'
    });
})

On the Service:

.factory("injectCSS", ['$q', '$http', 'MeasurementsService', function($q, $http, MeasurementsService){
  var injectCSS = {};

  var createLink = function(id, url) {
    var link = document.createElement('link');
    link.id = id;
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    return link;
  }

  var checkLoaded = function (url, deferred, tries) {
    for (var i in document.styleSheets) {
      var href = document.styleSheets[i].href || "";
      if (href.split("/").slice(-1).join() === url) {
        deferred.resolve();
        return;
      }
    }
    tries++;
    setTimeout(function(){checkLoaded(url, deferred, tries);}, 50); 
  };

  injectCSS.set = function(id, url){
    var tries = 0,
      deferred = $q.defer(),
      link;

    if(!angular.element('link#' + id).length) {
      link = createLink(id, url);
      link.onload = deferred.resolve;
      angular.element('head').append(link);
    }
    checkLoaded(url, deferred, tries);

    return deferred.promise;
  };

  return injectCSS;
}])

Full code is available here