AngularJS

Question

所以我尝试制作一个脚本来加载我的 AngularJS 应用程序所需的文件。

但是当我运行 Angular.bootstrap 部分时我得到这个错误

Error description at AngularJS home page

此错误是由于 AngularJS 无法找到我的 masterController 为什么会这样。我已经检查过模块的名称以及控制器的名称是否匹配，它们确实匹配。所以我很困惑为什么我不认识控制器。

我的代码如下所示：

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 我的 angular 文件被添加到我的 <head> 标签

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 文件添加到 <head> 标记，然后要查找哪些文件夹额外 structure.json 个文件。当所有这些都完成后，angular 将被引导。

Answer 1

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

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

});

请在 https://docs.angularjs.org/guide/controller and an example at https://docs.angularjs.org/tutorial/step_02

查看最新 angular1 版本的控制器文档

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

之后/

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

});

或 2) 使用应用程序变量

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

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

});

Answer 2

Angular 引导应用程序时，缺少包含主控制器功能的文件。包括文件。帮帮这个帮

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 - 找不到控制器

AngularJS - Controller can't be found

javascript

angular-bootstrap