我在这里发布了类似问题的答案：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中遇到的第一个控制器。
答案 0 :(得分：3)
当您在单独的文件中声明控制器时，您需要使用此表示法：
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;，它会覆盖之前已注册的任何内容。
答案 1 :(得分：1)
你非常亲密。
在您分离的控制器文件中，每次都会通过添加“[]”作为第二个参数来覆盖父myWebApp.controllers模块。这导致仅注入最后一个分离的控制器。因此"Argument 'TopNavCtrl' is not a function, got undefined"错误
你应该使用setter ......
在您的情况下，angular.module（'myWebApp.controllers'，[]）
仅在app.controllers.js一次。吸气鬼......
angular.module（ 'myWebApp.controllers'）
为每个分离的控制器。