Search code examples
javascriptangularjsangular-bootstrap

AngularJS - Controller can't be found


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.


Solution

  • I found the problem, it was the way I bootstrapped my application had to change

    angular.bootstrap(function(){});
    

    into

    angular.bootstrap(document, ['AcademiaUnitate']);