Add AngularJS files while loading

Question

So I'm trying to load all the AngularJS scripts which I need in my app when the index.html file loads.

For this I've made this piece of code

 <head>
        ...
           AngularJS libaries loads
        ...

        <script>
            var main = {
                    root: [
                        'core.js'
                    ]
                };

            var iterateScripts = function(folder, path){
                for(var key in folder){
                    if(key.toLowerCase() === 'root'){
                        for(var i = 0; i < folder[key].length; i++){
                            var script = document.createElement('script');
                            script.type = 'text/javascript';
                            script.src = path + '/' + folder[key][i];
                            // console.info('script : '+ script.src)
                            document.getElementsByTagName('head')[0].appendChild(script);
                        }
                    } else {
                        var newPath = path + '/' + key;
                        // console.info('path : ', newPath, folder[key])
                        iterateScripts(folder[key], newPath);
                    }
                }
            };

            iterateScripts(main, 'app/main');
            console.info(document.getElementsByTagName('head')[0])
        </script>
   </head>

This loads the files okay, but I get this error

AngularJS error explanation

After testing back and forth I've concluded that the problem is because the page loads while AngularJS is compiling, which creates the error.

If this is true, how can I load my angular app in a similar fashion before the body tag loads?

This is not an answer, but there are better options. Consider using something like require.js or JSPM if you're willing to use ES6 imports. — user677526
– user677526, Commented Apr 19, 2016 at 13:11

Mathew Berg · Accepted Answer · 2016-04-19 13:12:57Z

1

You'll have to bootstrap angular yourself instead of using ng-app. Here is the documentation on it: https://docs.angularjs.org/guide/bootstrap.

Once all your scripts are finished loading then you'll run a piece of code that looks similar to this:

angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
});

Which tells angular it is ready to start.

answered Apr 19, 2016 at 13:12

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

4 Comments

Michael Tot Korsgaard Over a year ago

That worked, had to set a timer thou to ensure that the files had loaded ^^

Mathew Berg Over a year ago

Don't set a timer, use the onload property.

Michael Tot Korsgaard Over a year ago

How would I check if all the files has loaded before running the bootstrap?

Mathew Berg Over a year ago

What I said above, use the onload property for each script. Simplest solution would be to use a counter. If the counter equals total javascript files you needed to load then you can bootstrap.

Collectives™ on Stack Overflow

Add AngularJS files while loading

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related