温泉 - 科尔多瓦 - AngularJs 模块不可用

Question

我有一个 android 的混合应用程序，我正在使用 cordova 和 onsen + angular js。

这是我的 index.html 文件：

 <html lang="en"  ng-app="AppModel">
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <title>AppModel</title>  

    <!-- <link rel="stylesheet" href="css/plugins.css"/> -->
    <link rel="stylesheet/less" href="css/plugins.less"/>

    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">  

    <link rel="stylesheet/less" href="css/app.less"/>
    <link rel="stylesheet/less" href="css/base-layout.less"/>

    <script src="css/less.min.js" type="text/javascript"></script>


    <script src="http://maps.google.com/maps/api/js"></script>         
    <script src="js/lodash_3.2.0.min.js"></script>  


    <script src="lib/onsen/js/angular/angular.js"></script>   

    <script src="js/angular-google-maps_2.0.12.min.js"></script>
    <script src="lib/onsen/js/angular/angular-touch.js"></script> 

    <script src="lib/onsen/js/onsenui.min.js"></script>     


    <script src="js/jquery.min.js"></script>   
    <script src="js/plugins.js"></script> 

    <script type="text/javascript" src="cordova.js"></script>

    <script src="js/appStart.js"></script>      
    <script src="js/data/data.js"></script>    
    <script src="js/angularApp/controllers.js"></script>      
    <script src="js/angularApp/directives.js"></script>      
    <script src="js/angularApp/filters.js"></script>    


</head>

<body >    

<ons-sliding-menu
    menu-page="modules/core/menu.html" main-page="modules/account_profile/login.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true" swipe-target-width="50">
</ons-sliding-menu>

 </body>
 </html>

这是appStart.js

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'

exitFunction : function(){
     if (navigator.notification.confirm("Vuoi chiudere l'app?", 
            function(index) {
                if (index == 1) { // OK button
                    navigator.app.exitApp(); // Close the app
                }
            },
            "AppModel",
            ["Ok","Annulla"]
        ));
},

onDeviceReady: function() {
    app.receivedEvent('deviceready');

    ons.setDefaultDeviceBackButtonListener(function() {
        if (navigator.notification.confirm("Vuoi chiudere l'app?", 
            function(index) {
                if (index == 1) { // OK button
                    navigator.app.exitApp(); // Close the app
                }
            },
            "AppModel",
            ["Ok","Annulla"]
        ));
    });

    /*
    // Open any external link with InAppBrowser Plugin
    $(document).on('click', 'a[href^=http], a[href^=https]', function(e){

        e.preventDefault();
        var $this = $(this); 
        var target = $this.data('inAppBrowser') || '_blank';

        window.open($this.attr('href'), target);

    });
    */

    $(document).on('click', 'a', function(e){

        e.preventDefault();
        var $this = $(this); 
        //var target = $this.data('inAppBrowser') || '_blank';

        window.open($this.attr('href'), "_system");

    });


},
// Update DOM on a Received Event
receivedEvent: function(id) {
    //var parentElement = document.getElementById(id);
    //var listeningElement = parentElement.querySelector('.listening');
    //var receivedElement = parentElement.querySelector('.received');

    //listeningElement.setAttribute('style', 'display:none;');
    //receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);
}

};

 (function() {

var app = angular.module('AppModel', ['onsen', 'angular-carousel', 'uiGmapgoogle-maps'])    
.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|mailto|tel|geo):/);            
    }
]);

document.addEventListener('deviceready', function() {
    angular.bootstrap(document, ['AppModel']);       
}, false);

 })

而data.js、controller.js、filter.js、directive.js都是这样的：

 var app = angular.module('AppModel'); //this is the first line in each file

 app.factory('MenuData', function(){ [...]

但是当我在 google chrome 中启动应用 时，控制台显示：

未捕获错误：[$injector:nomod] 模块 'AppModel' 不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.2.10/$injector/nomod?p0=AppModel

由于每个文件的第一行，文件 data.js、controller.js、filter.js、directives.js 会出现此消息。

我不知道该怎么办。有人可以帮助我吗？

Answer 1

您似乎没有执行创建应用模块的行。

你必须运行行

angular.module('appName', [dependencies]);

在您创建控制器和服务之前，如错误消息所述。

您是在调用创建模块的匿名函数吗？只需添加一个空括号，它应该运行:

(function() {
  var app = angular.module(...
})();

Answer 2

如错误消息所述，您必须将依赖项指定为第二个参数。如果需要 none，则传递一个空数组。

改变

var app = angular.module('AppModel'); //this is the first line in each file

到

var app = angular.module('AppModel', []); //this is the first line in each file

又运行了。

附加信息：https://docs.angularjs.org/api/ng/function/angular.module

温泉 - 科尔多瓦 - AngularJs 模块不可用

Onsen - Cordova - AngularJs module is not available

android

angularjs

cordova

onsen-ui