2016-06-12 3 views
0

Also habe ich versucht, ein Skript zu machen, die die Dateien für meine AngularJS Anwendung geladen würde.AngularJS - Controller kann nicht gefunden werden

Aber wenn ich die Angular.bootstrap Teil laufen bekomme ich diesen Fehler

Error description at AngularJS home page

Dieser Fehler ist aufgrund AngularJS nicht in der Lage meine masterController, warum dies zu finden. Ich habe überprüft, dass der Name des Moduls übereinstimmt, sowie den Namen des Controllers und sie tun. Ich bin also sehr verwirrt darüber, warum ich den Controller nicht erkennen werde.

Mein Code sieht wie folgt aus:

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 wo meine Winkel Dateien auf meinem <head> Tag hinzugefügt werden

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

Was meine build.js Datei tut, ist die Datei structure.json zu finden, die auf die die js Dateien erzählt hinzufügen Tag und dann welche Ordner für zusätzliche structure.json Dateien suchen. Wenn alles erledigt ist, wird angular bootstrapped.

+0

Versuchen Sie, 'angular.module ('AcademiaUnitate') zu entfernen troller' und 'app.controller' hinzufügen. – Harish

+0

Der Grund dafür ist, dass die beiden in separaten Dateien sind –

+0

Kein Problem damit. Du kannst so schreiben. – Harish

Antwort

0

ich das Problem gefunden, es war die Art, wie ich meine Bewerbung Bootstrap hatte

angular.bootstrap(function(){}); 

in

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

Sie sollten wahrscheinlich betrachten Sie Ihre Controller richtig

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

}); 

Bitte beachten Sie die Controller-Dokumentation für die neueste angular1 Version bei https://docs.angularjs.org/guide/controller und ein Beispiel bei https://docs.angularjs.org/tutorial/step_02 Namensgebung

Wenn alle Winkel Code in einer Datei, Vielleicht möchten Sie folgendes tun: 1) Kette den Controller nach/an das angular.module()

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

}); 

OR 2) verwenden, um die variable app

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

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

}); 
+0

Mit einer benannten oder anonymen Funktion wurde es nicht behoben, aber Sie haben Recht, es wäre besser, benannte Funktionen zu verwenden. Ich habe meine Frage aktualisiert, um mein Problem zu klären ;-) +1 für gute Praxis :-) –

1

Die die masterController Funktion enthält Datei fehlt, wenn die Anwendung Angular wird bootstraping. Fügen Sie die Datei ein. Hilfe dieser Hilfe

+0

Das liegt daran, dass ich es über das Skript 'build.js' hinzufüge. Ich habe meine Frage aktualisiert, um mein Problem zu klären ;-) +1 –

1

Sie haben core.js nicht in Ihre index.html aufgenommen. Deshalb wird dein Controller nicht gefunden. Probiere es aus.

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

Das liegt daran, dass ich es über das Skript 'build.js' hinzufüge. Ich habe meine Frage aktualisiert, um mein Problem zu klären ;-) +1 –

+1

Ich war mir der aktualisierten Frage nicht bewusst. Aber immer noch danke, hoffe es hilft jemand anderem:) – Prasheel

1

Sie wahrscheinlich vergessen ng-app="AcademiaUnitate" hinzufügen, nur <html ng-controller="masterController"> ändern <html ng-app="AcademiaUnitate" ng-controller="masterController">

+0

Wenn ich 'ng-app' zu meinem' ' Tag hinzufüge, wird es beginnen, die Anwendung zu starten, bevor ich die benötigten 'js'-Skripte hinzugefügt habe. Ich habe meine Frage aktualisiert, um mein Problem zu klären ;-) +1 für die Erkennung von 'ng-app' fehlt –