CODEWITHSUNDEEP
javascriptandroidjqueryangularjscordova
lpuccio
lpuccio

Reputation: 103

Cordova javascript doesn't work on emulator

I am trying to build an AngularJS to-do list app for android using Cordova. The page loads fine if I open it in the browser, but I can't get any any script to run in the emulator, except for alert()s that I put in the global scope. Here is my code for the index.html page....

<html>
    <head>

        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
        <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="manifest" href="/manifest.json">
        <link rel="stylesheet" type="text/css" href="css/index.css">

        <title>To-do list</title>
    </head>
    <body>
        <div class="app" ng-controller="ToDoListController">
            <h1>Things to do.</h1>
            <ul>
                <li ng-repeat="item in list" ng-bind="item"></li>
            </ul>


        </div>
        <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
        <script type="text/javascript" src="../platforms/android/platform_www/cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

And for the index.js page:

$(document).ready(function(){
    document.addEventListener('deviceready', function(){

    });
    angular.module('ToDo',[])
        .controller('ToDoListController',['$scope',function($scope){
            $scope.list = ["FOO","BAR"];
        }]);
    angular.bootstrap(document,['ToDo']);
    $('ul').append('<li>Item appended</li>');
});

As I said, if I put an alert() in the global part if index.js, it will fire but nothing else will. The angular bootsrap and the jquery append function will not execute whether inside the $(document).ready() or outside of it. Everything works fine in a browser. Any help is appreciated.

Upvotes: 0

Views: 436

Answers (1)

lpuccio
lpuccio

Reputation: 103

Via Kerri Shotts, in the above comment:

You need everything you're going to source to be local to your www directory. Your files in node_modules aren't going to be copied over, and will be missing in your app. Hence part of your problem. The other problem is that you should only ever source cordova.js using src="cordova.js"; the appropriate file will be supplied when you build the app.

This worked. Thank you!

Upvotes: 1

Related Questions