Angularjs 我如何重构我的laravel应用程序的angular代码，以便将控制器放在单独的文件中？

我希望有尽可能结构化的代码，现在我所有的控制器和路由都保存在同一个文件中。我使用Laravel4.2作为后端，使用模板和角度作为应用程序的前端部分

这就是角度脚本现在的样子：

var Application = angular.module('ReporterApplication', ['ngRoute', 'ui.select', 'ngSanitize'], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

Application.config(function($routeProvider) {

    $routeProvider
        .when('/packing/scan.html', {
            templateUrl: 'packing/scan.html',
            controller: 'PackingScanController'
        })

        [ .... ]

});

Application.controller('BootstrapController', ['$scope', function($scope) {
    [ ... ]

}]);


Application.controller('OrdersTrackerController', ['$scope', '$http', function($scope, $http) {

    [ ... ]

}]);

---

您可以创建一个额外的模块，如：

angular.module('ReporterApp.Controllers', [ /* dependencies here */])

然后您可以执行.controller（…等…）。然后将此模块注入“主”模块。这样，您就可以在ReporterApp.controllers模块中拥有包含不同控制器的不同文件

一个简单的例子：

文件1：

angular.module('ReporterApp.Controllers')
    .controller('myCtrl', ['$scope', function($scope) {
       /* code here */
    }]);

文件2：

angular.module('ReporterApp.Controllers')
    .controller('mySecondCtrl', ['$scope', function($scope) {
         /* code here */
    }]);

然后是一个模块文件（对于额外的结构位，例如，如果您还希望在单独的模块中包含其他包含服务的文件），modules.js：

angular.module('ReporterApp.Controllers', [ /*dependencies here */ ]);
angular.module('ReporterApp.Services', [ /* dependencies here */]);

最后是你的主app.js：

var myApp = angular.module('ReporterApplication', 
    ['ReporterApp.Controllers', 'ReporterApp.Services']);

为了让它正常工作，包含的顺序非常重要。确保首先包含module.js文件，以便创建模块，然后是包含控制器的文件，然后是服务，最后是app.js

var myApp = angular.module('ReporterApplication', 
    ['ReporterApp.Controllers', 'ReporterApp.Services']);