I attempted to create a script that would load the necessary files for my AngularJS application.
However, I encountered an error when running the Angular.bootstrap portion of the script.
Detailed error information on the AngularJS homepage
The error occurs because AngularJS is unable to locate my masterController. I have verified that the module name and controller name match, so I am puzzled as to why it is unable to recognize the controller.
This is what my code looks like:
Index.html
<!doctype html>
<html ng-controller="masterController">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<meta name="author" content="Michael Tot Korsgaard">
<title>Mythodea map explorer</title>
<link rel="icon" type="image/png" href="favicon.png">
<script src="lib/JQuery/1.12.3/jquery.min.js"></script>
<script src="lib/AngularJS/1.5.5/angular.min.js"></script>
<script src="lib/AngularJS/1.5.5/angular-animate.min.js"></script>
<script src="lib/AngularJS/1.5.5/angular-aria.min.js"></script>
<script src="lib/UI-Router/0.2.18/ui-router.min.js"></script>
<script src="lib/moment/2.13.0/moment.js"></script>
<script src="js/log.js"></script>
<script src="js/build.js"></script>
</head>;
<body ng-cloak>
<div ui-view></div>
</body>;
</html>;
core.js
var app = angular.module('AcademiaUnitate', [
'ui.router',
'ngAnimate'
]);
master.controller.js
angular.module('AcademiaUnitate')
.controller('masterController', function ($scope) {
});
build.js includes my Angular files added to the <head> tag
var buildStart = moment(),
fileCounter = 0;
initialize();
function initialize(){
loadJson('app')
.done(function(response){
var files = response.files,
folders = response.folders;
getFiles(files, 'app')
.done(function(response){
getFolders(folders, 'app')
.done(function(response){
bootstrap();
});
})
});
}
function getFolders(folders, path){
var deferred = $.Deferred();
if(folders.length > 0){
loadFolder(path + '/' + folders[0])
.done(function(response){
folders.splice(0, 1);
getFolders(folders, path)
.done(function(response){
deferred.resolve(response);
});
});
} else {
deferred.resolve(true);
}
return deferred.promise();
};
function getFiles(files, path){
var deferred = $.Deferred();
if(files.length > 0){
loadFile(path + '/' + files[0])
.done(function(response){
files.splice(0, 1);
getFiles(files, path)
.done(function(response){
deferred.resolve(response);
});
});
} else {
deferred.resolve(true);
}
return deferred.promise();
};
function loadFile(src){
var defer = $.Deferred(),
fileType = src.substring(src.lastIndexOf(".") + 1, src.length);
var head = $('head');
fileCounter++;
if(fileType.toLowerCase() === 'js'){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
defer.resolve(true);
} else {
defer.resolve(true);
}
return defer.promise();
};
function loadFolder(path){
var defer = $.Deferred();
loadJson(path)
.done(function(response){
var folders = response.folders,
files = response.files;
if(folders !== undefined){
getFolders(folders, path)
.done(function(response){
if(files !== undefined){
getFiles(files, path)
.done(function(response){
defer.resolve(response);
});
} else {
defer.resolve(response);
}
});
} else {
if(files !== undefined){
getFiles(files, path)
.done(function(response){
defer.resolve(response);
});
} else {
defer.resolve(response);
}
}
});
return defer.promise();
};
function loadJson(path){
var defer = $.Deferred();
$.get(path + '/structure.json', function(response) {
defer.resolve(response);
});
return defer.promise();
};
function bootstrap(){
$(document).ready(function(){
var bootstrapStart = moment();
angular.bootstrap(function(){
});
});
};
The purpose of my build.js file is to locate the structure.json file, which specifies the js files to add to the <head> tag and then identify additional structure.json files in folders. Once this process is complete, Angular will be bootstrapped.