In developing my app, I am primarily working with two key JavaScript files: resources_loader.js and app.js. The role of resources_loader.js is to load some JSON files that are utilized by app.js.
However, the issue arises when considering the sequence in which these scripts should execute. App.js (which encompasses Angular.js functionalities) must run only after resources_loader.js has completed its tasks. Initially, I attempted to incorporate Angular code within the success callback function of resources_loader.js (which employs a deferred), but this approach did not yield favorable results. Below is an excerpt from my index.html file:
<!doctype html>
<html ng-app="myapp">
<body>
<script src="angular.js"></script>
<script src="resources_loader.js"></script>
</body>
</html>
Having relocated app.js into resources_loader.js, within the success callback function, whenever I attempt to execute it, Angular throws the following exception: Uncaught Error: No module: myapp.
My assumption is that angular.module('myapp', []) should be executed before the onload event, which does not align with the current implementation.
Furthermore, I am looking to incorporate yepnope.js into my project, like so:
<script "yepnope.js"></script>
<script "resources_loader.js"></script>
<script>
var loader = load_stuff();
yepnope({
test: loader.resolved(),
yep: ['angular.js', 'app.js', 'foo.js', 'bar.js'],
nope: ['fail.js']
});
</script>
The script app.js houses Angular code, and I believe implementing it in this manner enhances performance as it only loads Angular once the necessary resources are available. How can I achieve this effectively?