我怎样才能拥有多个控制器文件？

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

/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

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

您已经在 /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

所有关注 "solved code"... 应删除内部控制器中的方括号：

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

-->

angular.module('main.controllers')

我怎样才能拥有多个控制器文件？

How can I have multiple controller files?

javascript

angularjs

angularjs-controller

angularjs-module

ionic-framework