如何拥有多个控制器文件？

Question

解决了

因此,在查看您的回复并对我的代码进行细微更改之后,我发现了一个简单的拼写错误,这使我无法达到我追求的结果.所以,非常感谢大家帮忙解决了我的错误,我现在已将控制器分开,一切都按计划进行!

----

我目前正在Visual Studio 2015中使用Cordova,Ionic和AngularJS开发混合移动应用程序.由于我的单个controller.js文件中包含大量代码,我想分离代码,因此我有一个.js控制器文件每个模板; 而不是一个文件中的所有内容.不幸的是,我不明白如何解决这个问题(仍然学习AngularJS).我已经完成了一些研究但是我见过的大多数例子都显示了一个非常简单的演示,我用我自己的代码复制但是它仍然不起作用.所以我希望有人能给我一个洞察我可能出错的地方.

/ www中的文件结构

• 的index.html

/ JS

• app.js

• controllers.js

/ JS /控制器

• login.js

• sales.js

/模板

• 的login.html

• sales.html

/ js/app .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 /控制器/销售/ 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>

Answer 1

您正在每个控制器文件中重新定义模块.这是从该模块中清除旧的注册控制器.

您已经在自己的模块中定义了该模块/js/controllers.js.

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

因此,当您将任何组件绑定到其他Javascript文件时,请在其中重用该模块,如下所示.

angular.module('main.controllers')