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

参数＆＃39; LoginCtrl＆＃39;不是一个功能，未定义

我设法让它稍微有点工作，只有当我有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

您正在重新定义您的模块＆amp;再次在您的每个控制器文件中。这是从该模块中清除旧的注册控制器。

您已在/js/controllers.js。

中定义了该模块

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

当您将任何组件绑定到其他Javascript文件时，请重复使用该模块，如下所示。

angular.module('main.controllers')

Answer 2

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

modules.js：

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

的src /销售/脚本/销售controller.js：

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

如果你通过grunt或gulp连接和缩小你的js文件，你应该首先明确地包含modules.js，之后你可以通过像src / ** / *这样的模式包含其余的.js＆＃39 ;例如。

这样，模块总是在使用之前定义。如果情况并非如此，那么angular会抱怨一个不存在的模块。

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

Answer 3

您正在声明main.controllers模块两次，每个控制器一次。此外，并非严格要求为控制器声明单独的模块，您只需在主模块中声明控制器即可。有些人认为你会失去可重用性 - 而且他们是对的 - 但取决于你的项目的大小以及你的控制器与你的应用程序的紧密耦合（90％的时间答案是：非常你可以这样走。由于你可能刚刚开始，尝试做这样的事情：

<强> JS / app.js

angular.module（＆＃39; main＆＃39;，[＆＃39; ionic＆＃39;，＆＃39; chart.js＆＃39;，＆＃39; ngCordova＆＃39;，＆＃39; ngIOS9UIWebViewPatch＆＃39;，＆＃39; angular.filter＆＃39;]）

.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 4

我的建议我们将通过拆分到模块来组织代码，并将其注入app.js文件

这是我的方式：https://mymai91.github.io/ionic/2016/07/01/ionic-structure-code-for-project.html

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

Answer 5

任何看着“解码”的人...... 应删除内部控制器中的方括号：

meanValue=sapply(list_of_df[1,1:ncol(list_of_df)], function(x) mean(x))

- ＆GT;

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

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

5 个答案: