angularjs - 如何在angularjs中分离 Controller 文件

Question

我看过各种分离文件的例子。我可以理解它们，但问题出在我的代码方式上。我想将这些 Controller 分开在不同的文件中。

'use strict';
angular.module('myModule', ['ui.bootstrap']);
var myApp = angular.module('myApp', []);

myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

myApp.config(['$routeProvider',

function ($routeProvider) {
$routeProvider.when('/getplaces', {
    templateUrl: 'templates/getplaces.html',
    controller: 'ListCtrl'
})

The below controller needs to be in a different file.

///////////// MONTHLY DATA /////////////////////////////////////

myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/getmonth', {
    templateUrl: 'templates/getmacs.html',
    controller: 'MonthlyCtrl'
})
}])
.controller('MonthlyCtrl', function ($scope, $http) {  $scope.visible = true; 
})

我有超过 20 个像上面这样的 Controller 。但我如何将它们分开。

Answer 1

这是你应该如何做的，

第一次声明

angular.module('appName', ['Module1', 'Module2', 'Service1']);

后续声明

这里所有的 Controller 和服务都可以位于单独的文件中。

angular
    .module('Module1', [])
    .controller('AbcController', ['$scope', '$timeout', 'Service1', function ($scope, $timeout, service1) {} ]);

angular
    .module('Module2', [])
    .controller('EfgController', ['$scope', '$timeout', 'Service1', function ($scope, $timeout, service1) {} ]);

angular.module('Service1', [])
  .service('XYZService', ['$http', function LmnoService($http) {

  } ]);