Angular kann nicht mein Controller finden, wenn sie in separaten Dateien aufgeteilt

Question

ich die Antwort für eine ähnliche Frage hier gepostet folgenden wurde: How to create separate AngularJS controller files?

aber ich bin immer noch nicht in der Lage meine Controller in separate Dateien aufzuteilen. Ich habe damit begonnen, einen einzelnen Controller aus dem Rest in seine eigene Datei aufzuteilen, aber jetzt wird keiner der Controller geladen.

Meine js-Dateien werden in der richtigen Reihenfolge in meiner index.html-Datei geladen, wobei app.js vor meinen Controller-Dateien steht.

<script src="libraries/jquery/1.11.3/jquery-1.11.3.min.js"></script> 
    <script src="libraries/angular/1.4.8/angular.min.js"></script> 
    <script src="libraries/angular-ui-router/0.2.14/angular-ui-router.min.js"></script> 
    <script src="libraries/angular-scroll/angular-scroll.min.js"></script> 
    <script src="libraries/uiboostrap/0.14.3/ui-bootstrap-tpls-0.14.3.min.js"></script> 
    <script src="libraries/dirPagination/dirPagination.js"></script> 
    <script src="libraries/angular-loading-bar/loading-bar.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/app.services.js"></script> 
    <script src="js/app.controllers.js"></script> 
    <script src="partials/events/StageBarCtrl.js"></script> 

Meine app.js Datei:

var app = angular.module('myWebApp', [ 
    'myWebApp.services', 
    'myWebApp.controllers', 
    'ui.router', 
    'duScroll', 
    'ui.bootstrap', 
    'angularUtils.directives.dirPagination', 
    'angular-loading-bar' 
]); 

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/404'); 

    $stateProvider 
     .state('home', { 
      url: '/', 
      templateUrl: 'partials/home.html', 
      controller: 'HomePageCtrl' 
     }) 
     .state('event', { 
      url: '#/events/event', 
      views: { 
       '': { 
        templateUrl: 'partials/events/event.html', 
        controller: 'EventCtrl' 
       }, 
       'stageBar@event' : { 
        templateUrl: 'partials/events/stage-bar.html', 
        controller: 'StageBarCtrl' 
       } 
      } 
     }) 
     .state('userProfiles', { 
      url: '/admin/users', 
      templateUrl: 'partials/admin/user-profiles.html', 
      controller: 'UserProfilesCtrl' 
     }) 
     .state('editTeams', { 
      url: '/admin/teams', 
      templateUrl: 'partials/admin/edit-teams.html', 
      controller: 'TeamProfilesCtrl' 
     }) 
     .state('editDepartments', { 
      url: '/admin/departments', 
      templateUrl: 'partials/admin/edit-departments.html', 
      controller: 'DepartmentProfilesCtrl' 
     }) 
     .state('editDivisions', { 
      url: '/admin/divisions', 
      templateUrl: 'partials/admin/edit-divisions.html', 
      controller: 'DivisionProfilesCtrl' 
     }); 
}]); 

Meine Haupt app.controllers.js Controller-Datei sieht wie folgt aus (Inhalt der Kürze halber elided):

angular.module('myWebApp.controllers',[]). 
    controller('TopNavCtrl', function ($scope, $location) { 

    }). 

    controller('scrollCtrl', function($scope, $document) { 

    }). 

    controller('AdminTableCtrl', function ($scope, coreAPIservice) { 

    }). 

    controller('EditDivisionsCtrl', function ($scope, coreAPIservice) { 

    }). 


    controller('EditDepartmentsCtrl', function ($scope, coreAPIservice) { 

    }). 

    controller('EditTeamsCtrl', function ($scope, coreAPIservice) { 

    }). 

    controller('HomePageCtrl', function ($scope, $location, $http) { 

    }). 

    controller('EventCtrl', function ($scope, $window, $location, $http, coreAPIservice) { 

    }). 

    controller('UserProfilesCtrl', function ($scope, $location, $http, coreAPIservice) { 

    }). 

    controller('TeamProfilesCtrl', function ($scope, $location, $http) { 

    }). 

    controller('DepartmentProfilesCtrl', function ($scope, $location, $http) { 

    }). 

    controller('DivisionProfilesCtrl', function ($scope, $location, $http) { 

    }). 

    controller('NotFoundCtrl', function ($scope, $location, $http) { 

    }); 

Der Controller I getrennt in seine eigene Datei sieht so aus:

angular.module('myWebApp.controllers', []). 
    controller('StageBarCtrl', function($scope, $window, $location, $http, eventFactory) { 

    }); 

Der Fehler, den ich bekomme, ist: "Argument 'TopNavCtrl' ist keine Funktion, undefined" das ist der erste Controller in index.html.

Answer 1

Wenn Sie Controller in separaten Dateien deklarieren müssen Sie diese Schreibweise verwenden:

angular.module('myWebApp.controllers'). 
controller('StageBarCtrl', function($scope, $window, $location, $http, eventFactory) { 
    // ... 
}); 

Hinweis, angular.module('myWebApp.controllers') ohne [] als zweiten Parameter (Getter). Es bedeutet, das zuvor registrierte Modul myWebApp.controllers abzurufen. angular.module('myWebApp.controllers', []) (Setter) bedeutet jedoch "neues Modul myWebApp.controllers erstellen", das alles überschreibt, das zuvor registriert wurde.

Answer 2

Sie sind so sehr in der Nähe.

In Ihren getrennten Controller-Datei (en) überschreiben Sie jedes Mal das übergeordnete Modul myWebApp.controllers, indem Sie das "[]" als zweites Argument hinzufügen. Dies führt dazu, dass nur der zuletzt getrennte Controller injiziert wird. So ist die "Argument 'TopNavCtrl' is not a function, got undefined" Fehler

Sie sollten die Setter verwenden ...

angular.module ('myWebApp.controllers', [])

nur einmal in app.controllers.js, in Ihrem Fall . Und der Getter ...

angular.module ('myWebApp.controllers')

für jeden getrennten Controller.