Application web porté sous cordova : erreur sur
Bonjour,
J'ai essayé de porter une application basée sur angular (une simple todolist trouvé online) en utilisant cordova.
Cela fonctionne parfaitement en mode web sur un pc :
Impossible de le faire marcher sur mon téléphone et sur l'émulateur genymotion. Voici le message d'erreur que j'obtiens uniquement sur Android Studio :
Citation:
E/Web Console﹕ Uncaught Error: [$injector:modulerr] Failed to instantiate module todoList due to:
Error: [$injector:nomod] Module 'todoList' 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.
http://errors.angularjs.org/1.3.12/$injector/nomod?p0=todoList
at file:///android_asset/www/js/angular.js:63:12
at file:///android_asset/www/js/angular.js:1767:17
at ensure (file:///android_asset/www/js/angular.js:1691:38)
at module (file:///android_asset/www/js/angular.js:1765:14)
at file:///android_asset/www/js/angular.js:4097:22
at forEach (file:///android_asset/www/js/angular.js:323:20)
at loadModules (file:///android_asset/www/js/angular.js:4081:5)
at createInjector (file:///android_asset/www/js/angular.js:4007:11)
at file:///android_asset/www/js/angular.js:1445:20
at bootstrap (file:///android_asset/www/js/angular.js:1466:12)
http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=todoList&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'todoList'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.3.12%2F%24injector%2Fnomod%3Fp0%3DtodoList%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A63%3A12%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A1767%3A17%0A%20%20%20%20at%20ensure%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A1691%3A38)%0A%20%20%20%20at%20module%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A1765%3A14)%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A4097%3A22%0A%20%20%20%20at%20forEach%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A323%3A20)%0A%20%20%20%20at%20loadModules%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A4081%3A5)%0A%20%20%20%20at%20createInjector%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A4007%3A11)%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A1445%3A20%0A%20%20%20%20at%20bootstrap%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fjs%2Fangular.js%3A1466%3A12) at file:///android_asset/www/js/angular.js:4120
Voici les 2 fichiers utilses :
index.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <!DOCTYPE html>
<html lang="fr" ng-app="todoList">
<head>
<meta charset="utf-8" />
<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">
</head>
<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>
</div>
<div class="view" ng-model="result">
<span>{{result}}</span>
</div>
</article>
</section>
<!-- <script src="cordova.js"></script>
<script src="js/index.js"></script>-->
<script src="js/angular.js"></script>
<script src="js/todoList.js"></script>
</body>
</html> |
todolist.js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| // js/todoList.js
//'use strict';
//var demoApp = angular.module('demoApp', [
// 'todoList'
//]);
/**
* Déclaration du module todoList
*/
var todoList = angular.module('todoList',[]);
todoList.controller('todoCtrl', ['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = !completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}
]); |
