Как я могу иметь несколько файлов контроллера?

РЕШЕНО

Итак, просмотрев ваши ответы и внеся небольшие изменения в свой код, я обнаружил простую опечатку, которая помешала мне достичь результата, к которому я стремился. Так что спасибо всем за помощь в том, где я ошибся, теперь я разделил контроллеры, и все работает, как и планировалось!

----

В настоящее время я разрабатываю гибридное мобильное приложение с использованием Cordova, Ionic и AngularJS в Visual Studio 2015. Из-за огромного количества кода, который у меня есть в моем единственном файле controller.js, я хочу разделить код, чтобы у меня был файл контроллера .js. по шаблону; а не все в одном файле. К сожалению, я не понимаю, как это осуществить (все еще изучаю AngularJS). Я провел некоторые исследования, но большинство примеров, которые я видел, показывают очень простую демонстрацию, которую я воспроизвел со своим собственным кодом, но она все еще не работает. Поэтому я надеялся, что кто-то может дать мне представление о том, где я могу ошибаться.

Структура файла в /www

• index.html

/js

• app.js

• контроллеры.js

/js/контроллеры

• логин.js

• продажи.js

/шаблоны

• логин.html

• продажи.html

/js/приложение .js

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);
    });

/js/controllers.js

angular.module('main.controllers', ['ionic', 'ngCordova']);

/js/controllers/login.js

angular.module('main.controllers', [])
.controller("LoginCtrl", function ($scope, $state, $cordovaSQLite, $timeout, $ionicPopup, $cordovaDevice, $ionicLoading, $cordovaKeyboard, $cordovaToast) {
    $ionicLoading.show({
        template: 'Loading...'
    });
// DO STUFF

/js/controllers/sales/js

angular.module('main.controllers', [])

.controller("SalesCtrl", function ($scope, $state, $http, $ionicLoading, $cordovaSQLite, $cordovaToast) {
    $ionicLoading.show({
        template: 'Loading data...'
    });
// DO STUFF

Следуя этой структуре, я получаю эту ошибку (цитата ниже): https://docs.angularjs.org/error/ng/areq?p0=LoginCtrl&p1=not%20a%20function,%20got%20undefined

Аргумент 'LoginCtrl' не является функцией, стал неопределенным

Мне удалось немного заставить его работать, только когда у меня был login.js, а не sales.js, но, конечно, $state.* перестал работать при попытке изменить шаблон. Так что я знаю, что это тоже не было на 100%. Надеюсь, это будет иметь смысл, т. к. это не просто проясняет то, что я, возможно, не понимаю, и я объясню больше, если потребуется, буду признателен за любую помощь. :)

ИЗМЕНИТЬ

index.html

<!-- App references -->
<link href="css/ionic.css" rel="stylesheet" />
<link href="css/angular-chart.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />

<script src="lib/ionic/ionic.bundle.js"></script>
<script src="lib/ngCordova/ng-cordova.js"></script> <!-- Must be after Ionic but before Cordova-->
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>

<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<script src="lib/angular-chart/Chart.min.js"></script>
<script src="lib/angular-chart/angular-chart.min.js"></script>
<script src="lib/angular-ios9-uiwebview.patch.js"></script>
<script src="lib/angular-filter/angular-filter.min.js"></script>
<script src="js/directives/favourite.js"></script>

<script src="js/controllers.js"></script>
<script src="js/controllers/login.js"></script>
<script src="js/controllers/sales.js"></script>
<script src="js/app.js"></script>