I followed the instruction on msdn to build the sample Apache Cordova, but when it is running, I am not getting and response from the output. The output is similar to the following image:
but there is no way to add / remove entry to the list.
I checked and found that index.html has the following lines:
<button class="templateLeft templateToggle" ng-class="{'checked': toDoItem.done, 'unchecked': !toDoItem.done}" ng-mousedown="toggleToDoDone(toDoItem)"></button>
<button class="templateLeft templateRemove" ng-click="removeToDo(toDoItem)"></button>
but there is no way to add new items to list?
What is wrong with this sample code that makes the UI doesn't work properly?
The sample uses angular.js
Edit 1:
To find why the sample doesn't work and why I am not getting the correct result, I tried to debug the javascrip code. Based on my understanding, when the page which the code for it is as follow :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/frameworks/angular.min.js"></script>
<script src="scripts/frameworks/angular-resource.min.js"></script>
<title>AngularJSToDo</title>
<!-- AngularJSToDo references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body ng-app="xPlat">
<section id="todoapp" ng-controller="ToDoCtrl">
<header id="header">
<div id="headerBand"></div>
<input id="new-todo" placeholder="What needs to be done?" ng-text-change="addToDo()" ng-model="newToDoText" autofocus>
</header>
<section id="main">
<div id="todo-list">
<div class="templateWrapper" ng-repeat="toDoItem in todos">
<div class="templateContainer">
<input class="templateTitle" ng-class="{crossedOut: toDoItem.done}" type="text" ng-text-change="changeToDoText(toDoItem)" ng-model="toDoItem.text" />
<h3 class="templateAddress">{{toDoItem.address}}</h3>
<button class="templateLeft templateToggle" ng-class="{'checked': toDoItem.done, 'unchecked': !toDoItem.done}" ng-mousedown="toggleToDoDone(toDoItem)"></button>
<button class="templateLeft templateRemove" ng-click="removeToDo(toDoItem)"></button>
</div>
<div class="templateBorder"></div>
</div>
</div>
</section>
</section>
<script src="scripts/index.js"></script>
</body>
</html>
The function in index.js is called: The source for index.js is as follow:
(function() {
'use strict';
angular.module('xPlat', ['xPlat.services', 'xPlat.controllers', 'xPlat.directives']);
angular.module('xPlat.directives', []);
angular.module('xPlat.controllers', []);
angular.module('xPlat.services', ['ngResource']);
})();
I put a breakpoints on this line:
angular.module('xPlat', ['xPlat.services', 'xPlat.controllers', 'xPlat.directives']);
and run the application, but the application did not stop on the line (apparently, the index.js is not loaded and if loaded, it is not run)
To see if the file exist in the correct place, I run the application and after it is loaded in ripple emulator, I change the url of the web browser to this:
http://localhost:4400/scripts/index.js
and I can see the index.js text on screen.
why this function is not run when I load the page?
Edit 2
After making some try and error, I found that I am getting these errors on JS console:
Failed to load resource: the server responded with a status of 404 (Not Found)
ripple.js (50,28958)
Error: [ng:areq] http://errors.angularjs.org/1.3.16/ng/areq?p0=ToDoCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://localhost:4400/scripts/frameworks/angular.min.js:6:417
at Sb (http://localhost:4400/scripts/frameworks/angular.min.js:19:510)
at La (http://localhost:4400/scripts/frameworks/angular.min.js:20:78)
at http://localhost:4400/scripts/frameworks/angular.min.js:75:465
at http://localhost:4400/scripts/frameworks/angular.min.js:57:178
at q (http://localhost:4400/scripts/frameworks/angular.min.js:7:428)
at M (http://localhost:4400/scripts/frameworks/angular.min.js:57:45)
at g (http://localhost:4400/scripts/frameworks/angular.min.js:51:409)
at g (http://localhost:4400/scripts/frameworks/angular.min.js:51:426)
angular.min.js (102,443)
It is appear from the first error that somefile is missing, but how can I find which file is missing?
I believe you haven't gone through all parts in that guidance.
Please keep following and you will find the functions you need in services.js mentioned in section "add the data model". The data model and related functions are defined there.