javascript - 我怎样才能拥有多个 Controller 文件？

Question

已解决

因此，在查看了您的回复并对我的代码进行了细微更改后，我发现了一个简单的拼写错误，导致我无法获得想要的结果。所以感谢大家帮助解决我出错的地方，我现在已经分离了 Controller ，一切都按计划进行!

----

我目前正在 Visual Studio 2015 中使用 Cordova、Ionic 和 AngularJS 开发混合移动应用程序。由于我的单个 controller.js 文件中有大量代码，我想将代码分开，所以我有一个 .每个模板的 js Controller 文件；而不是一个文件中的所有内容。不幸的是，我不知道如何解决这个问题(仍在学习 AngularJS)。我已经做了一些研究，但我看到的大多数示例都显示了一个非常简单的演示，我用自己的代码复制了它，但它仍然不起作用。所以我希望有人能告诉我我可能哪里出错了。

/www 中的文件结构

• index.html

/js

• app.js

• controllers.js

/js/controllers

• login.js

• sales.js

/templates

• 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/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

Argument 'LoginCtrl' is not a function, got undefined

只有当我有 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

您在每个 Controller 文件中一次又一次地重新定义您的模块。它正在从该模块中清除旧的注册 Controller 。

您已经在 /js/controllers.js 中定义了该模块。

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

因此，当您将任何组件绑定(bind)到它时，请在其他 Javascript 文件中重用该模块，如下所示。

angular.module('main.controllers')