Ionic / Cordova：找不到模块答案

【问题标题】：Ionic / Cordova: Module can't be foundIonic / Cordova：找不到模块
【发布时间】：2016-03-09 22:46:15
【问题描述】：

我定义了以下app.js：

angular.module('myApp', ['ionic', 'myApp.controllers'])

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }

        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '/',
        templateUrl: 'templates/home.html'
    }).state('prints', {
        url: '/prints',
        templateUrl: 'templates/photo_prints.html'
    }).state('box', {
        url: '/box',
        templateUrl: 'templates/photo_box.html'
    }).state('book', {
        url: '/book',
        templateUrl: 'templates/photo_book.html'
    }).state('framed', {
        url: '/framed',
        templateUrl: 'templates/photo_framed.html'
    });

    $urlRouterProvider.otherwise("/");
});

还有这个controllers.js：

angular.module('myApp.controllers').controller('HomeController', ['$scope', 'productsFactory', homeController]);

function homeController($scope, productsFactory) {
    $scope.products = [];

    init();

    function init() {
        $scope.products = productsFactory.getProducts();
    }
}

我还在 index.html 中添加了这两个脚本：

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <!-- Ionic -->
    <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.css">
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- myApp -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/factory.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
</head>

但是当我尝试运行它时，我得到了错误：

[$injector:nomod] Module 'myApp.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

找不到我的控制器...为什么？我完全按照 cordova 或 ionic 提供的标准模板来实现它。

【问题讨论】：

标签： cordova ionic-framework

【解决方案1】：

您应该像这样定义控制器的模块：

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

所以...

angular.module('myApp.controllers', [])
       .controller('HomeController', homeController);

homeController.$inject = ['$scope', 'productsFactory'];

function homeController($scope, productsFactory) {
         $scope.products = [];

     init();

     function init() {
          $scope.products = productsFactory.getProducts();
     }
}

这是reference。

更新：

当您创建一个新的 Ionic 项目时（比如说 sidemenu），您将拥有一个文件 controllers.js，其中定义了所有控制器。

您可以在这里定义您的应用将要使用的每个控制器：

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

.controller('sample1Controller', function($scope) {

})

.controller('sample2Controller', function($scope) {

})

.controller('sample3Controller', function($scope) {

});

在这里，在这个示例中，我定义了 3 个控制器：sample1Controller、sample2Controller、sample3Controller。

不过，这不是做事的最佳方式。最佳做法是为每个控制器创建一个 js 文件。让我们说它现在已经足够好了。

您的主应用 myApp 在此处定义：

angular.module('myApp', ['ionic', 'myApp.controllers'])

我猜它会附加到您的 HTML 中的某些元素上：

<body ng-app="myApp">
   <ion-nav-view></ion-nav-view>
</body>

你在你的应用程序中注入了几个模块：ionic 和你的myApp.controllers。

myApp.controllers 是一个自定义模块：控制器的容器。

你必须在某个地方定义它。你可以这样做：

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

如果你想在每个文件中分离你的控制器，你可以这样做。在一个文件中，您可以将控制器模块定义 (app.controllers.js)：

angular.module('app.controllers', []);

在每个文件中，您都可以拥有自己的控制器：

home.js

angular.module('app.controllers')
   .controller('homeController', function($scope) {

});

contacts.js

angular.module('app.controllers')
    .controller('contactsController', function($scope) {

});

当然，您必须在 index.html 中包含每个控制器的 js 文件。

你可以看看这个plunker。

【讨论】：

也许这是一种更好的做法，但它并不能解决问题。
创建一个 plunker，以便我们尝试修复它。
不幸的是我不明白你的意思。我使用“ionic start myApp sidemenu”创建了另一个项目，并使用它。但是在我添加了另一个模块后，我遇到了同样的问题。找不到。
用一些解释更新了我的答案。希望对您有所帮助。

【解决方案2】：

您应该只在您的 controllers.js 顶部添加这一行：

angular.module('myApp.controllers', []);

【讨论】：