So I've tried to make a script which would load the files needed for my AngularJS
application.
But when I run the Angular.bootstrap
part I get this error
Error description at AngularJS home page
This error is due to AngularJS
not being able to find my masterController
why is this. I've checked that the name of the module match, as well as the name of the controller and they do. So I'm very confused as to why I won't recognize the controller.
My code looks like this:
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 where my angular files are being added to my <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(){
});
});
}
What my build.js file does is to find the file structure.json
which tells which js
files to add to the <head>
tag and then which folders to look for additional structure.json
files. When all that is done angular will be bootstrapped.
I found the problem, it was the way I bootstrapped my application had to change
angular.bootstrap(function(){});
into
angular.bootstrap(document, ['AcademiaUnitate']);