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

Question

已解决

因此，在查看了您的回复并对我的代码进行了细微更改后，我发现了一个简单的错字，导致我无法达到我想要的结果。因此，感谢大家帮助我解决问题所在，我现在已经将控制器分开，一切都按计划进行！

----

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

/www 中的文件结构

• index.html

/js

• app.js

• controllers.js

/js/controllers

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

Answer 1

您在每个控制器文件中一次又一次地重新定义您的模块。这是从该模块中清除旧的注册控制器。

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

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

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

angular.module('main.controllers')

Answer 2

您要声明main.controllers 模块两次，每个控制器一次。此外，并不是严格要求为控制器声明一个单独的模块，您可以只在主模块中声明控制器。有些人会争辩说你失去了可重用性——他们是对的——但取决于你的项目的大小以及你的控制器与你的应用程序的耦合程度（90% 的答案是：非常 ) 你可以走那条路。由于您可能刚刚开始，请尝试执行以下操作：

js/app.js

angular.module('main', ['ionic', '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);
});

请注意，我不再依赖main.controllers？那是因为接下来我要这样做：

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

还有这个：

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

不同的控制器可以（并且应该）在一个单独的文件中声明，这样你就有一个清晰的结构。为控制器设置一个单独的模块可能更正确，我担心我的意见可能不受欢迎，但我真的不明白这一点 - 而我强烈建议您将服务和指令分成不同的模块，因为您更有可能在其他项目中再次使用它们。

Answer 3

最好的方法是将模块创建与模块使用明确分开。

modules.js：

angular.module('main', ['main.sales']);
angular.module('main.sales', []);

src/sales/scripts/sales-controller.js:

angular.module('main.sales').controller(function() {});

如果您通过 grunt 或 gulp 合并和缩小您的 js 文件，您应该始终首先明确包含 modules.js，然后您可以通过诸如 'src/**/*.js' 之类的模式包含其余部分。

这样，模块总是在使用之前定义。如果不是这样，angular 会抱怨一个不存在的模块。

PS：创建功能模块（1 个模块中的销售相关功能）而不是技术模块（1 个模块中的所有控制器）要好得多

Answer 4

我建议我们将代码拆分到模块中，并将其注入 app.js 文件中

这是我的详细信息：https://mymai91.github.io/ionic/2016/07/01/ionic-structure-code-for-project.html

代码演示：https://github.com/mymai91/mymaiApp

Answer 5

致任何查看“已解决代码”的人... 应删除内部控制器中的方括号：

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

-->

angular.module('main.controllers')