Only load items once (reuse promise)

angular-load.js

@@ -6,52 +6,60 @@
 	angular.module('angularLoad', [])
 		.service('angularLoad', ['$document', '$q', '$timeout', function ($document, $q, $timeout) {
 
+			function loader(createElement) {
+				var promises = {};
+
+				return function(url) {
+					if (typeof promises[url] === 'undefined') {
+						var deferred = $q.defer();
+						var element = createElement(url);
+
+						element.onload = element.onreadystatechange = function (e) {
+							$timeout(function () {
+								deferred.resolve(e);
+							});
+						};
+						element.onerror = function (e) {
+							$timeout(function () {
+								deferred.reject(e);
+							});
+						};
+
+						promises[url] = deferred.promise;
+					}
+
+					return promises[url];
+				};
+			}
+
 			/**
 			 * Dynamically loads the given script
 			 * @param src The url of the script to load dynamically
 			 * @returns {*} Promise that will be resolved once the script has been loaded.
 			 */
-			this.loadScript = function (src) {
-				var deferred = $q.defer();
+			this.loadScript = loader(function (src) {
 				var script = $document[0].createElement('script');
-				script.onload = script.onreadystatechange = function (e) {
-					$timeout(function () {
-						deferred.resolve(e);
-					});
-				};
-				script.onerror = function (e) {
-					$timeout(function () {
-						deferred.reject(e);
-					});
-				};
+
 				script.src = src;
+
 				$document[0].body.appendChild(script);
-				return deferred.promise;
-			};
+				return script;
+			});
 
 			/**
 			 * Dynamically loads the given CSS file
 			 * @param href The url of the CSS to load dynamically
 			 * @returns {*} Promise that will be resolved once the CSS file has been loaded.
 			 */
-			this.loadCSS = function (href) {
-				var deferred = $q.defer();
+			this.loadCSS = loader(function (href) {
 				var style = $document[0].createElement('link');
+
 				style.rel = 'stylesheet';
 				style.type = 'text/css';
 				style.href = href;
-				style.onload = style.onreadystatechange = function (e) {
-					$timeout(function () {
-						deferred.resolve(e);
-					});
-				};
-				style.onerror = function (e) {
-					$timeout(function () {
-						deferred.reject(e);
-					});
-				};
+
 				$document[0].head.appendChild(style);
-				return deferred.promise;
-			};
+				return style;
+			});
 		}]);
 })();

package.json

@@ -23,6 +23,7 @@
         "node": ">=0.10.0"
     },
     "scripts": {
-        "test": "grunt test"
+        "test": "grunt test",
+        "build": "grunt build"
     }
 }

tests.js

@@ -60,6 +60,12 @@ describe('service angularLoad', function () {
 			$timeout.flush();
 			expect(rejected).toBeTruthy();
 		});
+
+		it('should only append the script tag once', function() {
+			angularLoad.loadScript('https://www.test.org/somescript.js');
+			angularLoad.loadScript('https://www.test.org/somescript.js');
+			expect(mockDocument.body.appendChild.calls.all().length).toBe(1);
+		});
 	});
 
 	describe('#loadCSS', function() {
@@ -97,5 +103,11 @@ describe('service angularLoad', function () {
 			$timeout.flush();
 			expect(rejected).toBeTruthy();
 		});
+
+		it('should only append the stylesheet link once', function() {
+			angularLoad.loadCSS('https://www.test.org/styles.css');
+			angularLoad.loadCSS('https://www.test.org/styles.css');
+			expect(mockDocument.head.appendChild.calls.all().length).toBe(1);
+		});
 	});
 });