CODEWITHSUNDEEP
cordovangcordovavisual-studio-2015cordova-plugin-file
Michael Maurel
Michael Maurel

Reputation: 97

cordova file is undefined in Cordova application

=====Cordova file is undefined=====

Hi.

I'm trying to learn some mobile development with Cordova. I want to create an application instagram-like, in which memories will be stored. The application uses two pages :

My code to create a file and writing a new memory inside seems to work (I can't open the file created so I can't be sure, but I don't get any error...). I'm now trying to use the ngCordova file plugin to access the file and display it's content.

Here is my code (for now) : note : my code has been translated in english for a better comprehension. I hope I didn"t make any translation error, unrelated to the topic at hand

index.html

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <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 *">

  <!-- Donwloaded files -->
  <script src="scripts/jquery-2.1.4.js"></script>
  <script src="scripts/angular.js"></script>
  <script src="scripts/angular-route.js"></script>
  <script src="scripts/bootstrap.js"></script>
  <script src="scripts/ng-cordova.js"></script>

  <!--Own libraries-->
  <script src="lib/index.js"></script>
  <script src="lib/app.js"></script>
  <script src="lib/controleurs/addMemoryController.js"></script>
  <script src="lib/controleurs/memoriesController.js"></script>

  <!-- Cordova reference -->
  <script src="cordova.js"></script>
  <script src="scripts/platformOverrides.js"></script>
</head>

index.js (first loaded file, auto-generated)

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() 
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        //angular.bootstrap(document, ['myMemories']); //aborted try. Give me the error : Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'
    };

    function onPause() {
    };

    function onResume() {
    };
} )();

app.js (declares the application)

var app = angular.module('myMemories', ['ngRoute','ngCordova']);

app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/memories.html",
            controller: "memoriesController"
        })
        .when("/ajouteSouvenir", {
            templateUrl: "views/addMemory.html",
            controller: "addMemoryController"
        })
        .otherwise({ redirectTo: "/" });

});

memoriesController.js

app.controller("souvenirsControleur", function ($scope,$rootScope,$cordovaFile) {

if (!$rootScope.memoriesList) {
    $cordovaFile.readAsText(cordova.file.dataDirectory, "stored_memories.json").then(
        function (pResult) {
            if (typeof (pResult) == "string") {
                $rootScope.memoriesList= JSON.parse(pResult);
            } else {
                $rootScope.memoriesList= pResult;
            }
        },
        function (pError) { console.log("error : readAsText"); console.log(pError);}
    );
}
});

I get the following error : TypeError: Cannot read property 'dataDirectory' of undefined. I though I used the right thing, which I found here : http://ngcordova.com/docs/plugins/file/

Here is what I tried but didn't work :

I'm quite sure my mistake is something obvious, but I can't grasp it...

I can give more code if you need it.

Upvotes: 0

Views: 1855

Answers (3)

Michael Maurel
Michael Maurel

Reputation: 97

I don"t really get what happened here. Cordova.file was simply not loaded correctly.

I created a new project, added the pluging from the beggining and wrote everything back wihtout any other change. Let's put VisualStudio at fault here, it's easier :)

Upvotes: 0

Michael Maurel
Michael Maurel

Reputation: 97

So I followed another post on a similar subject and added this in my application :

index.js (first loaded file)

(function () {
    "use strict";

    angular.element(document).ready(function () {
        if (window.cordova) {
            console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires.");
            document.addEventListener('deviceready', function () {
                console.log("Deviceready event has fired, bootstrapping AngularJS.");
                angular.bootstrap(document.body, ['myMemories']);
            }, false);
        } else {
            console.log("Running in browser, bootstrapping AngularJS now.");
            angular.bootstrap(document.body, ['myMemories']);
        }
    });
} )();

I also remove the following line from my index.htm file : index.html

<html ng-app="myMemories">

(I learned than ng-app already bootstrapps the application)

When I launch my code, I have this :

"Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires."

"Deviceready event has fired, bootstrapping AngularJS."

TypeError: Cannot read property 'dataDirectory' of undefined

I can't understand what's happening here. My code is executed after the "devideReady" occured, so cordova.file should be available !

Upvotes: 0

pgollo
pgollo

Reputation: 53

It could be that you are trying to use cordova.file before the device is ready. As a test, try moving the code into an event handler 

document.addEventListener('deviceready', function () {
  // Put code here
});

Upvotes: 1

Related Questions