当分割成单独的文件时，Angular无法找到我的控制器

Question

我在这里发布了类似问题的答案：How to create separate AngularJS controller files?

但是我仍然无法将控制器拆分为单独的文件。我已经开始将一个控制器从其余控制器拆分到它自己的文件中，但现在没有一个控制器被加载。

我的js文件正在我的index.html文件中以正确的顺序加载，app.js出现在我的控制器文件之前。

    <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>

我的app.js文件：

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'
        });
}]);

我的主控制器文件app.controllers.js看起来像这样（内容为简洁而省略）：

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 ) {

    });

我将其分成自己文件的控制器如下所示：

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

    });

我得到的错误是：＆＃34;参数＆＃39; TopNavCtrl＆＃39;不是一个功能，未定义＆＃34;这是index.html中遇到的第一个控制器。

Answer 1

当您在单独的文件中声明控制器时，您需要使用此表示法：

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

注意，angular.module('myWebApp.controllers')没有[]作为第二个参数（getter）。这意味着检索以前注册的模块myWebApp.controllers。但是，angular.module('myWebApp.controllers', [])（setter）表示＆＃34;创建新模块myWebApp.controllers＆＃34;，它会覆盖之前已注册的任何内容。

Answer 2

你非常亲密。

在您分离的控制器文件中，每次都会通过添加“[]”作为第二个参数来覆盖父myWebApp.controllers模块。这导致仅注入最后一个分离的控制器。因此"Argument 'TopNavCtrl' is not a function, got undefined"错误

你应该使用setter ......

  

angular.module（'myWebApp.controllers'，[]）

在您的情况下，

仅在app.controllers.js一次。吸气鬼......

  

angular.module（ 'myWebApp.controllers'）

为每个分离的控制器。