在 angular.module 之前加载 javascript 文件

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 !!

Answer 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