How to include JavaScript in HTML with AngularJS?

Other Questions JavaScript
1

Hey guys, I’m having trouble with AngularJS and including JavaScript in my HTML. I’ve tried two methods to add my config.js file, but only one method works. Here’s what I’m doing:

  1. This method works fine:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script src="js/settings.js"></script>
</head>
<body>
</body>
</html>
  1. But when I try this method, I get an error:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script>
        var scriptTag = document.createElement("script");
        scriptTag.src = "js/settings.js";
        document.head.appendChild(scriptTag);
    </script>
</head>
<body>
</body>
</html>

The error indicates that the module cannot be found, even though my browser shows the script is loaded in both cases. Does anyone know why the second method isn’t working?

2

I’ve encountered this issue before. The problem lies in the asynchronous nature of dynamically loading scripts. When you use the second method, AngularJS initializes before your settings.js file is fully loaded and executed. This causes the module not found error.

To resolve this, you could wrap your AngularJS initialization in a callback function that executes after your script is loaded. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script>
        function loadScript(src, callback) {
            var script = document.createElement('script');
            script.src = src;
            script.onload = callback;
            document.head.appendChild(script);
        }

        loadScript('js/settings.js', function() {
            angular.bootstrap(document, ['myApp']);
        });
    </script>
</head>
<body>
</body>
</html>

This approach ensures your settings are loaded before AngularJS initializes, avoiding the module not found error.

3

As someone who’s worked extensively with AngularJS, I can shed some light on this issue. The problem you’re facing is related to the asynchronous nature of script loading.

When you use the first method, all scripts are loaded synchronously, ensuring your settings.js is available when AngularJS initializes. However, in the second method, the dynamic script insertion happens asynchronously, which can lead to timing issues.

A solution I’ve found effective is to use AngularJS’s built-in dependency injection system. You can create a constant or value in your Angular module that holds the configuration data. This way, you don’t need to worry about script loading order. Here’s an example:

angular.module('myApp', [])
    .constant('appConfig', {
        // Your configuration data here
    });

Then, you can inject ‘appConfig’ wherever you need it in your Angular application. This approach has always worked well for me and avoids the headaches of script loading timing issues.

4

hey alex, i’ve run into similar issues. the problem with ur 2nd method is timing. angularjs might be initializing before ur script loads. try moving the dynamic script insertion to the end of ur body tag or use angular’s $script service for async loading. that should fix it!