title: How to separate Controller file in angularjs
body: <p>I have looked at various examples of separating the files. I can understand them but the problem comes with the way my code is. I want separate these controllers in different files.</p>
  
  <pre><code>'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'
  })
  </code></pre>
  
  <blockquote>
    <p>The below controller needs to be in a different file.</p>
  </blockquote>
  
  <pre><code>///////////// MONTHLY DATA /////////////////////////////////////
  
  myApp.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/getmonth', {
      templateUrl: 'templates/getmacs.html',
      controller: 'MonthlyCtrl'
  })
  }])
  .controller('MonthlyCtrl', function ($scope, $http) {  $scope.visible = true; 
  })
  </code></pre>
  
  <p>I have more than 20 controllers like above. but how do I separate them.</p>