AngularJS和cordova: web应用工作，但不能cordova:实例化模块失败

AngularJS and cordova : web app working but not on cordova : Failed to instantiate module

本文关键字：cordova 但不能 实例化 模块 失败 应用 web AngularJS 工作      更新时间：2023-09-26

我正在尝试制作一个基于web应用程序的移动应用程序(简单的todolist)，使用cordova。它可以在ripple上工作，但在手机上，angularJS似乎无法激活。

在android studio，我得到这个在控制台:

E/Web Console: Uncaught Error: [$injector:modulerr]实例化module todoList失败，原因如下:错误:[$injector:nomod]模块'todoList'不可用!您要么拼错了模块名，要么忘记加载它。如果注册一个模块，请确保将依赖项指定为第二个参数。

这里是index.html: 

<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
    <head>
        <meta charset="utf-8" />
        <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">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Pense-bête</title>        
    </head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/todoList.js"></script>
    <body>
        <header>
            <h1>Pense-bête</h1>
        </header>
        <section ng-controller="todoCtrl">
            <form id="todo-form" ng-submit="addTodo()">
                <input id="new-todo" placeholder="Que voulez-vous acheter ?" ng-model="newTodo" />
            </form>
            <article ng-show="todos.length">
                <ul id="todo-list">
                    <li ng-repeat="todo in todos" ng-class="{completed: todo.completed}">
                        <div class="view">
                            <input class="mark" type="checkbox" ng-model="todo.completed" />
                            <span>{{todo.title}}</span>
                            <span class="close" ng-click="removeTodo(todo)">x</span>
                        </div>
                    </li>
                </ul>
                <div>
                    <input id="mark-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)" />
                    <label class="btn btn-info" for="mark-all">Tout cocher</label>
                    <button class="btn btn-danger" ng-click="clearCompletedTodos()">Supprimer les tâches cochées</button>
                    <button class="glyphicon glyphicon-refresh" ng-click="savedata()">Synchroniser ma liste</button>
                </div>
                        <div class="view" ng-model="result">
                            <span>{{result}}</span>
                        </div>
            </article>
        </section>
    </body>
</html>

和todolist.js:

//js/todoList.js 

'use strict';

/**
/**
 * Déclaration du module todoList
 */
var todoList = angular.module('todoList',[]);

/**
 * Contrôleur de l'application "Todo List" décrite dans le chapitre "La logique d'AngularJS".
 */
todoList.controller('todoCtrl', ['$scope',
    function ($scope) {
        // Pour manipuler plus simplement les todos au sein du contrôleur
        // On initialise les todos avec un tableau vide : []
        var todos = $scope.todos = [];
        // Ajouter un todo
        $scope.addTodo = function () {
            // .trim() permet de supprimer les espaces inutiles
            // en début et fin d'une chaîne de caractères
            var newTodo = $scope.newTodo.trim();
            if (!newTodo.length) {
                // éviter les todos vides
                return;
            }
            todos.push({
                // on ajoute le todo au tableau des todos
                title: newTodo,
                completed: false
            });
            // Réinitialisation de la variable newTodo
            $scope.newTodo = '';
        };
        // Enlever un todo
        $scope.removeTodo = function (todo) {
            todos.splice(todos.indexOf(todo), 1);
        };
        // Cocher / Décocher tous les todos
        $scope.markAll = function (completed) {
            todos.forEach(function (todo) {
                todo.completed = !completed;
            });
        };
        // Enlever tous les todos cochés
        $scope.clearCompletedTodos = function () {
            $scope.todos = todos = todos.filter(function (todo) {
                return !todo.completed;
            });
        };
    }
]);

为了在手机上调试您的网站，您可以使用safari移动检查器访问控制台并开始记录消息，以及查看可能弹出的任何错误。你可以在这里找到如何做到这一点:http://webdesign.tutsplus.com/articles/quick -提示-使用- web -检查- -调试-移动safari -设计- 8787

天哪，我的src里有todoList.js而不是todoList.js .

至少，它让我发现了chrome的远程调试。

谢谢!

相关文章：