Question

所以我试图创建一个脚本来加载我的AngularJS应用程序所需的文件。

但是当我运行masterController部分时，我收到此错误

Error description at AngularJS home page

此错误是由于<!doctype html> <html ng-controller="masterController"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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>无法找到我的var app = angular.module('AcademiaUnitate', [ 'ui.router', 'ngAnimate' ]);原因造成的。我已经检查过模块的名称是否匹配，以及控制器的名称和它们的名称。所以我很困惑为什么我不认识控制器。

我的代码如下所示：

的index.html

angular.module('AcademiaUnitate')
.controller('masterController', function ($scope) {
});

core.js

<head>

master.controller.js

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(){
        });
    });
}

build.js 我的角色文件被添加到我的structure.json标记

js

我的build.js文件的作用是找到文件<head>，该文件告诉哪些structure.json文件要添加到{{1}}标记，然后查找哪些文件夹以查找其他{{1}文件。当所有完成角度的时候都会被引导。

Answer 1

您应该考虑正确命名控制器

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

});

请参阅控制器文档，了解https://docs.angularjs.org/guide/controller处的最新angular1版本以及https://docs.angularjs.org/tutorial/step_02处的示例

如果您的所有角度代码都在一个文件中，您可能需要执行以下操作： 1）在/之后将控制器链接到angular.module（）

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

});

或2）使用app变量

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

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

});

Answer 2

当Angular引导应用程序时，缺少包含masterController函数的文件。包括文件。帮助这个帮助

Answer 3

您尚未在index.html中包含core.js.这就是找不到你的控制器的原因。尝试包括它。

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

Answer 4

您可能忘记添加ng-app="AcademiaUnitate"，只需将<html ng-controller="masterController">更改为<html ng-app="AcademiaUnitate" ng-controller="masterController">

Answer 5

我发现了问题，这是我引导我的应用程序必须改变的方式

angular.bootstrap(function(){});

到

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

AngularJS - 无法找到Controller

5 个答案: