Reputation: 4014

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.

Upvotes: 0

Answers (5)

Michael Tot Korsgaard

Reputation: 4014

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

angular.bootstrap(function(){});

into

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

Upvotes: 0

sabbir

Reputation: 2025

you probably forget to add ng-app="AcademiaUnitate", just change <html ng-controller="masterController"> to <html ng-app="AcademiaUnitate" ng-controller="masterController">

Upvotes: 1

Prasheel

Reputation: 1020

You haven't included core.js in your index.html. That is why your controller is not found. Try including it.

<script src="core.js"></script>

Upvotes: 1

One

Reputation: 273

You should probably consider naming your controller properly

angular.module('AcademiaUnitate')
  .controller('MasterController', function MasterController($scope) {

});

Please see the controller documentation for the latest angular1 version at https://docs.angularjs.org/guide/controller and an example at https://docs.angularjs.org/tutorial/step_02

If all your angular code is in one file, you may want to do the following: 1) chain the controller after/ to the angular.module()

angular.module('AcademiaUnitate', [
    'ui.router',
    'ngAnimate'
]).controller('MasterController', function MasterController($scope) {

});

OR 2)use the app variable

var app = angular.module('AcademiaUnitate', [
    'ui.router',
    'ngAnimate'
]);

app.controller('MasterController', function MasterController($scope) {

});

Upvotes: 1

Cyril Ajieh

Reputation: 11

The file containing the masterController function is missing when Angular is bootstraping the application. Include the file. Help this help

Upvotes: 1

AngularJS - Controller can&#39;t be found

Answers (5)

Related Questions

AngularJS - Controller can't be found