Load javascript files before angular.module

Question

I want to create a sort of js library. The user should just include ONE js file and he can use all my functions.

I'm using angularjs.

In my angular.module, I have several "Injectors" (correct me if it's not the name) define as follow :

var app = angular.module('WDX', ['ui.bootstrap', 'ngRoute', 'ng-currency', 'ngSanitize']);

To make it working, I need to include some JS files (like "ng-currency.js") before the angular js file. BUT, I want the user has just to include this angularjs file (or just ONE other, no more)...

I tried to create a new JS file to load everything before my angularjs file, like that :

$.getScript("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js", function () { });
$.getScript("/Scripts/ng-currency.js", function () { });
$.getScript("/Scripts/kendo.all.min.js", function () { });
$.getScript("/Scripts/placeholder.js", function () { });
$.getScript("/Scripts/angular-sanitize.js", function () { });

But I still have this error :

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=test&p1=Error%3A%20…0d%20(http%3A%2F%2Flocalhost%3A46223%2FScripts%2Fangular.min.js%3A17%3A381)

If I include all scripts in the html, before the angularjs file, it works, but I don't want that :/

Any solution ?

Thanks for you answers !!

So the user includes one JavaScript file that downloads 6 other libraries? If these are hard dependencies then it may be better to just bundle them all into one script file that the user then includes. Better yet, use a tool like npm or bower that will let your user locate these dependencies and bundle them themselves. — Nick Tomlin
– Nick Tomlin, Commented Jul 4, 2015 at 3:24

ALI MAKEEN · Accepted Answer · 2015-07-03 16:51:26Z

1

have you tried to do manual bootstrapping and run your scripts before angular.bootstrap as the following?

angular.element(document).ready(function() {
      // add your script here
      angular.bootstrap(document, ['WDX']);
    });


// OR you could add event listener in your app.js as follows:

function onDocumentReady() {
    // add your script here
    angular.bootstrap(document, ["WDX"]);     
}
document.addEventListener('DOMContentLoaded', onDocumentReady, false);

var app = angular.module('WDX', ['ui.bootstrap', 'ngRoute', 'ng-currency', 'ngSanitize']);

Note: remove ng-app from your DOM when doing manual bootstrapping

answered Jul 3, 2015 at 16:51

ALI MAKEEN

4033 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load javascript files before angular.module

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related