单独文件中的AngularJS 1.5控制器

Question

我很难理解这一点。我试图将控制器放在单独的文件中，以便它们只处理1件事，理想情况下是部分视图

我的文件夹结构是这样的......

我的app.js文件是这样的。

angular.module('mikevarela', ['ui.router', 'mikevarela.controller.home', 'mikevarela.controller.about', 'mikevarela.controller.audio'])

.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider

    .state('home', {
        url: '/home',
        templateUrl: '../partials/home.partial.html',
        controller: 'HomeController'
    })

    .state('about', {
        url: '/about',
        templateUrl: '../partials/about.partial.html',
        controller: 'AboutController'
    })

    .state('audio', {
        url: '/audio',
        templateUrl: '../partials/audio.partial.html',
        controller: 'AudioController'
    });
});

我的控制器每个都有这样的模块......

angular.module('mikevarela.controller.home', [])

.controller('HomeController', ['$scope', function($scope) {
    $scope.title = 'Mike Varela Home Page';

}]);

我的问题来自初始应用声明。我不想在主阵列应用程序定义中注入所有控制器，这将是繁琐且冗长的。没有办法在控制器文件中定义控制器。有点像这样

angular.module('mikevarela', []).controller('HomeController', ['$scope', function($scope) {

// stuff here

}]);

Answer 1

关于您的控制器......

我认为您未正确加载控制器。

您不需要将控制器声明为依赖项。而是说明module.controller('yourController）`使整个模块中的控制器可用。

如果您的控制器位于单独的文件中，则只需使用script标记加载控制器即可。例如

<script src="app.js"></script>
<script src="controller1.js"></script>
<script src="controller2.js"></script>

关于您的申请结构......

这与您的问题无关，但只是来自使用Angular开发的人，我建议不要按controllers/按功能分组您的应用。请参阅：https://scotch.io/tutorials/angularjs-best-practices-directory-structure

Answer 2

在后续文件中使用angular.module('mikevarela').controller.....。

  

angular.module('mikevarela',[]).controller.....

相当于重新定义您的应用。第二个参数是requires数组。

引用官方angular.module文档

  

需要   （可选的）   ！阵列。=
  如果指定，则创建新模块。如果未指定，则检索模块以进行进一步配置。