title: How can I have multiple controller files?
body: <p><strong>SOLVED</strong></p>
  
  <p>So after viewing your responses and making minor changes to my code, I found a simple typo which prevented me to reach the result I was after. So thank you all to helping with where I was going wrong, I've now got the controllers seperated and everything's working as planned!</p>
  
  <p><strong>----</strong></p>
  
  <p>I am currently developing a hybrid mobile application using Cordova, Ionic and AngularJS within Visual Studio 2015. Due to the vast amount of code I have in my single controller.js file, I want to separate the code so I have a .js controller file per template; instead of everything in one file. Unfortunately, I I do not understand how to pull this off (learning AngularJS still). I've done some researched but the majority of examples I have seen show a very simple demo, which I replicate with my own code but it still doesn't work. So I was hoping if someone can give me an insight where I may be going wrong.</p>
  
  <p><strong>File Structure in /www</strong></p>
  
  <blockquote>
    <ul>
    <li>index.html</li>
    </ul>
    
    <p><strong>/js</strong></p>
    
    <ul>
    <li><p>app.js</p></li>
    <li><p>controllers.js</p></li>
    </ul>
    
    <p><strong>/js/controllers</strong></p>
    
    <ul>
    <li><p>login.js</p></li>
    <li><p>sales.js</p></li>
    </ul>
    
    <p><strong>/templates</strong></p>
    
    <ul>
    <li><p>login.html</p></li>
    <li><p>sales.html</p></li>
    </ul>
  </blockquote>
  
  <p><strong>/js/app .js</strong></p>
  
  <pre><code>angular.module('main', ['ionic', 'main.controllers', 'chart.js', 'ngCordova', 'ngIOS9UIWebViewPatch', 'angular.filter'])
  
      .config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
          $stateProvider
  
          .state('login', {
              cache: false,
              url: "/login",
              templateUrl: "templates/login.html",
              controller: "LoginCtrl"
          })
  
          .state('sales', {
              cache: false,
              url: "/sales",
              templateUrl: "templates/sales.html",
              controller: "SalesCtrl"
          })
  
          $urlRouterProvider.otherwise('/login')
          $ionicConfigProvider.views.swipeBackEnabled(false);
      });
  </code></pre>
  
  <p><strong>/js/controllers.js</strong></p>
  
  <pre><code>angular.module('main.controllers', ['ionic', 'ngCordova']);
  </code></pre>
  
  <p><strong>/js/controllers/login.js</strong></p>
  
  <pre><code>angular.module('main.controllers', [])
  .controller("LoginCtrl", function ($scope, $state, $cordovaSQLite, $timeout, $ionicPopup, $cordovaDevice, $ionicLoading, $cordovaKeyboard, $cordovaToast) {
      $ionicLoading.show({
          template: 'Loading...'
      });
  // DO STUFF
  </code></pre>
  
  <p><strong>/js/controllers/sales/js</strong></p>
  
  <pre><code>angular.module('main.controllers', [])
  
  .controller("SalesCtrl", function ($scope, $state, $http, $ionicLoading, $cordovaSQLite, $cordovaToast) {
      $ionicLoading.show({
          template: 'Loading data...'
      });
  // DO STUFF
  </code></pre>
  
  <p>Following this structure, I get this error (quote below): <a href="https://docs.angularjs.org/error/ng/areq?p0=LoginCtrl&amp;p1=not%20a%20function,%20got%20undefined" rel="nofollow">https://docs.angularjs.org/error/ng/areq?p0=LoginCtrl&amp;p1=not%20a%20function,%20got%20undefined</a></p>
  
  <blockquote>
    <p>Argument 'LoginCtrl' is not a function, got undefined</p>
  </blockquote>
  
  <p>I managed to get it to work slightly, only when I had login.js and not sales.js, but of course $state.* stopped working when trying to change template. So I know that wasn't 100% either. Hopefully this will make sense, fi it doesn't just clarify what I may be not making sense in, and I shall explain more if need be, appreciate any help. :)</p>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!-- App references --&gt;
  &lt;link href="css/ionic.css" rel="stylesheet" /&gt;
  &lt;link href="css/angular-chart.css" rel="stylesheet" /&gt;
  &lt;link href="css/index.css" rel="stylesheet" /&gt;
  
  &lt;script src="lib/ionic/ionic.bundle.js"&gt;&lt;/script&gt;
  &lt;script src="lib/ngCordova/ng-cordova.js"&gt;&lt;/script&gt; &lt;!-- Must be after Ionic but before Cordova--&gt;
  &lt;script src="cordova.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/index.js"&gt;&lt;/script&gt;
  
  &lt;script src="lib/angular-cookies/angular-cookies.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/angular-chart/Chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/angular-chart/angular-chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/angular-ios9-uiwebview.patch.js"&gt;&lt;/script&gt;
  &lt;script src="lib/angular-filter/angular-filter.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/directives/favourite.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/login.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/sales.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  </code></pre>